Bootstrap 5 autofit column width-CodePudding

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 >
  <div >1</div>
  <div >2*</div>
  <div >3</div>
  <div >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...

CodePudding user response：

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 >
  <div >1</div>
  <div >2*</div>
  <div >3</div>
  <div >4</div>
</div>