
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
Be sure to use an appropriate type
attribute on all inputs (e.g., email
for email address or number
for numerical information) to take advantage of newer
input controls like email verification, number selection, and more.
A basic form control with disabled and readonly mode.
<input type="text" class="form-control" placeholder="Input box"> <input type="text" class="form-control" placeholder="Input box (disabled)" disabled> <textarea class="form-control" rows="2" placeholder="Textarea"></textarea> <textarea class="form-control" rows="2" placeholder="Textarea (disabled)" disabled></textarea>
A form control with success, warning and error state.
<form class="was-validated"> <div class="row"> <div class="form-group col-sm-6"> <input type="text" class="form-control" placeholder="Valid state"> <div class="valid-feedback">Looks good!</div> </div> <div class="form-group col-sm-6"> <input type="text" class="form-control" placeholder="Invalid state" required=""> <div class="invalid-feedback">This is required</div> </div> <div class="form-group col-sm-6"> <textarea class="form-control" rows="2" placeholder="Valid state"></textarea> <div class="valid-feedback">Looks good!</div> </div> <div class="form-group col-sm-6"> <textarea class="form-control" rows="2" placeholder="Invalid state" required=""></textarea> <div class="invalid-feedback">This is required</div> </div> </div> </form>
For even more customization and cross browser consistency, use our completely custom checkbox element to replace the browser defaults.
<div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Custom checkbox</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck2" disabled> <label class="custom-control-label" for="customCheck2">Custom checkbox (disabled)</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck3" checked> <label class="custom-control-label" for="customCheck3">Custom checkbox (checked)</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck4" checked disabled> <label class="custom-control-label" for="customCheck4">Custom checkbox (checked disabled)</label> </div>
For even more customization and cross browser consistency, use our completely custom radio element to replace the browser defaults.
<div class="custom-control custom-radio"> <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked> <label class="custom-control-label" for="customRadio1">Custom radio</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio2">Custom radio</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio3" name="customRadio2" class="custom-control-input" checked disabled> <label class="custom-control-label" for="customRadio3">Custom radio</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio4" name="customRadio2" class="custom-control-input" disabled> <label class="custom-control-label" for="customRadio4">Custom radio</label> </div>
A switch has the markup of a custom checkbox but uses the .custom-switch
class to
render a toggle switch. Switches also support the disabled attribute.
<div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="customSwitch1"> <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label> </div> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" disabled id="customSwitch2"> <label class="custom-control-label" for="customSwitch2">Disabled switch element</label> </div> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="customSwitch3" checked> <label class="custom-control-label" for="customSwitch3">Toggle this switch element</label> </div> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" disabled id="customSwitch4" checked disabled> <label class="custom-control-label" for="customSwitch4">Disabled switch element</label> </div>
Create custom range controls with .custom-range
. The track (the background) and
thumb (the value) are both styled to appear the same across browsers.
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.
<div class="custom-file"> <input type="file" class="custom-file-input" id="customFile"> <label class="custom-file-label" for="customFile">Choose file</label> </div>
Custom select menus need only a custom class, .custom-select
to trigger the
custom
styles.
<select class="custom-select"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>
Set heights using classes like .input-lg
, and set widths using grid column
classes like .col-lg-*
.
<form role="form" class="form-horizontal"> <div class="form-group row"> <label class="col-sm-2 col-form-label" for="example-input-small">Small</label> <div class="col-sm-10"> <input type="text" id="example-input-small" name="example-input-small" class="form-control form-control-sm" placeholder=".input-sm"> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label" for="example-input-normal">Normal</label> <div class="col-sm-10"> <input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal"> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label" for="example-input-large">Large</label> <div class="col-sm-10"> <input type="text" id="example-input-large" name="example-input-large" class="form-control form-control-lg" placeholder=".input-lg"> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label">Grid Sizes</label> <div class="col-sm-4"> <input type="text" class="form-control" placeholder=".col-sm-4"> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label">Static</label> <div class="col-sm-10"> <div class="input-group"> <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> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label">Dropdowns</label> <div class="col-sm-10"> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1"> </div> </div> </div> <div class="form-group row mb-0"> <label class="col-sm-2 col-form-label">Buttons</label> <div class="col-sm-10"> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <button class="btn btn-dark" type="button">Button</button> </div> </div> </div> </div> </form>
<form role="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"> <div class="checkbox"> <input id="checkbox0" type="checkbox"> <label for="checkbox0"> Check me out </label> </div> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
<form class="form-horizontal" role="form"> <div class="form-group row"> <label for="inputEmail3" class="col-sm-3 col-form-label">Email</label> <div class="col-sm-9"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-3 col-form-label">Password</label> <div class="col-sm-9"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group row"> <label for="inputPassword5" class="col-sm-3 col-form-label">Re Password</label> <div class="col-sm-9"> <input type="password" class="form-control" id="inputPassword5" placeholder="Retype Password"> </div> </div> <div class="form-group row justify-content-end"> <div class="col-sm-9"> <div class="checkbox checkbox-primary"> <input id="checkbox2" type="checkbox"> <label for="checkbox2"> Check me out ! </label> </div> </div> </div> <div class="form-group mb-0 justify-content-end row"> <div class="col-sm-9"> <button type="submit" class="btn btn-info">Sign in</button> </div> </div> </form>
You may also swap .row
, a variation of our standard grid
row that
overrides the default column gutters for tighter and more compact layouts.
<form> <div class="row"> <div class="form-group col-md-6"> <label for="inputEmail4" class="col-form-label">Email</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> </div> <div class="form-group col-md-6"> <label for="inputPassword4" class="col-form-label">Password</label> <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> </div> </div> <div class="form-group"> <label for="inputAddress" class="col-form-label">Address</label> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div> <div class="form-group"> <label for="inputAddress2" class="col-form-label">Address 2</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div> <div class="row"> <div class="form-group col-md-6"> <label for="inputCity" class="col-form-label">City</label> <input type="text" class="form-control" id="inputCity"> </div> <div class="form-group col-md-4"> <label for="inputState" class="col-form-label">State</label> <select id="inputState" class="form-control"> <option>Choose</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> <div class="form-group col-md-2"> <label for="inputZip" class="col-form-label">Zip</label> <input type="text" class="form-control" id="inputZip"> </div> </div> <div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck11"> <label class="custom-control-label" for="customCheck11">Check this custom checkbox</label> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form>