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">

Answer 1

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

Answer 2

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://www.codeply.com/go/QXiPmtgJUJ

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

In terms of "auto-width", I'm not sure exactly what you mean. 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.