Bootstrap Forms — A Step-by-Step Guide to Beautiful, Functional Design

4 min readAug 1, 2023

Introduction

Web development has come a long way, evolving with numerous libraries and frameworks designed to make coding easier, more efficient, and more effective. One such widely-accepted and beneficial framework is Bootstrap. It’s well-regarded for its responsive design capabilities and easy-to-use elements. Today, we will delve into the details of one of its most important elements: Bootstrap forms.

Forms are the backbone of user interaction on a website. They are the user’s portal to send data to a web server, enabling functionalities like signing up, logging in, sending feedback, etc. Bootstrap brings in a host of customizable features that make form design not only more aesthetic but also more user-friendly.

What are Bootstrap Forms?

Bootstrap forms are a combination of HTML and Bootstrap’s styling classes that enable you to create beautiful and responsive forms. The forms use standard HTML form elements, like ‘input’, ‘select’, ‘button’, and more. Bootstrap then provides additional classes to enhance these form elements.

Prerequisites

To start using Bootstrap forms, you need to include Bootstrap in your project. Include the following links in the head section of your HTML:

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

You can also download Bootstrap and host it locally in your project. Ensure that you have included the Bootstrap CSS file before you proceed.

Creating a Basic Bootstrap Form

Bootstrap forms are incredibly simple to set up. Here’s how you create a basic login form:

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <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">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Each form group includes an input field and a label. The ‘form-group’ class ensures proper spacing between each group. Notice the use of ‘form-control’ class on the input elements; it applies some universal styling to make your inputs look sleek.

Expanding Bootstrap Forms with Additional Elements

Bootstrap provides a variety of additional form elements that you can use to cater to your needs. Here’s how you can use a few:

Checkboxes and Radios

In Bootstrap, checkboxes and radios are created just like in standard HTML, but with the added Bootstrap classes for more enhanced styling:

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
        Default checkbox
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="radio" name="radioDefault" id="flexRadioDefault">
    <label class="form-check-label" for="flexRadioDefault">
        Default radio
    </label>
</div>

Select Boxes

Bootstrap applies its styles to select boxes too, creating a more consistent look across your form. The ‘form-control’ class is used here as well:

<select class="form-control">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Bootstrap Form Layouts

Bootstrap provides a way to create both horizontal and inline forms. Here’s how you can create each:

Horizontal Forms

In a horizontal form, labels are aligned alongside the input field, rather than on top. Bootstrap’s grid system can be used to create this layout:

<form>
    <div class="form-group row">
        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3">
        </div>
    </div>
</form>

Inline Forms

Inline forms display form controls in a line. To create an inline form, add the ‘form-inline’ class to the form:

<form class="form-inline">
    <div class="form-group mb-2">
        <label for="staticEmail2" class="sr-only">Email</label>
        <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
    </div>
    <div class="form-group mx-sm-3 mb-2">
        <label for="inputPassword2" class="sr-only">Password</label>
        <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Validation

Bootstrap also provides classes for applying validation states to your forms. It includes styles for valid and invalid input, as well as optional tooltips or feedback messages:

<div class="form-group">
    <label for="validationInput">Email</label>
    <input type="email" class="form-control is-invalid" id="validationInput">
    <div class="invalid-feedback">
        Please provide a valid email.
    </div>
</div>

Conclusion

Bootstrap forms are a powerful tool in web development, providing an array of customizable features that ensure form design is as seamless and efficient as possible. With this step-by-step guide, you can leverage these elements to create aesthetically pleasing and highly functional forms.

Remember, the key to effective form design is understanding the user’s needs and designing accordingly. So, keep experimenting with different Bootstrap classes and create forms that not only look great but also provide an exceptional user experience.