Bootstrap Forms

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

Inputs

Default

Copy

<form>
  <div class="row">
    <div class="col-md-6">
      <div class="input-group input-group-outline my-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control">
      </div>
    </div>
    <div class="col-md-6">
      <div class="input-group input-group-outline my-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control" disabled>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="input-group input-group-outline is-valid my-3">
        <label class="form-label">Success</label>
        <input type="email" class="form-control">
      </div>
    </div>
    <div class="col-md-6">
      <div class="input-group input-group-outline is-invalid my-3">
        <label class="form-label">Error</label>
        <input type="email" class="form-control">
      </div>
    </div>
  </div>
</form>

Alternative

If you want to use forms on grayish background colors, you can use this beautiful alternative style which removes the borders and it is emphasized only by its shadow.

Copy

<div class="p-4 bg-light">
<form>
  <div class="row">
    <div class="col-md-6">
      <div class="input-group input-group-outline my-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control">
      </div>
    </div>
    <div class="col-md-6">
      <div class="input-group input-group-outline my-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control" disabled>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="input-group input-group-outline is-valid my-3">
        <label class="form-label">Success</label>
        <input type="email" class="form-control">
      </div>
    </div>
    <div class="col-md-6">
      <div class="input-group input-group-outline is-invalid my-3">
        <label class="form-label">Error</label>
        <input type="email" class="form-control">
      </div>
    </div>
  </div>
</form>
</div>

Form styles

Copy

<div class="p-4">
  <form>
    <div class="input-group input-group-outline mb-4">
      <label class="form-label">Label</label>
      <input type="text" class="form-control">
    </div>

    <div class="input-group input-group-dynamic mb-4">
      <label class="form-label">Label</label>
      <input type="text" class="form-control">
    </div>

    <div class="input-group input-group-static mb-4">
      <label>Label</label>
      <input type="text" class="form-control">
    </div>
  </form>
</div>

Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

For all form control you can apply the additional modifier classes explained in the Inputs section: .form-control-alternative, .form-control-flush and .form-control-muted.

Copy

<form>
  <div class="input-group input-group-outline my-3">
    <label class="form-label">Email address</label>
    <input type="email" class="form-control">
  </div>
  <div class="input-group input-group-static mb-4">
     <label for="exampleFormControlSelect1" class="ms-0">Example select</label>
     <select class="form-control" id="exampleFormControlSelect1">
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
     </select>
   </div>
   <div class="input-group input-group-static">
       <label for="exampleFormControlSelect2" class="ms-0">Example multiple select</label>
       <select multiple="" class="form-control pb-4" id="exampleFormControlSelect2">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
       </select>
     </div>
    <div class="input-group input-group-dynamic">
      <textarea class="form-control" rows="5" placeholder="Say a few words about who you are or what you're working on." spellcheck="false"></textarea>
    </div>
</form>

HTML5 inputs

Copy

<form>
    <div class="input-group input-group-outline my-3">
      <label class="form-label">Text</label>
      <input type="text" class="form-control">
    </div>
    <div class="input-group input-group-outline my-3">
      <label class="form-label">Search</label>
      <input type="text" class="form-control">
    </div>
    <div class="input-group input-group-outline my-3">
      <label class="form-label">Email/label>
      <input type="email" class="form-control">
    </div>
    <div class="input-group input-group-outline my-3">
      <label class="form-label">Url</label>
      <input type="url" class="form-control">
    </div>
    <div class="input-group input-group-outline my-3">
      <label class="form-label">Phone</label>
      <input type="tel" class="form-control">
    </div>
    <div class="input-group input-group-outline my-3">
      <label class="form-label">Password</label>
      <input type="password" class="form-control">
    </div>
    <div class="input-group input-group-outline my-3">
      <label class="form-label">Number</label>
      <input type="number" class="form-control">
    </div>
    <div class="input-group input-group-static my-3">
      <label>Datetime</label>
      <input type="datetime-local" class="form-control">
    </div>
    <div class="input-group input-group-static my-3">
      <label>Date</label>
      <input type="date" class="form-control">
    </div>
    <div class="input-group input-group-static my-3">
      <label>Month</label>
      <input type="month" class="form-control">
    </div>
    <div class="input-group input-group-static my-3">
      <label>Week</label>
      <input type="week" class="form-control">
    </div>
    <div class="input-group input-group-static my-3">
      <label>Time</label>
      <input type="time" class="form-control">
    </div>
    <div class="input-group input-group-static my-3">
      <label>Color</label>
      <input type="color" class="form-control">
    </div>
    <div class="form-group">
        <label for="example-color-input" class="form-control-label">Color</label>
        <input class="form-control" type="color" value="#5e72e4" id="example-color-input">
    </div>
</form>

Custom forms

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Checkboxes

Check this custom checkbox

Copy

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="fcustomCheck1" checked="">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Radios

Toggle this custom radio

Or toggle this other custom radio

Copy

<div class="form-check mb-3">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="customRadio1">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="customRadio2">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Disabled

Check this custom checkbox

Toggle this custom radio

Copy

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="form-check">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="form-check-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

Toggles

Checked switch

Copy

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" checked="">
  <label class="form-check-label" for="flexSwitchCheckDefault">Checked switch</label>
</div>