Home / Bootstrap

Building Forms with Bootstrap's Form Components and Styles

Forms are an integral part of any website or application, as they allow users to input and provide necessary information. Bootstrap, a popular front-end framework, provides a set of form components and styles that simplify the process of building effective and visually appealing forms. In this article, we will explore some of these components and demonstrate how to use them.

Basic Form Structure

Before delving into specific form components, it's important to understand the basic structure of a Bootstrap form. A typical form consists of an HTML form element containing various form controls such as input fields, checkboxes, and buttons. To get started, make sure to include the Bootstrap CSS and JS files in your project. You can either download them or use a CDN.

<!DOCTYPE html>
<html>
<head>
    <!-- Include Bootstrap CSS file -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/css/bootstrap.min.css">
</head>
<body>
    <form>
        <!-- Form controls go here -->
    </form>

    <!-- Include Bootstrap JS file -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

Form Controls

Bootstrap provides styles for a variety of form controls. Let's explore some of the commonly used components:

Text Inputs

Text inputs are used to collect single-line input from users. To create a text input, use the input element with the form-control class.

<input type="text" class="form-control" placeholder="Enter your name">

Select Dropdowns

Select dropdowns allow users to choose an option from a predefined set. Use the select element with the form-select class and option elements for each selectable option.

<select class="form-select">
    <option selected>Select a country</option>
    <option>USA</option>
    <option>Canada</option>
    <option>UK</option>
</select>

Checkboxes and Radio Buttons

Checkboxes are used when users can select multiple options, while radio buttons allow only a single selection. Use the input element with the form-check-input class, and wrap it with a label element with the form-check-label class.

<div class="form-check">
    <input type="checkbox" class="form-check-input" id="checkbox1">
    <label class="form-check-label" for="checkbox1">Option 1</label>
</div>

<div class="form-check">
    <input type="radio" class="form-check-input" id="radio1" name="radios">
    <label class="form-check-label" for="radio1">Option 1</label>
</div>

Form Buttons

Bootstrap provides styles for buttons used within forms. Use the button or input element with the btn class to create buttons with different styles.

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

Form Layouts

Bootstrap also offers various form layout options to help structure and align form components. Some commonly used layouts include:

Horizontal Form

Horizontal forms align labels and controls side-by-side, making them suitable for larger forms. Use the row class with form-label and col-* classes for labels and controls, respectively.

<form>
    <div class="row mb-3">
        <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>
    <!-- Additional form controls... -->
</form>

Inline Form

Inline forms display labels and controls in a single line, ideal for short and simple forms. Use the form-inline class along with form controls.

<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>
    <!-- Additional form controls... -->
</form>

Conclusion

Bootstrap's form components and styles make it easier to create attractive and user-friendly forms. By leveraging the provided form controls and layout options, you can effectively build and customize forms according to your application's requirements. Remember to consult Bootstrap's official documentation for more detailed information and additional form options. Happy form building!