Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.

Equal columns

For example, here are two grid layouts that apply to every device and viewport, from xs to xxl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Equal-width columns can be broken into multiple lines if you use <div class="w-100"></div> in the point where you want to split the row.

Column

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below) or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

Variable width content

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

				
<!-- Equal columns -->
<div class="container">
  <div class="row">
    <div class="col"> 1 of 2 </div>
    <div class="col"> 2 of 2 </div>
  </div>

  <div class="row">
    <div class="col"> 1 of 3 </div>
    <div class="col"> 2 of 3 </div>
    <div class="col"> 3 of 3 </div>
  </div>
</div>

<!-- Equal-width columns can be broken into multiple lines with .w-100 -->
<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<!-- Setting one column width -->
<div class="container">
  <div class="row">
    <div class="col"> 1 of 3 </div>
    <div class="col-6"> 2 of 3 (wider) </div>
    <div class="col"> 3 of 3 </div>
  </div>
  <div class="row">
    <div class="col"> 1 of 3 </div>
    <div class="col-5"> 2 of 3 (wider) </div>
    <div class="col"> 3 of 3 </div>
  </div>
</div>

<!-- Variable width content -->
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2"> 1 of 3 </div>
    <div class="col-md-auto"> Variable width content </div>
    <div class="col col-lg-2"> 3 of 3 </div>
  </div>
  <div class="row">
    <div class="col"> 1 of 3 </div>
    <div class="col-md-auto"> Variable width content </div>
    <div class="col col-lg-2"> 3 of 3 </div>
  </div>
</div>