Bootstrap Grid System

1. Introduction

Bootstrap grid system allows up to 12 columns across the page. We can either use all of the 12 columns individually or we can group into desired number of columns as per our requirement.

Bootstrap Grid System

So if we want 2 equal columns to be created, we can group 12 columns in two, having 6 columns each, as –

Similarly, if we want 3 equal columns to be created, we can group 12 columns in three, having 4 columns each, as –


2. Types of Bootstrap Grid System

There are four classes in Bootstrap Grid System:

  1. xs (for phones)
  2. sm (for tablets)
  3. md (for desktops)
  4. lg (for larger desktops)

We can combine the above classes to create more dynamic and flexible layouts.

3. Demonstration

Receive our updates to your inbox

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.