The grid system in Bootstrap 5 is quite diverse. In this lesson, we will focus on the two most common grid layouts!
The grid system in Bootstrap 5 is quite diverse. In this lesson, we will focus on the two most common grid layouts in Bootstrap 5 !
Now let's create a basic grid system, starting with stacking on smaller devices, before moving on to horizontal arrangement on larger devices.
The example below shows a two-column layout 'stacked to landscape'. This means it will split the screen in half on all screen sizes, except for screens that are too small. In that case, it will automatically stack (100%).
Basic code:
Lorem ipsum.
Sed ut perspiciatis.
For example:
Bootstrap Example Example of a Grid
This example illustrates a 50%/50% split ratio across small, medium, large, xlarge, and xxlarge devices. On ultra-small devices, it will overlap (100% width).
Adjust the size of your browser window to see the difference.
TipsMake.com. Downloadvn.
Tip: The numbers in the class .col-sm-*indicate the number of columns to merge (out of 12). Therefore, .col-sm-1merge 1 column, .col-sm-4merge 4 columns, .col-sm-6merge 6 columns…
Note: Ensure the total number of added columns is limited to a maximum of 12. You don't need to use all 12 available columns.
Tip: You can convert any full-width layout into a responsive fixed-width layout by changing the class .container-fluidto . container. For example:
Lorem ipsum.
Sed ut perspiciatis.
Automatic column layout
Bootstrap 5 has an easy way to create columns of equal width for all devices: simply remove the word count .col-size-*and use classes only on certain col.col-size elements . Bootstrap will determine the number of columns available. Each column has the same width. The class size (sm, md…) determines when the column should be responsive. Sample code:
1 of 2 2 of 2 1 of 4 2 of 4 3 of 4 4 of 4 1 of 2
For example:
Bootstrap Example Two columns : 50% width on all screens except ultra-small (100% width on screens with a width less than 576px )
1 of 2 2 of 2
Four columns : 25% width on all screens, except for extra small (100% width on screens with a width less than 576px )
1 of 4 2 of 4 3 of 4 4 of 4
Grid systems are crucial in web development. You'll have many different grid configuration options when using Bootstrap 5. The examples above are two simple grid creation examples that can be applied to any website or application. Hopefully, this article is helpful to you.