Bootstrap 4 Components

Forms

You can create a wide variety of forms using from control styles, layout options, and custom components in BootStrap.

Bootstrap applies display: block; and width:100%; to most form controls resulting in the vertical stacking of the form elements.

Let’s create a basic form with two input fields to input username and password and sign in button.

<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">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Now, we can add different input fields like a checkbox, radio button or a text box that only takes input as numbers, you name it, we can have it in our forms.

UserName

Email address

Password

Gender

Female

Male

<form>
    <div class="form-group">
        <label for="exampleInputPassword1">UserName</label>
        <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <fieldset class="form-group">
        <legend>Gender</legend>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked> Female
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> Male
            </label>
        </div>
    </fieldset>
    <button type="submit" class="btn btn-primary">Sign up</button>
</form>

Inline forms

Use Bootstrap’s .form-inline to render forms as inline and align them horizontally.

<form class="form-inline">
    <div class="form-group">
        <label for="exampleInputPassword1">UserName</label>
        <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">Sign up</button>
</form>

Form Layout Using the Grid

To have form elements stacked vertically at the same time the input labels be next to each other horizontally add a .row class to the .form-group and .col-*-* for each column.

In order for the label to align in the center with respect to the input element use class .col-form-label with the label.

<form>
    <div class="form-group row">
        <label for="example-text-input" class="col-2 col-form-label">Username</label>
        <div class="col-10">
            <input class="form-control" type="text" id="example-text-input">
        </div>
    </div>
    <div class="form-group row">
        <label for="example-email-input" class="col-2 col-form-label">Email</label>
        <div class="col-10">
            <input class="form-control" type="email" id="example-emial-input">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign up</button>
</form>

Hidden Labels

You can hide the label for the input types by using a .sr-only class to the label. Give a placeholder to the input types to give the user a hint of what input type is expected in an input box.

<form>
    <div class="form-group row">
        <label for="example-text-input" class="sr-only">Username</label>
        <div class="col-10">
            <input class="form-control" type="text" id="example-text-input" placeholder="Username">
        </div>
    </div>
    <div class="form-group row">
        <label for="example-email-input" class="sr-only">Email</label>
        <div class="col-10">
            <input class="form-control" type="email" id="example-email-input" placeholder="Email">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign up</button>
</form>

Disabled

Add the disabled attribute to the inputs to make it disabled.

<form>
    <div class="form-group">
        <label for="example-text-input">Username</label>
        <div>
            <input class="form-control" type="text" id="example-text-input" placeholder="Username" disabled>
        </div>
    </div>
    <div class="form-group">
        <label for="example-email-input">Email</label>
        <div>
            <input class="form-control" type="email" id="example-emial-input" placeholder="Email" disabled>
        </div>
    </div>
    <button type="submit" class="btn btn-primary" disabled>Sign up</button>
</form>

Validation

Use classes .has-success, .has-warning, .has-danger to the parent element to include validation styles for success, warning, and danger on most form controls. Contextual validation text which will adapt to the parent .has-* class can be added using the class .form-control-feedback.

Input with success

Success! You've done it.

Input with warning

Check your input and try again

Input with danger

You have not entered a valid input

<div class="form-group has-success">
    <label class="form-control-label" for="inputSuccess1">Input with success</label>
    <input type="text" class="form-control form-control-success" id="inputSuccess1">
    <div class="form-control-feedback">Success! You've done it.</div>
</div>
<div class="form-group has-warning">
    <label class="form-control-label" for="inputWarning1">Input with warning</label>
    <input type="text" class="form-control form-control-warning" id="inputWarning1">
    <div class="form-control-feedback">Check your input and try again</div>
</div>
<div class="form-group has-danger">
    <label class="form-control-label" for="inputDanger1">Input with danger</label>
    <input type="text" class="form-control form-control-danger" id="inputDanger1">
    <div class="form-control-feedback">You have not entered a valid input</div>
</div>

Help Text

Help text can be block level and inline.

If the help text is longer or you need it to be below the input, block help text can be used.

Inline help text can be included by any of the HTML inline elements like <span> or <small> or utility classes like .text-muted.