Row columns layouts

Use the responsive .row-cols-* classes to quickly set the number of columns that best render your content and layout.

Whereas normal .col-* classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent .row as a shortcut. With .row-cols-auto you can give the columns their natural width.

Example:

<div class="container">
    <div class="row row-cols-3">
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
    </div>
</div>

Responsive Cols Control

Use these row columns classes to quickly create basic grid layouts or to control your card layouts.

Example:

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-3 row-cols-md-5">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>