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 Small


Small 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

Assume we have a simple layout with two columns. We want the columns to be split 25%/75% for small devices.

Small devices are defined as having a screen width from 576 pixels to 767 pixels.

For small devices we will use the .col-sm-* classes.

We will add the following classes to our two columns:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

Now Bootstrap is going to say "at the small size, look for classes with -sm- in them and use those".

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

.col-sm-3
.col-sm-9

Example

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
Try it Yourself »

Note: Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns):

For a 33.3%/66.6% split, you would use .col-sm-4 and .col-sm-8 (and for a 50%/50% split, you would use .col-sm-6 and .col-sm-6):

.col-sm-4
.col-sm-8
.col-sm-6
.col-sm-6

Example

<!-- 33.3/66.6% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-8 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

<!-- 50%/50% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6 bg-warning">
      <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-sm-* and only use the .col-sm 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 576px, the columns will stack horizontally:

<!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>

<!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">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 »

The next chapter shows how to add a different split percent for medium devices.


×

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.