Bootstrap

Responsive Columns

content

content

content

content

The example above demonstrates how to create responsive columns with Bootstrap.

HTML

<div class="container">
 <div class="row">
   <div class="col-12 col-sm-6 col-md-4 col-lg-3">
	  <p class="demo-content demo-content-1">content</p>
    </div>
   <div class="col-12 col-sm-6 col-md-4 col-lg-3">
	  <p class="demo-content demo-content-2">content</p>
    </div>
   <div class="col-12 col-sm-6 col-md-4 col-lg-3">
	  <p class="demo-content demo-content-3">content</p>
    </div>
   <div class="col-12 col-sm-6 col-md-4 col-lg-3">
	  <p class="demo-content demo-content-4">content</p>
    </div>
   </div>
</div>

Explanation of Bootstrap Classes:

  1. col-12: This makes the column take up the full width (12 columns) on extra small devices (phones).
  2. col-sm-6: On small devices (≥576px), the column takes up 6 out of 12 columns (50% width).
  3. col-md-4: On medium devices (≥768px), the column takes up 4 out of 12 columns (33.33% width).
  4. col-lg-3: On large devices (≥992px), the column takes up 3 out of 12 columns (25% width).

Responsive Behavior:

  • On smaller screens, each column will stack vertically (full-width).
  • On medium screens (≥768px), each column will take up 4 columns of the 12 available, placing 3 items per row.
  • On larger screens (≥992px), the columns will take up 3 columns each, placing 4 items per row.

Additional Notes:

  • You can use other breakpoints as needed (col-xs, col-sm, col-md, col-lg, col-xl).
  • You can adjust the number of columns at different screen sizes by changing the classes.

For example:

  • col-sm-4: This will take up 4 columns on small screens (small tablets and above).
  • col-lg-6: This will take up 6 columns (50%) on large screens.

Two equal columns

content

content

<div class="row">

  <div class="col-md-6">
    <p class="demo-content demo-content-1">content</p>
  </div>
  
  <div class="col-md-6">
    <p class="demo-content demo-content-2">content</p>
  </div>
  
</div>

Three equal columns

content

content

content

<div class="row">

  <div class="col-md-4">
    <p class="demo-content demo-content-1">content</p>
  </div>

  <div class="col-md-4">
    <p class="demo-content demo-content-2">content</p>
  </div>

  <div class="col-md-4">
    <p class="demo-content demo-content-3">content</p>
  </div>

</div>