Auto width columns Bootstrap 4

Auto width columns in Bootstrap 4 :

If you use col class the columns will be of equal width. If you use col-auto the width of the column will be the width of the contents in the column.

Two Equal Columns:

<div class="row"> 

      <div class="col">Col1</div>

        <div class="col">Col2</div>

    </div>

Auto Adjust Colums:

Using col-auto for first column and col for second.

<div class="container">

  <div class="row">

    <div class="col-auto">

      col-auto - first column

    </div>

    <div class="col">

       col - this column takes rest of available space 

    </div>    

  </div>

</div>