3

I am using Bootstrap's grid system. My grid has multiple rows where the first column is set to col-auto to wrap its content (different lengths). Is there a way to make the width of the first column of each row equal to the largest width required by that column?

For example, if I have:

<div class="container-fluid">
   <div class="row">
      <div class="col-auto">short col</div>
      <div class="col">other stuff</div>
   </div>
   <div class="row">
      <div class="col-auto">clearly the longest column</div>
      <div class="col">other stuff</div>
   </div>
   <div class="row">
      <div class="col-auto">medium column</div>
      <div class="col">other stuff</div>
   </div>   
</div>

I would want all the columns with class col-auto to be the length of the longest column.

rickyz
  • 71
  • 7
  • 1
    The only other way I see to achieve precisely what you ask is using JS to dynamically inject stylings for all columns based on col X's width (the longest), but I would no do such a thing. – avia Nov 03 '21 at 18:58

1 Answers1

0

Why not use relative values for the col widths instead of the BS library, here.

.row .col-auto {
width:33%;
border:1px solid black;
}
<div class="container-fluid">
   <div class="row">
      <div class="col-auto">short col</div>
      <div class="col">other stuff</div>
   </div>
   <div class="row">
      <div class="col-auto">clearly the longest column</div>
      <div class="col">other stuff</div>
   </div>
   <div class="row">
      <div class="col-auto">medium column</div>
      <div class="col">other stuff</div>
   </div>   
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
avia
  • 1,527
  • 7
  • 19
  • if you are going to do that why not just use the correct Bootstrap column class. So, change out `col-auto` with `col-4` - which has its width set to 33% already – zgood Nov 03 '21 at 19:29
  • @zgood - I agree. I originally used col-*, but wanted to use col-auto to avoid unnecessary blank space. I may just have to deal with it though. – rickyz Nov 03 '21 at 20:15