Extra Large Grid Example

we presented a grid example with classes for small, medium and large devices. We used two divs (columns) and we gave them a 25%/75% split on small devices, and a 50%/50% split on medium devices and a 33%/66% split on large devices:

	XSmall	Small	Medium	Large	extra Large	XXL
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
Screen width	>=576px	>=576px	>=768px	=992px	`>=1200px`	>=1400px

The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, a 33%/66% split on large devices and a 20%/80% split on xlarge and xxlarge devices. On extra small devices, it will automatically stack (100%):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab .

Example

<div class="container-fluid">
 <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
     <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Using Only XLarge

In the example below, we only specify the .col-xl-6 class (without .col-lg-*, .col-md-* and/or .col-sm-*). This means that xlarge and xxlarge devices will split 50%/50%. However, for large, medium, small AND extra small devices, it will stack vertically (100% width):

Example

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-xl-6">
     <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Using Only XLarge

Example

<!-- Two columns: 50% width on xlarge and up-->
<div class="row">
  <div class="col-xl">1 of 2</div>
  <div class="col-xl">2 of 2</div>
</div>

<!-- Four columns: 25% width on xlarge and up -->
<div class="row">
  <div class="col-xl">1 of 4</div>
  <div class="col-xl">2 of 4</div>
  <div class="col-xl">3 of 4</div>
  <div class="col-xl">4 of 4</div>
</div>

You can click on above box to edit the code and run again.

Output

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4