Open In App

BootStrap 5 Grid system Auto-layout columns

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap’s grid system is responsive. it’s come with a flexbox and allows up to 12 columns across the page. you can also group the columns together.

Auto-layout columns: To create easy column sizes without an explicit numbered class like .col-sm-6, Use breakpoint-specific column classes.

  • Equal-width: The equal-width grid system is basically used to create the grid in equal sizes. With the help of classes, we will manage the grid’s width.
  • Setting one column width: In this feature of Bootstrap5, you can set one column width and have the sibling columns automatically resize around it.
  • Variable width content: In this feature of Bootstrap5, you can set to size columns based on the natural width of their content to use col-{breakpoint}-auto classes.

Syntax:

  <div class="row">
    <div class="col">
     ...
    </div>
    <div class="col">
     ...
    </div>
  </div>

Example 1: Let’s see an example of each column width being equal on each row.

HTML




<!DOCTYPE html>
<html>
   
<head>
    <!-- Bootstrap CDN -->
    <link href=
          rel="stylesheet"
          crossorigin="anonymous">
    <script src=
            crossorigin="anonymous">
    </script>
</head>
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>Bootstrap5 Auto-layout columns</h3>
       
        <section class="container">
            <section class="row">
                <section class="col border
                    bg-danger">
                    GFG Column 1
                </section>
                <section class="col border                    
                    bg-secondary">
                    GFG Column 2
                </section>
            </section>
            <section class="row">
                <section class="col border
                    bg-info">
                    GFG Column 1
                </section>
                <section class="col border
                    bg-primary">
                    GFG Column 2
                </section>
                <section class="col border
                    bg-success">
                    GFG Column 3
                </section>
            </section>
        </section>
    </div>
</body
</html>


Output:

Auto-layout columns

Example 2: Let’s see an example of setting one column width.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Bootstrap CDN -->
    <link href=
        rel="stylesheet"
        crossorigin="anonymous">
    <script src=
            crossorigin="anonymous">
    </script>
</head>
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>Bootstrap5 Auto-layout columns</h3>
 
        <section class="container">
            <section class="row">
                <section class="col border
                    bg-danger">
                    GFG Column 1
                </section>
                <section class="col-6 border
                    bg-light">
                    GFG Column 2 (wider)
                </section>
                <section class="col border
                    bg-info">
                    GFG Column 3
                </section>
            </section>
        </section>
    </div>
</body>
</html>


Output:

Auto-layout columns

Reference: https://getbootstrap.com/docs/5.0/layout/grid/#auto-layout-columns



Last Updated : 16 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads