How do you create responsive columns using Bootstrap grid?

Beginner

Answer

Use column classes with breakpoint prefixes to create responsive layouts:

<div class="row">
  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
    <!-- 100% on xs, 50% on sm, 33.33% on md, 25% on lg and xl -->
  </div>
</div>

Column behavior:

  • Without breakpoint: applies to all screen sizes
  • With breakpoint: applies to that breakpoint and larger
  • Multiple classes: different behavior at different breakpoints