What is Bootstrap 4 Grid System?

What is Bootstrap 4 Grid System?

Bootstrap grid system is firmly used for the columns which is reliable for screen size. You can look for a better content that is well organized in three columns, but if you see on a small screen it would require better content items that were stacked on top of each other.

Bootstrap 4 Grid System Classes:

  • Xs for Phone
  • Sm for Tablets
  • Md for Desktop
  • lg for larger Desktop

This Class is normally used to combine the flexible layouts. Each Classes setup as width Xs and SM.

Bootstrap Grid System Rules:
1)
Row must be placed with a “container” (fixed-width) for properly use as alignment and   padding.
  2) Create a specific row for horizontal group columns.
  3) Content should be placed within the children of rows and columns.
4) Redefine the class like “.row” and “col-sm” with making grid layouts.
5) Columns create gaps between column content via padding. That padding is offset in rows for the first and last column via negative margin on row.

6.) Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three columns 4.

Basic Structure of Bootstrap

This is an Example of Basic Structure of Bootstrap

<div class=”container”>
<div class=”row”>
<div class=”col-*-*”></div>
</div>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<div class=”row”>

</div>
</div>

Conclusion:

Bootstraps Grid system consist of 4 utilizes with 12 columns that can help to create any kind of website layout for depending on design. Modern websites use Bootstrap to create beautiful responsive websites at ease.

After the release of Bootstrap Alpha 4, there is several things that make it more powerful as it enhance it support to different mobile viewports.

Share this post

Leave a comment

Your email address will not be published.