Bootstrap 5 autofit column width

Issue

Having the following code (pen here), I tried to autofit the second column width to its 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?

I also tried width: fit-content(100px);, but it didn't work either...

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>

Answered By - Sigurd Mazanti