Grid - equal and automatic widths

Columns do not need a number. Columns with col share the row equally, and a column with col-auto is only as wide as its content. Both stay side by side at every screen width.

Equal widths

Code

<div class="row">
  <div class="col">One of three columns</div>
  <div class="col">One of three columns</div>
  <div class="col">One of three columns</div>
</div>

Result

One of three columns

Automatic width

The middle column is as wide as its text, and the other two share the rest of the row.

Code

<div class="row">
  <div class="col">Shares the rest</div>
  <div class="col-auto">As wide as its text</div>
  <div class="col">Shares the rest</div>
</div>

Result

Shares the rest

As wide as its text

Shares the rest