|  Interactive Media Design

Bootstrap Responsive Columns

Sometimes we want to have different layouts depending on the size of the screen. This can be accomplished by adding multiple classes to either the row or columns, specifying the breakpoint for each class.

Using Row Columns

<div class="container">
  <!-- Using Row Columns -->
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Using Column Classes

<div class="container">
  <!-- Using column classes -->
  <div class="row">
    <div class="col-md-4 col-lg-3">Column</div>
    <div class="col-md-8 col-lg">Column</div>
    <div class="col-md col-lg-3">Column</div>
  </div>
</div>

← Bootstrap Offset Columns →