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

                                                        
<!-- Form -->
<div class="form-group">
    <input type="text" placeholder="Default" class="form-control" />
</div>
<!-- End of Form -->
<!-- Form -->
<div class="form-group">
    <div class="input-group mb-4">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
        <input class="form-control" placeholder="Icon Left" type="text">
    </div>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="form-group">
    <div class="input-group mb-4">
        <input class="form-control" placeholder="Icon Right" type="text">
        <div class="input-group-append">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
    </div>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="form-group mt-3 mt-sm-0">
    <input type="text" placeholder="Disabled" class="form-control" disabled />
</div>
<!-- End of Form -->
<!-- Form -->
<div class="form-group has-success">
    <input type="text" placeholder="Success Input" class="form-control is-valid" />
</div>
<!-- End of Form -->
<!-- Form -->
<div class="form-group has-danger mb-4">
    <input type="email" placeholder="Error Input" class="form-control is-invalid" />
</div>
<!-- End of Form -->