Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 4 Grid - Extra Large


XLarge Grid Example

  Extra small Small Medium Large Extra Large
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
Screen width <576px >=576px >=768px >=992px >=1200px

In the previous chapter, we presented a grid example with classes for small and medium 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:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

But on xlarge devices the design may be better as a 20%/80% split.

Extra large devices are defined as having a screen width from 1200 pixels and above.

For xlarge devices we will use the .col-xl-* classes:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

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

col-sm-3 col-md-6 col-lg-4 col-xl-2
col-sm-9 col-md-6 col-lg-8 col-xl-10

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>
Try it Yourself »

Note: Make sure that the sum always adds up to 12.


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 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>
Try it Yourself »

Auto Layout Columns

In Bootstrap 4, there is an easy way to create equal width columns for all devices: just remove the number from .col-xl-* and only use the .col-xl class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.

If the screen size is less than 1200px, the columns will stack horizontally:

<!-- 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>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
Try it Yourself »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.