bootstrap css grid

The Bootstrap CSS Grid

Hello there guys in this post we are going to look at the bootstrap CSS grid. Bootstrap CSS grid has been introduced in bootstrap version 5.1 and onwards.

How to enable it…

Step 1

Download bootstrap 5.1 source code files. These files come with sass. Once it is done. open a text editor and create an index.html file.

Step 2

In your text editor, you need the scss so from there create a

main.scss

and then import

@import'./bootstrap.scss';
bootstrap.scss from the scss folder files into main.scss then copy and paste the following code
$enable-grid-classes: false;
$enable-cssgrid: true;

What this code does is disables the default grid system by setting $enable-grid-classes: false and enabling the CSS Grid by setting $enable-cssgrid: true. Then, recompile your Sass.

You can use an extension in vs code like Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile, to recompile your sass.

So far you should have something like this…

bootstrap css gridbootstrap css grid

Once you recompile your sass the default bootstrap grid system the one with rows and columns will be changed to the CSS grid. Now you are working with bootstrap CSS Grid :).

Three columns Layout

You can have three equal columns across all viewports and devices like this…

<div class="grid">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

 

bootstrap css grid

Same case if you had cards…

bootstrap css grid

Responsive Layouts

You can use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports and then grow to three columns on medium viewports and above.

<div class="grid">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

bootstrap css grid

or…

bootstrap css grid

bootstrap css grid

You can try with other viewports and see what you will come up with.

Using Starts

Start classes have been used in bootstrap normal grid systems as offset classes. Using CSS grid you can use start classes like this if you are familiar with using them.

<div class="grid">
     <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
     <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

bootstrap css grid

or using the cards you can have

bootstrap css grid

Auto columns

When there are no classes on the grid items (the immediate children of a .grid), each grid item will automatically be sized to one column.

Ex:

<div class="grid">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

bootstrap css grid

Nesting

CSS Grid allows for easy nesting of .grids. However, unlike the default, this grid inherits changes in the rows, columns, and gaps.

Ex:

<div class="container">
    <div class="grid pt-5" style="--bs-columns: 3;">
      <div>
        First auto-column
        <div class="grid">
          <div class="col">Auto-column</div>
          <div class="col">Auto-column</div>
        </div>
      </div>
      <div>
        Second auto-column
        <div class="grid" style="--bs-columns: 12;">
          <div class="col g-col-6">6 of 12</div>
          <div class="col g-col-4">4 of 12</div>
          <div class="col g-col-2">2 of 12</div>
        </div>
      </div>
      <div>Third auto-column</div>
    </div>


 

bootstrap css grid

close

Sign up for free tutorials in your inbox.

We don’t spam! Read our privacy policy for more info.

Leave a Comment

Your email address will not be published.