Forms

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

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.

                
                    <form>
                        <div class="form-group">
                          <label for="exampleFormControlInput1">Input Field</label>
                          <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Enter">
                        </div>
                        <div class="form-group">
                          <label for="exampleFormControlInput1">Number</label>
                          <input type="number" class="form-control" id="exampleFormControlInput1" placeholder="0">
                        </div>
                        
                    </form>

Sizing

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

                
                    <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">

Disabled

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

                
                    <form>
                        <div class="form-group">
                          <label for="exampleFormControlInput1">Input Field</label>
                          <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Enter" disabled>
                        </div>                                                
                    </form>

Help text

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

Help text below inputs can be styled with .form-text. This class includes display: block and adds some top margin for easy spacing from the inputs above.

Password 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>

Checkboxes and Radios

Each checkbox and radio is wrapped in a <div> with a sibling <span> to create our custom control and a <label> for the accompanying text. Structurally, this is the same approach as our default .form-check.

We use the sibling selector (~) for all our <input> states—like :checked—to properly style our custom form indicator. When combined with the .custom-control-label class, we can also style the text for each item based on the <input>’s state.

We hide the default <input> with opacity and use the .custom-control-label to build a new custom form indicator in its place with ::before and ::after. Unfortunately we can’t build a custom one from just the <input> because CSS’s content doesn’t work on that element.

Checkboxes

Check this custom checkbox

                
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="customCheck1">
                        <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
                    </div>

If you’re using jQuery, something like this should suffice:

                
                    $('.your-checkbox').prop('indeterminate', true)

Radio

Toggle this custom radio

Or toggle this other custom radio

                
                  <div class="custom-control custom-radio">
                    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                    <label class="custom-control-label" for="customRadio1">Toggle this 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">Or toggle this other custom radio</label>
                  </div>

Valiation

Here’s how form validation works with Bootstrap:

HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
Due to constraints in how CSS works, we cannot (at present) apply styles to a <label> that comes before a form control in the DOM without the help of custom JavaScript.
You may provide custom validity messages with setCustomValidity in JavaScript.

First name

Last name

City

State

Zip

              
                <form class="needs-validation" novalidate>
                  <div class="form-row">
                    <div class="col-md-6 mb-3">
                        <label for="validationTooltip01">First name</label>
                        <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" required>                     
                      <div class="invalid-tooltip">
                       Please enter a valid name.
                    </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="validationTooltip02">Last name</label>
                        <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" required>                      
                      <div class="invalid-tooltip">
                        Please enter a valid name.
                      </div>
                    </div>            
                  <div class="form-row">
                    <div class="col-md-6 mb-3">
                      <label for="validationTooltip03">City</label>
                      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
                      <div class="invalid-tooltip">
                        Please provide a valid city.
                      </div>
                    </div>
                    <div class="col-md-3 mb-3">
                      <label for="validationTooltip04">State</label>
                      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
                      <div class="invalid-tooltip">
                        Please provide a valid state.
                      </div>
                    </div>
                    <div class="col-md-3 mb-3">
                      <label for="validationTooltip05">Zip</label>
                      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
                      <div class="invalid-tooltip">
                        Please provide a valid zip.
                      </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>

Search

Here’s style of the Search field

                              
                  <form>      
                      <div class="input-group">                      
                        <div class="input-group-prepend">
                          <span class="input-group-text bg-white" id="basic-addon1"> <img class="img-fluid" src="..." alt="Icon"> </span>
                        </div>
                        <input class="form-control border-left-0 pl-0" type="text" placeholder="Search">                        
                      </div>

                      <div class="input-group">                      
                      <div class="input-group-prepend">
                        <span class="input-group-text bg-white" id="basic-addon1"> <img class="img-fluid" src="..." alt="Icon"> </span>
                      </div>
                      <input class="form-control form-control-sm border-left-0 pl-0" type="text" placeholder="Search">                        
                    </div>
                  </form>

Select 2

Select2 v4 theme for Bootstrap4 (Compatible to boostrap 4.0.0+) It's requried Bootstrap Theme CSS select2-bootstrap4.min.css and select2.min.css both are required. Select2 Library is hosted on the jsDelivr and cdnjs CDNs.

              
                <div class="row">
                    <div class="col-md-6">
                      <label>Single Select2</label>
                      <select class="form-control">                    
                        <option selected disabled>-Select-</option>
                        <option>Java</option>
                        <option>Javascript</option>
                        <option>PHP</option>
                        <option>Visual Basic</option>
                      </select>                    
                    </div               
                  
                    <div class="col-md-6">
                      <label>Multiple Select2</label>
                      <select class="form-control" multiple>                    
                        <option selected disabled>-Select-</option>
                        <option>Java</option>
                        <option>Javascript</option>
                        <option>PHP</option>
                        <option>Visual Basic</option>
                      </select>                    
                    </div
                    </div

Date Picker

File Browser

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.

Upload File

Choose file

(Files supported: svg, png, jpeg. Max. file size {}mb )

              
                <label>Upload File</label>
                <div class="custom-file">
                  <input type="file" class="custom-file-input" id="customFile">
                  <label class="custom-file-label" for="customFile">Choose file</label>
                </div>
                <small class="form-text text-muted">
                (Files supported: svg, png, jpeg. Max. file size {}mb )
              </small>

Components