Bootstrap make all columns equal to largest col-auto width

Question

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.

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
– avia, Commented Nov 3, 2021 at 18:58

avia · Accepted Answer · 2021-11-03 18:57:03Z

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

answered Nov 3, 2021 at 18:57

avia

1,5939 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zgood Over a year ago

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

rickyz Over a year ago

@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.

Collectives™ on Stack Overflow

Bootstrap make all columns equal to largest col-auto width

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related