BootStrap 5 Grid System All Breakpoints

Last Updated : 01 Feb, 2023

Bootstrap 5 Grid System has been responsive on their own and also we can add the custom sm/md/lg/xl breakpoints and the respective column sizes to them. In the scenarios where the columns need to be of the same with or space capacity in all the breakpoints, then we can simply add the .col and all the columns take up the same amount of space on the respective rows. Individual columns’ width can be defined with the .col-* class where the * is replaced by a number from 1-12.

Prerequisite: Grid System in Bootstrap 5.

BootStrap5 Grid system All breakpoints Classes: No special classes are used in Grid system all breakpoints. You can customize the component using the basic classes of the Grid system.

Syntax:

<div class="row">
   <div class="col/col-[1-12]">
     <!-- Column Value --!>
   </div>
   <div class="col/col-[1-12]">
      <!-- Column Value --!>
   </div>
</div>

Example 1: The example below demonstrates the cards which takes up the same column space and stays that way in all the breakpoints:

HTML

<!doctype html>
<html lang="en">
 
<head>
    <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>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">
        Bootstrap 5 Grid system All breakpoints
    </h4>
    <div class="mt-4 p-4">
        <div class="row">
            <div class="col">
                <div class="card mb-3 bg-light">
                  <div class="card-body">
                    <p class="card-text">
                      A data structure is a storage that
                      is used to store and organize data.
                    </p>
                  </div>
                </div>
            </div>
            <div class="col">
                <div class="card mb-3 bg-light">
                  <div class="card-body">
                    <p class="card-text">
                      Therefore Algorithm refers to a sequence
                      of finite steps to solve a particular problem.
                    </p>
                  </div>
                </div>
            </div>
            <div class="col">
                <div class="card mb-3 bg-light">
                  <div class="card-body">
                    <p class="card-text">
                      C++ is a general-purpose programming language and
                      is widely used nowadays for competitive programming.
                    </p>
                  </div>
                </div>
            </div>
            <div class="col">
                <div class="card mb-3 bg-light">
                  <div class="card-body">
                    <p class="card-text">
                      Java is one of the most popular and
                      widely used programming languages.
                    </p>
                  </div>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>

Output:

BootStarp5 Grid System All breakpoints

Example 2: The example code demonstrates how you can give different width to individual column and also how even nested Grid can have same width in all breakpoints:

HTML

<!doctype html>
<html lang="en">
  <head>
    <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>
    <h1 class="text-success ms-3">GeeksforGeeks</h1>
    <h3 class="ms-3">
        BootStrap 5 Grid system All breakpoints
    </h3>
    <div class="container mt-4 text-light text-center">
        <div class="row">
            <div class="col bg-secondary border p-1">
                Column 1
            </div>
            <div class="col bg-secondary border p-1">
                Column 2
            </div>
            <div class="col-6 bg-secondary border">
                <div class="row p-1">
                    <div class="col bg-success border">
                      Nested Col 1
                    </div>
                    <div class="col bg-success border">
                      Nested Col 2
                    </div>
                    <div class="col bg-success border">
                      Nested Col 3
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>