Forms

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

Bootstrap 4 documentation
Overview

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.

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

For more information, see Bootstrap Forms

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 mb-3">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox">
            <span class="form-check-sign"></span>
            Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
Form Controls

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

Be sure to explore our custom forms to further style <select>.

                                                        
<form>
    <div class="form-group">
        <label for="exampleFormControlInput1">Email address</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
    </div>
    <div class="form-group">
        <label for="exampleFormControlSelect1">Example select</label>
        <select class="custom-select" id="exampleFormControlSelect1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleFormControlSelect2">Example multiple select</label>
        <select multiple class="custom-select" id="exampleFormControlSelect2">
        <option>Bootstrap</option>
        <option>VueJs</option>
        <option>Angular</option>
        <option>React</option>
        <option>NodeJs</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleFormControlTextarea2">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea2" rows="3"></textarea>
    </div>
</form>

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

Or you can use this:

Sizing

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

                                                        
<input class="form-control form-control-lg mb-3" type="text" placeholder=".form-control-lg">
<input class="form-control mb-3" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
Checkboxes and radios

Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Disabled checkboxes and radios are supported. The disabled attribute will apply a lighter color to help indicate the input’s state.

Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our <input> and <label> are sibling elements as opposed to an <input> within a <label>. This is slightly more verbose as you must specify id and for attributes to relate the <input> and <label>.

Square
                                                        
<!-- Checkbox -->
<div class="form-check mb-3">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox">
        <span class="form-check-sign"></span>
        Unchecked
    </label>
</div>
<!-- End of Checkbox -->
<!-- Checkbox -->
<div class="form-check">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" checked>
        <span class="form-check-sign"></span>
        Checked
    </label>
</div>
<!-- End of Checkbox -->
<!-- Checkbox -->
<div class="form-check disabled">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" disabled>
        <span class="form-check-sign"></span>
        Disabled Unchecked
    </label>
</div>
<!-- End of Checkbox -->
<!-- Checkbox -->
<div class="form-check disabled">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" checked disabled>
        <span class="form-check-sign"></span>
        Disabled Checked
    </label>
</div>
<!-- End of Checkbox -->
Round
                                                        
<!-- Checkbox -->
<div class="form-check round-check mb-3">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox">
        <span class="form-check-sign"></span>
        Unchecked
    </label>
</div>
<!-- End of Checkbox -->
<!-- Checkbox -->
<div class="form-check round-check">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" checked>
        <span class="form-check-sign"></span>
        Checked
    </label>
</div>
<!-- End of Checkbox -->
<!-- Checkbox -->
<div class="form-check round-check disabled">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" disabled>
        <span class="form-check-sign"></span>
        Disabled Unchecked
    </label>
</div>
<!-- End of Checkbox -->
<!-- Checkbox -->
<div class="form-check round-check disabled">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" checked disabled>
        <span class="form-check-sign"></span>
        Disabled Checked
    </label>
</div>
<!-- End of Checkbox -->
Radio
                                                        
<!-- Radio -->
<div class="form-check form-check-radio">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
        <span class="form-check-sign"></span>
        Radio is off
    </label>
</div>
<!-- End of Radio -->
<!-- Radio -->
<div class="form-check form-check-radio">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked>
        <span class="form-check-sign"></span>
        Radio is on
    </label>
</div>
<!-- End of Radio -->
<!-- Radio -->
<div class="form-check form-check-radio disabled">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios3" value="option3" disabled>
        <span class="form-check-sign"></span>
        Disabled radio is off
    </label>
</div>
<!-- End of Radio -->
<!-- Radio -->
<div class="form-check form-check-radio disabled">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios4" value="option4" disabled checked>
        <span class="form-check-sign"></span>
        Disabled radio is on
    </label>
</div>
<!-- End of Radio -->
Switch

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. custom-switch 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">Unchecked</label>
</div>
<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" checked id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Checked</label>
</div>
<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" disabled id="customSwitch3">
    <label class="custom-control-label" for="customSwitch3">Disabled switch element</label>
</div>
Range Sliders

noUiSlider is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works great in responsive designs. Have you tried this documentation on your phone?

For more detailed information and examples, see the official documentation: noUiSlider doccumentation.

Copy-paste the following <script> near the end of your pages to enable it.

                                        
<script src="../../vendor/nouislider/js/nouislider.min.js"></script>
                                        
                                    
                                                        
<!-- Simple slider -->
<div class="input-slider-container">
    <div id="input-slider" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
    <!-- Input slider values -->
    <div class="row mt-3 d-none">
        <div class="col-6">
            <span id="input-slider-value" class="range-slider-value" data-range-value-low="200"></span>
        </div>
    </div>
</div>
<!-- End of Slider -->
<!-- Range slider  -->
<div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div>
<!-- Range slider values -->
<div class="row d-none">
    <div class="col-6">
        <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low"></span>
    </div>
    <div class="col-6 text-right">
        <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high"></span>
    </div>
</div>
<!-- End of range slider values -->
<!-- Range slider  -->
<div id="input-slider-range-2" data-range-value-min="100" data-range-value-max="500"></div>
<!-- Range slider values -->
<div class="row d-none">
    <div class="col-6">
        <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-2"></span>
    </div>
    <div class="col-6 text-right">
        <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-2"></span>
    </div>
</div>
<!-- End of range slider values -->
<!-- Vertical Range -->
<div id="input-slider-vertical-1" data-range-value-min="100" data-range-value-max="500"></div>
<!-- Range slider values -->
<div class="row d-none">
    <div class="col-6">
        <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-3"></span>
    </div>
    <div class="col-6 text-right">
        <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-3"></span>
    </div>
</div>
<!-- End of range slider values -->
<!-- Vertical Range -->
<div id="input-slider-vertical-2" data-range-value-min="100" data-range-value-max="500"></div>
<!-- Range slider values -->
<div class="row d-none">
    <div class="col-6">
        <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-4"></span>
    </div>
    <div class="col-6 text-right">
        <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-4"></span>
    </div>
</div>
<!-- End of range slider values -->

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

                                                        
<form>
<div class="form-row">
    <div class="form-group col-md-6">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-at"></i></span>
            </div>
            <input class="form-control" placeholder="Email" type="email">
        </div>
    </div>
    <div class="form-group col-md-6">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-unlock-alt"></i></span>
            </div>
            <input class="form-control" placeholder="Password" type="password">
        </div>
    </div>
</div>
<div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Timisoara St">
</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">
        <label for="exampleFormControlSelect1">State</label>
        <select class="custom-select" id="exampleFormControlSelect1">
            <option selected>Choose...</option>
            <option>Example 1</option>
            <option>Example 2</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-check mb-3">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox">
        <span class="form-check-sign"></span>
        Rememeber me
    </label>
</div>
<button type="submit" class="btn btn-secondary">Sign in</button>
</form>