Forms
Create forms with a large variety of components, layout options and styles.
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.
Input types
Textual form controls like <input>'s, <select>'s and <textarea>'s are styled with the .form-control class. Included styles are for general appearance, focus state, sizing and more.
We only use custom form elements from Bootstrap to not interfere with default styling, while still keeping familiar Bootstrap classes and custom styles for form elements.
Text, textarea
<!-- Text input -->
<div class="form-group">
<label for="exampleFormControlInput1">Examle text input</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="John Doe">
</div>
<!-- Textarea -->
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Lorem ipsum.."></textarea>
</div>
Selects PRO
Selects are powered by a plugin. Check out the documentation for the selects component here.
Range slider
Create horizontally scrollable range inputs using .custom-range.
<div class="form-group">
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" min="0" max="100" step="5" id="customRange1">
</div>
File upload
Allow users to browse for files to upload by wrapping a file input in a button-styled <div>. Customize the layout to your liking and show the filename with some custom JavaScript.
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</div>
Checkboxes
Check. Use .form-check with the following elements inside to create checkboxes. Use .custom-checkbox-filled for an alternative style of checkbox, where the active state has a filled background.
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkbox1">
<label class="custom-control-label" for="checkbox1">Standard option</label>
</div>
</div>
<div class="form-check">
<div class="custom-control custom-checkbox-filled">
<input type="checkbox" class="custom-control-input" id="checkbox2">
<label class="custom-control-label" for="checkbox2">Filled alternative</label>
</div>
</div>
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkbox3" disabled>
<label class="custom-control-label" for="checkbox3">Disabled option</label>
</div>
</div>
Radio buttons
Similar to checkboxes, but this time as radio buttons.
<div class="form-check">
<div class="custom-control custom-radio">
<input id="radio1" name="radio" type="radio" class="custom-control-input">
<label class="custom-control-label" for="radio1">Option 1</label>
</div>
</div>
<div class="form-check">
<div class="custom-control custom-radio">
<input id="radio2" name="radio" type="radio" class="custom-control-input">
<label class="custom-control-label" for="radio2">Option 2</label>
</div>
</div>
<div class="form-check">
<div class="custom-control custom-radio">
<input id="radio3" name="radio" type="radio" class="custom-control-input" disabled="">
<label class="custom-control-label" for="radio3">Disabled option</label>
</div>
</div>
Switches
Checkboxes disguised as a fancy switch that allows your users to toggle something in style.
<div class="form-check">
<div class="custom-control custom-switch">
<input id="radio4" type="checkbox" class="custom-control-input">
<label class="custom-control-label" for="radio4">Option 1</label>
</div>
</div>
<div class="form-check">
<div class="custom-control custom-switch">
<input id="radio5" type="checkbox" class="custom-control-input">
<label class="custom-control-label" for="radio5">Option 2</label>
</div>
</div>
<div class="form-check">
<div class="custom-control custom-switch">
<input id="radio6" type="checkbox" class="custom-control-input" disabled="">
<label class="custom-control-label" for="radio6">Disabled option</label>
</div>
</div>
Date & time PRO
Date & time inputs are powered by a plugin. Check out the documentation for the date & time picker component here.
Tags PRO
Tag inputs are powered by a plugin. Check out the documentation for the tags input component here.
Customizing inputs
Sizing
Make inputs smaller or larger using .form-control-sm and .form-control-lg respectively.
<input class="form-control form-control-lg" type="text" placeholder="Large">
<input class="form-control my-2" type="text" placeholder="Default">
<input class="form-control form-control-sm" type="text" placeholder="Small">
Floating label
Create a label that looks like a placeholder at first, but floats on top of the input when selected or filled with content. Simply activate by adding the .label-float class to your .form-group. Our JavaScript does the rest and activates the functionality on page load.
<!-- Text input floating label -->
<div class="form-group label-float">
<label for="textinput2">Examle text input floatlabel</label>
<input type="text" class="form-control" id="textinput2">
</div>
<!-- Textarea floating label -->
<div class="form-group label-float">
<label for="textinput3">Example textarea floatlabel</label>
<textarea class="form-control" id="textinput3" rows="3"></textarea>
</div>
Readonly
Add the readonly boolean attribute to an input to prevent modification of the value. Alternatively, make it look like regular text using .form-control-plaintext.
<!-- Text input readonly -->
<div class="form-group">
<label for="textinput4">Examle text input</label>
<input type="text" class="form-control" readonly placeholder="Readonly input here.." id="textinput4">
</div>
<!-- Text input readonly plaintext -->
<div class="form-group">
<label for="textinput5">Examle text input</label>
<input type="text" class="form-control-plaintext" readonly placeholder="[email protected]" id="textinput5">
</div>
Help text
Add help text underneath your input to give extra information to the user. .form-text applies display: block; to the element, positioning it underneath the input. Alternatively, using inline forms and leaving .form-text out, you can place the help text besides the input.
<!-- Input with help text -->
<form>
<div class="form-group">
<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>
</div>
</form>
<!-- Inline form input with help text -->
<form class="form-inline">
<div class="form-group">
<label for="inputPassword6">Password</label>
<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Must be 8-20 characters long.
</small>
</div>
</form>
Disabled forms
Add the disabled boolean attribute to an input to prevent user interactions. Or add it to a <fieldset> to disable all the controls within.
<form>
<!-- Disabled input -->
<div class="form-group">
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</div>
<!-- Disabled fieldset -->
<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>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Caveat with anchors
<input>, <select> and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <a class="btn btn-*"> elements, these will only be given a style of pointer-events: none. This CSS property is not yet standardized and isn’t fully supported in Internet Explorer 10, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
Cross-browser compatibility
disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.
Layout
Since display: block and width: 100% are applied to almost all form controls, forms will stack vertically by default. Additional layouts can be created using a variety of classes.
Form groups
A .form-group is an easy way of bundling form elements together that belong together, such as a <label>, <input> and help or validation text. It applies a margin-bottom, but picks up additional styles in .form-inline. Use it with <fieldset>'s, <div>'s or nearly any other element.
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
Form grid
More complex forms can be built using grid classes. Use these for form layouts that require multiple columns, varied widths and additional alignment options.
This can be done using the standard .row, but you may swap this class with .form-row for tighter gutters and more compact layouts.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">First name</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="John">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Last name</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Doe">
</div>
</div>
</form>
Alternatively you can turn form groups into rows by adding the .row class and using .col-*-* classes to specify the width of labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.
<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>
</form>
Horizontal form label sizing
Be sure to add .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .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>
Column auto sizing
In addition to specifying column width equally (with .col) or manually (with .col-*), you can use .col-auto to let a columns take up as much space as needed. The column sizes itself based on the contents.
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
</div>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</div>
</form>
Inline forms
Use .form-inline to display a series of labels, form controls and buttons on a single horizontal row. Form controls within inline forms may vary slightly from their default states.
- Controls are
display: flex, collapsing any HTML white space and allowing you to provide alignment control with spacing and flexbox utilities. - Controls and input groups receive
width: auto, overriding the defaultwidth: 100%. - Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.
You may need to manually address the width and alignment of individual form controls with spacing utilities, as shown below. Lastly, be sure to always include a <label> wich each form control, even if you need to hide it from non-screenreader visitors with .sr-only.
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="inlineFormcheck">
<label class="custom-control-label" for="inlineFormcheck">Remember my preference</label>
</div>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
Inline checkboxes, radios and switches
Add .form-check-inline to .form-check elements to group checkboxes, radios and switches on the same horizontal row.
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="checkInline1">
<label class="custom-control-label" for="checkInline1">Checkbox 1</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="checkInline2">
<label class="custom-control-label" for="checkInline2">Checkbox 2</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="checkInline3">
<label class="custom-control-label" for="checkInline3">Checkbox 3</label>
</div>
</div>
Form validation
For in-depth validation documentation, please refer to Bootstrap’s form validation documentation.
<form class="needs-validation" novalidate>
<div class="form-group">
<label for="validationName">Name</label>
<input type="text" class="form-control" id="validationName" placeholder="First name" value="John Doe" required>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Please enter your name.</div>
</div>
<div class="form-group">
<label for="validationUsername">Username</label>
<input type="text" class="form-control" id="validationUsername" placeholder="Username" required>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Please choose a username.</div>
</div>
<div class="form-group">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="validationCheck" required>
<label class="custom-control-label" for="validationCheck">Remember my preference</label>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>