Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Overview

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

We'll never share your email with anyone else. 
<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-group 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>

Form row

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2"
      placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>New Jersey</option>
        <option> Mexico </option>
        <option> York </option>
        <option>North Carolina </option>
        <option>North Dakota </option>
        <option>Ohio </option>
        <option>Oklahoma </option>
        <option>Oregon </option>
        <option>Pennsylvania</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <label class="ec-checkbox check-xs mb-3 mr-4">
      <input type="checkbox" name="checkbox">
      <span class="ec-checkbox__control"></span>
      <span class="ec-checkbox__lebel">Checked</span>
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

<div class="form-group">
  <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
</div>
<div class="form-group">
  <input class="form-control" type="text" placeholder="Default input">
</div>
<div class="form-group">
  <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>

Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

@
@example.com
https://example.com/users/
$
.00
With textarea 
<div class="dropup">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">
              Another action
            </a>
            <a class="dropdown-item" href="#">
              Something else here
            </a>
            <a class="dropdown-item" href="#">
              Anything else
            </a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">
              Cool, Support Divider
            </a>
          </div>
        </div>

Variants

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. 

<div class="form-group">
  <input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
  <input type="email" class="form-control rounded-0" placeholder="Email">
</div>
<div class="form-group">
  <input type="password" class="form-control rounded-pill" placeholder="password">
</div>
<div class="form-group">
  <textarea class="form-control rounded-pill" rows="5" placeholder="Simple textarea"
    spellcheck="false"></textarea>
</div>

For more details please visit Bootstrap official site. Bootstrap Documentation