THE BOOTSTRAP GRID SYSTEM
The Bootstrap Grid System is the Grid System used for the creation of responsive and mobile-first layouts. It uses a series of containers, rows and 12 columns for the arrangement and alignment of contents. Written with FlexBox, it comes with tons of classes ready to be used on our web pages.
The grid system is responsive and the columns will automatically rearrange according to the screen size. Make sure the sum is 12 or less (you don’t need to use all 12 available columns).
BOOTSTRAP GRID CLASSES
The Bootstrap 5 grid system has six classes:
.col– (extra small devices – screen width less than 576px)
.col-sm- (small devices – screen width equal to or greater than 576px)
.col-md- (medium devices – screen width equal to or greater than 768px)
.col-lg- (large devices – screen width equal to or greater than 992px)
.col-xl- (xlarge devices – screen width equal to or greater than 1200px)
.col-xxl- (xxlarge devices – screen width equal to or greater than 1400px)
The above classes can be combined to create more dynamic and flexible layouts.
BASIC STRUCTURE OF THE BOOTSTRAP GRID 5
The following is a basic structure of a Bootstrap 5 grid:
<!– Control the column width, and how they should appear on different devices –>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<!– Or let Bootstrap automatically handle the layout –>
<div class=”row”>
<div class=”col”></div>
<div class=”col”></div>
<div class=”col”></div>
</div>
The first example: create a row (<div class = “row”>). Then, add the desired number of columns (tags with appropriate .col – * – * classes). The first star (*) represents: sm, md, lg, xl or xxl, while the second star represents a number, which should add up to 12 for each row. The second example: instead of adding a number to each col, let bootstrap handle the layout, to create columns of equal width: two “col” elements = 50% wide for each col, while three cols = 33.33% of width for each col. Four columns = 25% wide, etc. You can also use .col-sm | md | lg | xl | xxl to make the columns responsive.
The following example shows how to create four columns of equal width from tablet and scale to very large desktops. On cell phones or screens less than 576px wide, columns automatically stack on top of each other:
Leave A Comment