Prev Next

BS5 Forms

Bootstrap 5 Forms provide responsive and customizable form controls, layout options, and validation tools to build interactive forms.

Key Topics

Basic Form

Create a basic form with input fields, labels, and a submit button using the .form-control and .form-label classes.

<form>
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    </div>
    <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Explanation: Use .form-control for input fields and .form-label for labels to build a simple form.

Form Layouts

Create inline or horizontal forms using layout-specific classes like .row, .col, and .form-check-inline.

<form class="row g-3">
    <div class="col-md-6">
        <label for="inputEmail4" class="form-label">Email</label>
        <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="col-md-6">
        <label for="inputPassword4" class="form-label">Password</label>
        <input type="password" class="form-control" id="inputPassword4">
    </div>
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
</form>

Explanation: Use the .row and .col classes to organize form controls in a grid layout.

Form Controls

Bootstrap includes a variety of form controls such as checkboxes, radios, selects, and file inputs.

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

<div class="mb-3">
    <label for="formFile" class="form-label">Upload File</label>
    <input class="form-control" type="file" id="formFile">
</div>

Explanation: Use .form-check for checkboxes and .form-control for file inputs and other controls.

Complete Form Example

Below is a complete example combining various form controls, layouts, and a submit button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Forms Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Form</h2>
        <form class="row g-3">
            <div class="col-md-6">
                <label for="inputEmail4" class="form-label">Email</label>
                <input type="email" class="form-control" id="inputEmail4">
            </div>
            <div class="col-md-6">
                <label for="inputPassword4" class="form-label">Password</label>
                <input type="password" class="form-control" id="inputPassword4">
            </div>
            <div class="col-12">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="gridCheck">
                    <label class="form-check-label" for="gridCheck">
                        Check me out
                    </label>
                </div>
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates a responsive form with various input types, layouts, and a submit button.

Key Takeaways

  • Use .form-control and .form-label for input fields and labels.
  • Organize forms with .row and .col for grid-based layouts.
  • Include checkboxes, file inputs, and other controls using .form-check and .form-control classes.
Prev Next