Boostrap5 autofit column width

May 21, 2022

Having the following code (pen here) I tried to autofit the second column width to it content with auto margins that does not seem to work.

.col {
  border: 1px solid red;  
}
.autofit {
  margin: auto;
  width: auto;
  max-width: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row m-5">
  <div class="col">1</div>
  <div class="col autofit">2*</div>
  <div class="col">3</div>
  <div class="col">4</div>
</div>

Is there another way to autofit the column width?

Also tried width: fit-content(100px); doesn’t work neither…

>Solution :

You can use the Bootstrap-class .col-auto for this. Simple and effective!

.col, .col-auto {
  border: 1px solid red;  
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row m-5">
  <div class="col">1</div>
  <div class="col-auto">2*</div>
  <div class="col">3</div>
  <div class="col">4</div>
</div>