The Bootstrap Grid System is one of the core features of Bootstrap, which enables you to create responsive, flexible layouts using rows and columns. It divides the page into a grid of up to 12 columns, allowing you to design complex layouts that adapt to various screen sizes.

Key Concepts of Bootstrap Grid System

1. Container

   • Containers are the building blocks of Bootstrap’s grid system. Every grid layout must be wrapped inside a container, which provides a responsive fixed-width or fluid-width container for your content.
   • Two types of containers:
     • .container: A fixed-width container that adapts based on the screen size.
     • .container-fluid: A full-width container that spans the entire width of the viewport.

   <div class="container">
       <!-- Content goes here -->
   </div>
   

2. Rows

   • Rows are horizontal groups of columns and must be placed inside a container. Each row is divided into 12 columns by default.
   • The class .row is used to create a row.

   <div class="row">
       <!-- Columns go here -->
   </div>
   

3. Columns

   • Columns are where your content is placed. They must be placed inside a row and use classes like .col-md-4 to define how many columns an element should occupy.
   • Bootstrap's grid system uses flexbox under the hood, so columns are flexible and adaptive to different screen sizes.

   <div class="row">
       <div class="col-md-6">Column 1</div>
       <div class="col-md-6">Column 2</div>
   </div>
   

4. 12-Column Grid

   • Bootstrap divides each row into 12 equal columns. You can combine columns to create custom layouts.
   • Example: If you want a layout with two columns of equal width, you can assign 6 columns to each (col-md-6 + col-md-6 = 12).

   <div class="row">
       <div class="col-md-6">Column 1 (6 of 12 columns)</div>
       <div class="col-md-6">Column 2 (6 of 12 columns)</div>
   </div>
   

   You can also have columns of different widths. For example:

   <div class="row">
       <div class="col-md-8">Column 1 (8 of 12 columns)</div>
       <div class="col-md-4">Column 2 (4 of 12 columns)</div>
   </div>
   

5. Responsive Breakpoints

   • Bootstrap’s grid system includes responsive classes to adjust the layout based on screen size:
     • .col- for extra small devices (less than 576px)
     • .col-sm- for small devices (≥576px)
     • .col-md- for medium devices (≥768px)
     • .col-lg- for large devices (≥992px)
     • .col-xl- for extra-large devices (≥1200px)
     • .col-xxl- for very large devices (≥1400px)

   Example of responsive columns:

   <div class="row">
       <div class="col-12 col-sm-6 col-md-4">Responsive Column 1</div>
       <div class="col-12 col-sm-6 col-md-8">Responsive Column 2</div>
   </div>
   

   • On extra-small devices, both columns will take full width (col-12).
   • On small devices, each will take 6 columns (col-sm-6).
   • On medium devices, the first column takes 4 columns and the second takes 8 (col-md-4, col-md-8).

6. Equal-Width Columns

   • If you want columns to take equal space regardless of the screen size, you can use the .col class without specifying a size:

   <div class="row">
       <div class="col">Equal Column 1</div>
       <div class="col">Equal Column 2</div>
       <div class="col">Equal Column 3</div>
   </div>
   

7. Offsetting Columns

   • You can use column offsets to move a column to the right within a row using .offset-* classes. For example, .offset-md-2 shifts a column 2 columns to the right.

   <div class="row">
       <div class="col-md-4 offset-md-2">Offset Column</div>
       <div class="col-md-4">Regular Column</div>
   </div>
   

8. Nesting Columns

   • You can nest rows inside columns to create complex layouts. A nested row should always be placed inside a column.

   <div class="row">
       <div class="col-md-6">
           <div class="row">
               <div class="col-md-6">Nested Column 1</div>
               <div class="col-md-6">Nested Column 2</div>
           </div>
       </div>
       <div class="col-md-6">Column 2</div>
   </div>
   

Example of a Responsive Layout Using Bootstrap Grid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid Example</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- Full-width on small screens, 4-columns wide on medium, 6-columns on large -->
            <div class="col-12 col-md-4 col-lg-6">
                <p>Column 1</p>
            </div>
            <!-- Full-width on small screens, 8-columns wide on medium, 6-columns on large -->
            <div class="col-12 col-md-8 col-lg-6">
                <p>Column 2</p>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS and Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

In this example:

• On extra-small devices (under 576px), both columns are full width (col-12).
• On medium devices (≥768px), the first column takes 4/12 space and the second takes 8/12 (col-md-4 and col-md-8).
• On large devices (≥992px), both columns take half the screen width (col-lg-6).