Bootstrap 5 Layout Form Grid

Bootstrap 5 Layout Form Grid is used to create a complex form using grid classes. The form grid layout required multiple columns of different widths and alignments. To create a form grid, we use .row and .col classes.

Form Grid Layout used Classes:

.row: This class is used to create a row of a form layout.
.col: This class is used to create columns of a form grid.
.col-*: This class is used to create different sizes of columns of a form grid.

Syntax:

<div class="row">
      <div class="col">
        <input type="*" class="form-control" 
            ...>
      </div>
      ...
</div>

Example 1: In this example, we will create a form grid layout using .row and .col classes.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 5 Layout Form grid</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h2>Bootstrap 5 Layout Form Grid</h2>

        <div class="row">
            <div class="col">
                <input type="text" class="form-control"
                    placeholder="First Name">
            </div>
            <div class="col">
                <input type="text" class="form-control"
                    placeholder="Last Name">
            </div>
            <div class="col">
                <input type="email" class="form-control"
                    placeholder="Email Id">
            </div>
        </div>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will create different sizes of a form grid layout using .row and .col-* classes.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 5 Layout Form grid</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h2>Bootstrap 5 Layout Form Grid</h2>

        <div class="row">
            <div class="col-5">
                <input type="text" class="form-control"
                    placeholder="Name">
            </div>
            <div class="col-4">
                <input type="email" class="form-control"
                    placeholder="Email Id">
            </div>
            <div class="col-3">
                <input type="number" class="form-control"
                    placeholder="Mobile">
            </div>
        </div>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/forms/layout/#form-grid

Bootstrap 5 Layout Form Grid

Explore