text disabled bootstrap code example

Example 1: bootstrap form examples

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Example 2: bootstrap input

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
  </div>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

Example 3: bootstrap forms

Example of .form-group
<form>
 <div class=”form-group”>
 <label for=”exampleInputEmail1”>Email 

address</label>
 <input type=”email” class=”form-control” id=”exampleInputEmail1” ariadescribedby=”emailHelp” placeholder=”Provide email”>
 </div>
 <div class=”form-group”>
 <label for=”exampleInputPassword1”>Your password</label>
 <input type=”password” class=”form-control” id=”exampleInputPassword1”
placeholder=”Password”>
 </div>
 <div class=”form-group form-check”>
 <input type=”checkbox” class=”form-check-input” id=”exampleCheck1”>
 <label class=”form-check-label” for=”exampleCheck1”>Remember me</label>
 </div>
 <button type=”submit” class=”btn btn-primary”>Submit</button>
</form>
.form-control
Use this class to style all textual form controls such as user input, titles, etc.
<form>
 <div class=”form-group”>
 <label for=”exampleFormControlInput1”>Email address</label>
 <input type=”email” class=”form-control” id=”exampleFormControlInput1”
placeholder=”[email protected]”>
 </div>
.form-control-file
Add this class whenever you need to provide the user with an option to upload a file to the form.
<input type=”file” class=”form-control-file” id=”exampleFormControlFile1”>
.form-control-lg and .form-control-sm.
Create a visual hierarchy within your form by adding .form-control-lg to make bigger input areas and .form-control-sm to
make smaller ones.
<input class=”form-control form-control-lg” type=”text” placeholder=”.form-controllg”>
<input class=”form-control form-control-sm” type=”text” placeholder=”.form-controlsm”>