Bootstrap 4 Grid Examples






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



Bootstrap 4 Grid Examples



❮ Previous
Next ❯



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


col


col




Example



<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div
class="col">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


col-4


col-4




Example



<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div
class="col-4">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-3


col-6


col-3




Example



<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div
class="col-3">col-3</div>
</div>

Try it Yourself »






<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->





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


col-6


col




Example



<div class="row">
  <div class="col">col-3</div>
  <div class="col-6">col-6</div>
  <div
class="col">col-3</div>
</div>

Try it Yourself »



More Equal Columns




1 of 2


2 of 2




1 of 4


2 of 4


3 of 4


4 of 4




1 of 6


2 of 6


3 of 6


4 of 6


5 of 6


6 of 6




Example



<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3
of 4</div>
  <div class="col">4 of 4</div>
</div>

<!-- Six equal columns -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3
of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5
of 6</div>
  <div class="col">6 of 6</div>
</div>

Try it Yourself »



More Unequal Columns




1 of 2


2 of 2




1 of 4


2 of 4


3 of 4


4 of 4




1 of 4


2 of 4


3 of 4


4 of 4




Example



<!-- Two Unequal
Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- Four Unequal Columns -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3
of 4</div>
  <div class="col-6">4 of 4</div>
</div>

<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3
of 4</div>
  <div class="col">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

col



Example



<div class="row">
  <div class="col">Lorem ipsum...</div>
 
<div class="col">col</div>
  <div class="col">col</div>
</div>

Try it Yourself »



Nested Columns





col-8

col-6

col-6



col-4


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



Example



<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.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-9

col-sm-3



col-sm

col-sm

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 class="row">
  <div class="col-sm-9">col-sm-9</div>
 
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
  <div
class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
 
<div class="col-sm">col-sm</div>
</div>

Try it Yourself »




Mix and Match





col-6 col-sm-9

col-6 col-sm-3





col-7 col-lg-8

col-5 col-lg-4





col-sm-3 col-md-6 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 class="row">
  <div class="col-6
col-sm-9">col-6 col-sm-9</div>
  <div class="col-6
col-sm-3">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 class="row">
  <div class="col-7 col-lg-8">col-7
col-lg-8</div>
  <div class="col-5 col-lg-4">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
class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3
col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6
col-lg-8">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.





Example



<div class="row no-gutters">

Try it Yourself »


<!--

Clear Floats


Clear floats (with the .clearfix class) at specific breakpoints to prevent strange wrapping with uneven
content:



Example



<div class="row">
  <div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
  </div>
  <div class="col-xs-6 col-sm-3">Column 2</div>
  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3">Column 3</div>
  <div class="col-xs-6 col-sm-3">Column 4</div>
</div>

Try it Yourself »




Offsetting Columns


Move columns to the right using .col-md-offset-* classes. These
classes increase the left margin of a column by * columns:



Example



<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
  .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

Try it Yourself »




Push And Pull - Change Column Ordering


Change the order of the grid columns with .col-md-push-* and
.col-md-pull-* classes:



Example



<div class="row">
  <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
  <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>

Try it Yourself »

-->


❮ Previous
Next ❯

Popular posts from this blog

How to check contact read email or not when send email to Individual?

Displaying single band from multi-band raster using QGIS

How many registers does an x86_64 CPU actually have?