Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap
html
communitycreator

What are Bootstrap 4 grid basics?

Akande Olalekan Toheeb

The Bootstrap 4 grid system comes in handy when you want to build a responsive website. The Bootstrap 4 grid system is built with flexbox and allows up to 12 columns across the page. The 12 columns can be grouped to create wider columns if you do not wish to use the 12 columns individually.

The columns re-arrange automatically, depending on the screen size. Bootstrap 4 grid is a responsive system that is an easy tool to use to create responsive layouts.

Classes

The Bootstrap 4 grid system has five classes to make our work easier.

The classes are categorized based on the preferable screen size of the devices to be used on. The classes are as follows:

  1. .col- (extra small devices - screen width of less than 576px).

  2. .col-sm- (small devices - screen width equal to or greater than 576px).

  3. .col-md- (medium width - screen width equal to or greater than 768px).

  4. .col-lg- (large devices -screen width equal to or greater than 992px).

  5. .col-xl- (extra-large devices - screen width equal to or greater than 1200px).

These classes can be combined to create more dynamic and flexible layouts.

Create a basic Bootstrap 4 grid

There are two methods to create a basic grid:

  • The first is to let Bootstrap automatically handle the layout.

  • The second is to control the column width and how they should appear on different devices.

Here are the steps to create a basic grid:

  1. Create a row by creating a div element that contains class="row".

  2. Create another div with any of the grid classes (sm, md, lg, xl).

The first part after the col represents the responsiveness (sm, md, lg or xl), while the second part represents a number, which should add up to 12 for each row.(check code content)

Tips

  1. Do not add a number to each .col if you want Bootstrap to handle the layout automatically. So, to create two equal columns, only add two “col” elements. The number of “col” elements is equal to the number of columns you desire.

  2. Use any of the grid classes (.col-sm| md| lg| xl) to make the columns responsive.

  3. To create unequal columns, add a desired number of columns (you want to add up) to each “col” element.

Code

Check out the examples below.

Notice the space each column occupies to see the effect.

RELATED TAGS

bootstrap
html
communitycreator

CONTRIBUTOR

Akande Olalekan Toheeb
RELATED COURSES

View all Courses

Keep Exploring