cssbootstrap-5col

Bootstrap 5 - several columns with normal width but one that takes up the rest of the space

If I have a scenario using Bootstrap 5 like...

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">One</div>
    <div class="col">Two</div>
    <div class="col">Three</div>
  </div>
</div>

All columns currently take whatever width their content needs.

I want column two to be as wide as it can be without interfering with the display of columns one and two.

Is this possible with Bootstrap alone or would I need to rely on additional CSS styling?

Solution

  • Just found the answer. Make all columns EXCEPT the one I want to take up all the space col-auto. Make that one class="col".

    <div class="container">
  <div class="row">
    <div class="col-auto">One</div>
    <div class="col">Two</div>
    <div class="col-auto">Three</div>
  </div>
</div>