Form Layouts

Overview
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 Controls

For file inputs, swap the .form-controlfor .form-control-file. 

<!-- Input --><div class="form-group">  <label for="exampleFormControlInput1">Email address</label>  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"></div><!-- Select --><div class="form-group">  <label for="exampleFormControlSelect1">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><!-- Textarea --><div class="form-group">  <label for="exampleFormControlTextarea1">Example textarea</label>  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea></div><!-- File input --><div class="form-group">  <label for="exampleFormControlFile1">Example file input</label>  <input type="file" class="form-control-file" id="exampleFormControlFile1"></div>
Sizing Input 
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"><input class="form-control" type="text" placeholder="Default input"><input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
Sizing Select 
<select class="form-control form-control-lg">  <option>Large select</option></select><select class="form-control">  <option>Default select</option></select><select class="form-control form-control-sm">  <option>Small select</option></select>
Readonly 
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Readonly plain text 
<form>  <div class="form-group row">    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>    <div class="col-sm-10">      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">    </div>  </div>  <div class="form-group row">    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>    <div class="col-sm-10">      <input type="password" class="form-control" id="inputPassword" placeholder="Password">    </div>  </div></form>
<form class="form-inline">  <div class="form-group mb-2">    <label for="staticEmail2" class="sr-only">Email</label>    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">  </div>  <div class="form-group mx-sm-3 mb-2">    <label for="inputPassword2" class="sr-only">Password</label>    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">  </div>  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button></form>
Range Inputs

Set horizontally scrollable range inputs using .form-control-range. 

<form>  <div class="form-group">    <label for="formControlRange">Example Range input</label>    <input type="range" class="form-control-range" id="formControlRange">  </div></form>
Checkboxes and radios

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check. 

<div class="form-check">  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">  <label class="form-check-label" for="defaultCheck1">    Default checkbox  </label></div><div class="form-check">  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>  <label class="form-check-label" for="defaultCheck2">    Disabled checkbox  </label></div>
<div class="form-check">  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>  <label class="form-check-label" for="exampleRadios1">    Default radio  </label></div><div class="form-check">  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">  <label class="form-check-label" for="exampleRadios2">    Second default radio  </label></div><div class="form-check">  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>  <label class="form-check-label" for="exampleRadios3">    Disabled radio  </label></div>

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check. 

<div class="form-check form-check-inline">  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">  <label class="form-check-label" for="inlineCheckbox1">1</label></div><div class="form-check form-check-inline">  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">  <label class="form-check-label" for="inlineCheckbox2">2</label></div><div class="form-check form-check-inline">  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label></div>
<div class="form-check form-check-inline">  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">  <label class="form-check-label" for="inlineCheckbox1">1</label></div><div class="form-check form-check-inline">  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">  <label class="form-check-label" for="inlineCheckbox2">2</label></div><div class="form-check form-check-inline">  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label></div>

Without labels

Add .position-staticto inputs within .form-checkthat don’t have any label text. Remember to still provide some form of label for assistive technologies (for instance, using aria-label). 

<div class="form-check">  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="..."></div><div class="form-check">  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."></div>
Layout

Form row

You may also swap .rowfor .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="col">      <input type="text" class="form-control" placeholder="First name">    </div>    <div class="col">      <input type="text" class="form-control" placeholder="Last name">    </div>  </div></form>

More complex layouts can also be created with the grid system. 

<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>...</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">    <div class="form-check">      <input class="form-check-input" type="checkbox" id="gridCheck">      <label class="form-check-label" for="gridCheck">        Check me out      </label>    </div>  </div>  <button type="submit" class="btn btn-primary">Sign in</button></form>

Horizontal form

Radios
Checkbox 
<form>  <div class="form-group row">    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>    <div class="col-sm-10">      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">    </div>  </div>  <div class="form-group row">    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>    <div class="col-sm-10">      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">    </div>  </div>  <fieldset class="form-group">    <div class="row">      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>      <div class="col-sm-10">        <div class="form-check">          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>          <label class="form-check-label" for="gridRadios1">            First radio          </label>        </div>        <div class="form-check">          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">          <label class="form-check-label" for="gridRadios2">            Second radio          </label>        </div>        <div class="form-check disabled">          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>          <label class="form-check-label" for="gridRadios3">            Third disabled radio          </label>        </div>      </div>    </div>  </fieldset>  <div class="form-group row">    <div class="col-sm-2">Checkbox</div>    <div class="col-sm-10">      <div class="form-check">        <input class="form-check-input" type="checkbox" id="gridCheck1">        <label class="form-check-label" for="gridCheck1">          Example checkbox        </label>      </div>    </div>  </div>  <div class="form-group row">    <div class="col-sm-10">      <button type="submit" class="btn btn-primary">Sign in</button>    </div>  </div></form>

Horizontal form label sizing

Be sure to use .col-form-label-smor .col-form-label-lgto your <label>s or <label>s to correctly follow the size of .form-control-lgand .form-control-sm. 

<form>  <div class="form-group row">    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>    <div class="col-sm-10">      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">    </div>  </div>  <div class="form-group row">    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>    <div class="col-sm-10">      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">    </div>  </div>  <div class="form-group row">    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>    <div class="col-sm-10">      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">    </div>  </div></form>
Help text

Block-level help text in forms can be created using .form-text(previously known as .help-blockin v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. 
<label for="inputPassword5">Password</label><input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock"><small id="passwordHelpBlock" class="form-text text-muted">  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
Disabled forms

Block-level help text in forms can be created using .form-text(previously known as .help-blockin v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted. 

<form>  <fieldset disabled>    <div class="form-group">      <label for="disabledTextInput">Disabled input</label>      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">    </div>    <div class="form-group">      <label for="disabledSelect">Disabled select menu</label>      <select id="disabledSelect" class="form-control">        <option>Disabled select</option>      </select>    </div>    <div class="form-group">      <div class="form-check">        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>        <label class="form-check-label" for="disabledFieldsetCheck">          Can't check this        </label>      </div>    </div>    <button type="submit" class="btn btn-primary">Submit</button>  </fieldset></form>