Bootstrap 4 Grid Example

Posted onby admin

Below we have collected some examples of Bootstrap 4 grid layouts.

Three Equal Columns

Here's an example of a Bootstrap grid: Run. Stack editor Unstack editor. Editor Preview The numbers at the end of each class name represent the number of columns that the column spans. So.col-sm-1 spans one column and.col-sm-8 spans eight. The sm means that the colspan applies to small devices and everything above. Bootstrap grid examples. Basic grid layouts to get you familiar with building within the Bootstrap grid system. Five grid tiers. There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden. For example, three equal columns would use three.col-sm-4; Column widths are in percentage, so they are always fluid and sized relative to their parent element; The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a.

Use the .col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.

Nested Bootstrap 4 Grid Columns System. You can also place grid columns inside other grid columns in Bootstrap 4. This requires again a grid columns inside the.row class to create nested columns. The nested column should also be a 12 grid column to place in a row as given below. Mixed: mobile and desktop The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

col

Example

<div>
<div>col</div>
<div>col</div>
<div>col</div>
</div>
Try it Yourself »

Three Equal Columns Using Numbers

You can also use numbers to control the column width. Just make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns):

col-4

Example

Bootstrap 4 Masonry Grid Example

<div>
<div>col-4</div>
<div>col-4</div>
<div>col-4</div>
</div>
Try it Yourself »

Three Unequal columns

To create unequal columns, you have to use numbers. The following example will create a 25%/50%/25% split:

col-6

Example

<div>
<div>col-3</div>
<div>col-6</div>
<div>col-3</div>
</div>
Try it Yourself »

Setting One Column Width

However, it is enough to only set the width of one column, and have the sibling columns automatically resize around it. The following example will create a 25%/50%/25% split:

col-6

Example

<div>
<div>col-3</div>
<div>col-6</div>
<div>col-3</div>
</div>
Try it Yourself »

More Equal Columns

2 of 2
2 of 4
4 of 4
2 of 6
4 of 6
6 of 6

Example

<!-- Two equal columns -->
<div>
<div>1 of 2</div>
<div>2 of 2</div>
</div>
<!-- Four equal columns -->
<div>
<div>1 of 4</div>
<div>2 of 4</div>
<div>3 of 4</div>
<div>4 of 4</div>
</div>
<!-- Six equal columns -->
<div>
<div>1 of 6</div>
<div>2 of 6</div>
<div>3 of 6</div>
<div>4 of 6</div>
<div>5 of 6</div>
<div>6 of 6</div>
</div>
Try it Yourself »

More Unequal Columns

2 of 2
2 of 4
4 of 4
2 of 4
4 of 4

Example

<!-- Two Unequal Columns -->
<div>
<div>1 of 2</div>
<div>2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div>
<div>1 of 4</div>
<div>2 of 4</div>
<div>3 of 4</div>
<div>4 of 4</div>
</div>
<!-- Setting two column widths -->
<div>
<div>1 of 4</div>
<div>2 of 4</div>
<div>3 of 4</div>
<div>4 of 4</div>
</div>
Try it Yourself »

Equal Height

If one of the column is taller than the other (due to text or CSS height), the rest will follow:

Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.
col

Example

<div>
<div>Lorem ipsum...</div>
<div>col</div>
<div>col</div>
</div>
Try it Yourself »

Nested Columns

col-8
col-6

The following example shows how to create a two column layout, with another two columns inside one of the columns:

Example

<div>
<div>
.col-8
<div>
<div>.col-6</div>
<div>.col-6</div>
</div>
</div>
<div>.col-4</div>
</div>
Try it Yourself »

Responsive Classes

The Bootstrap 4 grid system has five 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)

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

Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.

Stacked to Horizontal

col-sm-3
col-sm

The following example shows how to create a column layout that starts out stacked on extra small devices, before becoming horizontal on larger devices (sm, md, lg and xl):

Example

<div>
<div>col-sm-9</div>
<div>col-sm-3</div>
</div>
<div>
<div>col-sm</div>
<div>col-sm</div>
<div>col-sm</div>
</div>
Try it Yourself »

Mix and Match

col-6 col-sm-3
col-5 col-lg-4
col-sm-9 col-md-6 col-lg-8

Example

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div>
<div>col-6 col-sm-9</div>
<div>col-6 col-sm-3</div>
</div>
<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div>
<div>col-7 col-lg-8</div>
<div>col-5 col-lg-4</div>
</div>
<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div>
<div>col-sm-3 col-md-6 col-lg-4</div>
<div>col-sm-9 col-md-6 col-lg-8</div>
</div>
Try it Yourself »Bootstrap 4 example page

No Gutters

Add the .no-gutters class to the .row container to remove gutters (extra space):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Example

Try it Yourself »

Below we have collected some examples of Bootstrap 4 grid layouts.

Three Equal Columns

Use the .col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.

col

Example

<div>
<div>col</div>
<div>col</div>
<div>col</div>
</div>
Try it Yourself »

Three Equal Columns Using Numbers

You can also use numbers to control the column width. Just make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns):

col-4

Example

<div>
<div>col-4</div>
<div>col-4</div>
<div>col-4</div>
</div>
Try it Yourself »Bootstrap 4 grid example

Three Unequal columns

To create unequal columns, you have to use numbers. The following example will create a 25%/50%/25% split:

col-6

Example

<div>
<div>col-3</div>
<div>col-6</div>
<div>col-3</div>
</div>
Try it Yourself »

Setting One Column Width

However, it is enough to only set the width of one column, and have the sibling columns automatically resize around it. The following example will create a 25%/50%/25% split:

col-6

Example

<div>
<div>col</div>
<div>col-6</div>
<div>col</div>
</div>
Try it Yourself »

More Equal Columns

2 of 2
2 of 4
4 of 4
2 of 6
4 of 6
6 of 6

Example

<!-- Two equal columns -->
<div>
<div>1 of 2</div>
<div>2 of 2</div>
</div>
<!-- Four equal columns -->
<div>
<div>1 of 4</div>
<div>2 of 4</div>
<div>3 of 4</div>
<div>4 of 4</div>
</div>
<!-- Six equal columns -->
<div>
<div>1 of 6</div>
<div>2 of 6</div>
<div>3 of 6</div>
<div>4 of 6</div>
<div>5 of 6</div>
<div>6 of 6</div>
</div>
Try it Yourself »

Row Cols

You can also control how many columns that should appear next to each other (regardless of how many cols), with the .row-cols-* classes:

2 of 2
2 of 4
4 of 4

Bootstrap 4 Grid Example

2 of 6
4 of 6
6 of 6

Example

<div>
<div>1 of 2</div>
<div>2 of 2</div>
</div>
<div>
<div>1 of 4</div>
<div>2 of 4</div>
<div>3 of 4</div>
<div>4 of 4</div>
</div>
<div>
<div>1 of 6</div>
<div>2 of 6</div>
<div>3 of 6</div>
<div>4 of 6</div>
<div>5 of 6</div>
<div>6 of 6</div>
</div>
Bootstrap 4 Grid ExampleTry it Yourself »

More Unequal Columns

2 of 2
2 of 4
4 of 4
2 of 4
4 of 4
Grid

Example

<!-- Two Unequal Columns -->
<div>
<div>1 of 2</div>
<div>2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div>
<div>1 of 4</div>
<div>2 of 4</div>
<div>3 of 4</div>
<div>4 of 4</div>
</div>
<!-- Setting two column widths -->
<div>
<div>1 of 4</div>
<div>2 of 4</div>
<div>3 of 4</div>
<div>4 of 4</div>
</div>
Try it Yourself »

Equal Height

If one of the column is taller than the other (due to text or CSS height), the rest will follow:

Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.
col

Example

<div>
<div>Lorem ipsum...</div>
<div>col</div>
<div>col</div>
</div>
Try it Yourself »

Nested Columns

col-8
col-6

The following example shows how to create a two column layout, with another two columns inside one of the columns:

Example

<div>
<div>
.col-8
<div>
<div>.col-6</div>
<div>.col-6</div>
</div>
</div>
<div>.col-4</div>
</div>
Try it Yourself »

Responsive Classes

The Bootstrap 4 grid system has five 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)

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

Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.

Stacked to Horizontal

col-sm-3
col-sm

The following example shows how to create a column layout that starts out stacked on extra small devices, before becoming horizontal on larger devices (sm, md, lg and xl):

Example

<div>
<div>col-sm-9</div>
<div>col-sm-3</div>
</div>
<div>
<div>col-sm</div>
<div>col-sm</div>
<div>col-sm</div>
</div>

Bootstrap 4 Grid Layout

Try it Yourself »

Mix and Match

col-6 col-sm-3
col-5 col-lg-4
col-sm-9 col-md-6 col-lg-8

Example

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div>
<div>col-6 col-sm-9</div>
<div>col-6 col-sm-3</div>
</div>
<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div>
<div>col-7 col-lg-8</div>
<div>col-5 col-lg-4</div>
</div>
<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div>
<div>col-sm-3 col-md-6 col-lg-4</div>
<div>col-sm-9 col-md-6 col-lg-8</div>
</div>
Try it Yourself »

No Gutters

Add the .no-gutters class to the .row container to remove gutters (extra space):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Bootstrap 4 Column Grid

Example

Try it Yourself »