Bootstrap 4 - Forms

The HTML form is another typical web page component that helps take users' input and transmit it to the system's backend. Bootstrap 4 uses extended classes in conjunction with HTML markup to make different elements of forms stylish and responsive. This tutorial will teach you about the various Bootstrap 4 classes for Forms.

Form Layouts in Bootstrap 4

Bootstrap 4 form layouts help in creating an automatic global styling. All input components and elements such as <input>, <textarea>, <select>, etc are having a class .form-control that has a default width of 100%. It is of two types:

• Inline form
• Stacked form

Bootstrap 4 Inline Form

In inline form, all form elements are aligned on the same line. The .form-inline class is used in the <form> tag to create this type of form.

Example:

Example Code:

<form class="form-inline" role="form">
    <div class="form-group">
        <input class="form-control mb-2 mr-sm-2" type="text" placeholder="Name">
    </div>

    <div class="form-group">
        <input class="form-control mb-2 mr-sm-2" type="email" placeholder="Email">
    </div>

    <div class="form-check mb-2 mr-sm-2">
        <input class="form-check-input" type="checkbox" id="inlineFormCheck">
        <label class="form-check-label" for="inlineFormCheck">I agree</label>
    </div>

    <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Bootstrap 4 Stacked Form

As the name suggests, it creates a stack structure of all the form elements.

Example Code:

<form role="form">
        <div class="form-group mb-3">
                <label for="sFormInput1">Name</label>
                <input id="sFormInput1" class="form-control" type="text" placeholder="Your full name">
        </div>

        <div class="form-group mb-3">
                <label for="sFormInput2">Email</label>
                <input id="sFormInput2" class="form-control mb-2" type="email" placeholder="Your email address">
        </div>

        <div class="form-group mb-3">
                <label for="sFormInput3">Example select</label>
                <select  id="sFormInput3" class="form-control">
                        <option value="">Please select</option>
                        <option value="1">Select option 1</option>
                        <option value="2">Select option 2</option>
                        <option value="3">Select option 3</option>
                        <option value="4">Select option 4</option>
                        <option value="5">Select option 5</option>
                </select>
        </div>

        <div class="form-group mb-3">
                <label for="sFormInput4">Example textarea</label>
                <textarea id="sFormInput4" class="form-control" rows="3"></textarea>
        </div>

        <div class="form-group">
                <label for="sFormInput5">Example file input</label>
                <input id="sFormInput5" type="file" class="form-control-file">
        </div>

        <div class="form-check mb-3">
                <input id="sFormInput6" class="form-check-input" type="checkbox">
                <label for="sFormInput6" class="form-check-label">I agree</label>
        </div>

        <button class="btn btn-primary" type="submit"> Submit </button>
</form>

The Different States of Form Control

In addition to inputting values into forms with the focus state, Bootstrap provides some additional styling features for different form validation states.

• Input Focus: Bootstrap includes a particular style for inputting data into fields. A box shadow style is applied whenever an input has focus.
• Disabled Inputs: All the input boxes can be disabled within <fieldset> at once by using the disabled attribute on it, which will make the field gray and dim.
• Disabled Fieldsets: Using the disabled attribute in <fieldset> will disable all controls under it, making the field gray and dimmed.
• Validation States: Bootstrap 4 provides various ways to style input controls to implement other validation states. Some predefined CSS can be included in a form to show success, warning, and error messages.

Example:

<form class="form-horizontal" role="form">
    <div class="form-group mb-3">
        <label for="simpleInput">An active input</label>
        <input id="simpleInput" class="form-control" type="text" value="The focused is used">
    </div>

    <div class="form-group mb-3">
        <label for="disabledInput">Disabled input</label>
        <input id="disabledInput" class="form-control" disabled="disabled" type="text" placeholder="Input Disabled">
    </div>
        
    <fieldset disabled="disabled">
        <legend>Disabled fieldset example</legend>
        <div class="form-group mb-3">
            <label class="control-label" for="disabledTextInput">Fieldset disabled</label>
            <input id="disabledTextInput" class="form-control" type="text" placeholder="Disabled input">
        </div>
                
        <div class="form-group mb-3">
            <label class="control-label" for="disabledSelect">Disabled select menu (Fieldset disabled)</label>
            <select id="disabledSelect" class="form-control">
                <option>Disabled Selection</option>
            </select>
        </div>
    </fieldset>
</form>

Form Control Sizing

The size of form inputs can be managed using classes such as .form-control-sm and .form-control-lg.

Example:

<div class="form-group mb-3">
    <input type="text" class="form-control form-control-lg" placeholder="Large size input">
</div>

<div class="form-group mb-3">
    <input type="text" class="form-control" placeholder="Default size input">
</div>

<div class="form-group mb-3">
    <input type="text" class="form-control form-control-sm" type="text" placeholder="Small size input">
</div>