How can I get auto-width columns in Bootstrap?

Question

How do I get auto-width-columns in Bootstrap like in UIKit?

I need 5 columns with auto width.

In UIKit you get it with <div class="uk-width-1-5">

not really clear what is asked: auto-width on content, or equal column auto-width on available space — serge, May 20 '22 at 16:47

score 25 · Answer 1 · answered Jan 30 '18 at 06:25

25

Bootstrap 4+ you can use the col class alone and it will resize to what space is available.

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

answered Jan 30 '18 at 06:25

Josh Bradley

1,854
1
15
31

4

Hi Josh. How can I implement that with bootstrap 3.3.7? – Allan Jebaraj May 19 '18 at 10:35
2

You can't. Auto width calculation is a feature only available with `flexbox` – Josh Bradley Oct 10 '18 at 20:36
2

@AllanJebaraj although flexbox is only present at Bootstrap 4+, it doesn't mean you can't. You can study flexbox and apply your own CSS rules to override the columns styles and apply the auto-width. =] – giovannipds Dec 20 '19 at 17:39
It's been a year and a half ! :P Thank you @giovannipds I didn't have control over the library as many components and layouts have been defined in that version and I didn't want to complicate the already complicated codebase ;) – Allan Jebaraj Dec 23 '19 at 06:02
@AllanJebaraj haha, no worries! If you need it anytime, just say it, it's simples to implement a little css class extension for that. =] – giovannipds Dec 26 '19 at 12:57

score 22 · Answer 2 · answered Dec 04 '19 at 17:29

Using class="col" will automatically make the columns equal in size.

But if you want some column(s) to resize depending on its/there content(s), use something like class="col-auto".

Use class="col-{breakpoint}-auto" classes to size columns based on the natural width of their content.

Reference: https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content

score 1 · Answer 3 · answered Apr 12 '23 at 12:23

Bootstrap 5 (update 2023)

Bootstrap 5 still uses a flexbox grid so auto-sizing is still possible using the .col to .col-auto classes so that columns take up as much space as needed.

Bootstrap 4

Bootstrap 4 uses a flexbox grid so auto-width columns are achieved using the col and/or col-auto classes. The col class will create equal width columns, while col-auto columns will shrink to fit the width of their content.

Bootstrap 3 (original answer)

The 5 columns aspect of this question has been answered here. Since Bootstrap has 12 columns, you only use 10 of them with 5 col-*-2 units

http://codeply.com/go/QXiPmtgJUJ

In terms of "auto-width", Bootstrap 4 will have new auto-layout columns that consume the remaining portion of any row, but this is still based on a 12 column grid.

How can I get auto-width columns in Bootstrap?

3 Answers3