Bootstrap 5 Grid Small

Last Updated : 30 Apr, 2024

Bootstrap grid system facilitates responsive design by dividing screens into 12 equally sized columns. On smaller screens, use classes like ‘col-sm’ to define column widths. Easily arrange rows and columns within a row based on screen size, ensuring optimal display on smaller devices.

We can also specify the variable width of each element by mentioning the number along with the class, for example, .container-sm-4. If the screen size is less than 576 px, then the element takes up 100% width of the screen.

Breakpoint	Description	Size (px)
xs	extra small	<576
sm	small	≥ 576
md	medium	≥ 768
lg	large	≥ 992
xl	extra large	≥ 1200
xxl	extra extra large	≥ 1400

Syntax:

<tag_name  class="class-sm">Content of the element </tag_name>

Grid Small with Equal Size

Bootstrap grid system facilitates equal-size columns for small screens using ‘col-sm’ classes. Implementing these classes ensures uniform column distribution and optimal layout consistency on smaller devices.

Example: This code is a basic HTML document that uses Bootstrap 5 to create a responsive grid layout with equal-width columns. The grid consists of three rows, each containing four columns

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Grid Small</title>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
            integrity=
"sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" 
            crossorigin="anonymous">
        </script>
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
          integrity=
"sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98=" 
          crossorigin="anonymous">
    <style>
        [class*="col"],
        h2,
        p {
            padding: 1rem;
            background-color: green;
            border: 2px dashed #f3f3f3;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="container text-center ">
        <h2>Welcome to GeeksforGeeks</h2>
        <p>Equal width </p>
        <div class="row">
            <div class="col-sm">HTML</div>
            <div class="col-sm">HTML</div>
            <div class="col-sm">HTML</div>
            <div class="col-sm">HTML</div>
        </div>
        <div class="row">
            <div class="col-sm">CSS</div>
            <div class="col-sm">CSS</div>
            <div class="col-sm">CSS</div>
            <div class="col-sm">CSS</div>
        </div>
        <div class="row">
            <div class="col-sm">JavaScript</div>
            <div class="col-sm">JavaScript</div>
            <div class="col-sm">JavaScript</div>
            <div class="col-sm">JavaScript</div>
        </div>
    </div>
</body>

</html>

Output:

Bootstrap 5 Grid Small Example Output

Auto Layout Column

Bootstrap auto-layout columns adjust their width based on content and available space. Use ‘col’ class without specifying a specific size to let columns automatically adjust and fill available space.

Example: Illustration of Auto Layout column using Boostrap

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>

    <div class="container-fluid mt-3">
        <h1>Responsive Auto Layout Columns</h1>
        <p>
        In Bootstrap 5, you can easily create equal 
        width columns by using the <code>.col-sm</code> 
        class on a specified number of col elements. 
        Bootstrap will automatically adjust the width 
        of each column based on the
        number of columns specified.
        </p>
        <p>
        On extra small screens (<strong>less than 576px</strong>), 
        the columns will stack horizontally.
        </p>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm bg-success text-white">
                    1 of 2
                </div>
                <div class="col-sm bg-info text-white">
                    2 of 2
                </div>
            </div>
        </div>
        <br>

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm bg-primary text-white">
                    1 of 4
                </div>
                <div class="col-sm bg-secondary text-white">
                    2 of 4
                </div>
                <div class="col-sm bg-danger text-white">
                    3 of 4
                </div>
                <div class="col-sm bg-warning text-white">
                    4 of 4
                </div>
            </div>
        </div>
        <br>

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm bg-dark text-white">
                    1 of 3
                </div>
                <div class="col-sm bg-light text-dark">
                    2 of 3
                </div>
                <div class="col-sm bg-dark text-white">
                    3 of 3
                </div>
            </div>
        </div>
        <br>

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm bg-primary text-white">
                    1 of 6
                </div>
                <div class="col-sm bg-secondary text-white">
                    2 of 6
                </div>
                <div class="col-sm bg-danger text-white">
                    3 of 6
                </div>
                <div class="col-sm bg-warning text-white">
                    4 of 6
                </div>
                <div class="col-sm bg-success text-white">
                    5 of 6
                </div>
                <div class="col-sm bg-info text-white">
                    6 of 6
                </div>
            </div>
        </div>
    </div>

</body>

</html>

Output:

Bootstrap 5 Grid Small Example Output

Explanation:

The provided HTML code demonstrates the use of Bootstrap 5’s grid system to create responsive layouts with equal-width columns. The .col-sm class is used to specify the number of columns on small screens (≥576px), and the columns automatically adjust their width based on the screen size. The columns stack horizontally on extra small screens (less than 576px).