Non 12-divisible Equal columns on Bootstrap 4

Question

I have a little web app that I want to show 5 columns responsive equal width.

But I only want this layout for a devices with ≥992px of width. For devices <992px o

Answer 1

Maybe I don't understand the question. Why not just use the lg auto layout columns (col-lg)?

https://www.codeply.com/go/OohsSfM7Zu

<div class="row">
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
</div>

Answer 2

The first thing to remember about Bootstrap is that rows must contain 12 columns. If you have a row with a number that doesn't go into 12 (such as 5), you should be making use of offsets.

For example, 12 / 5 is 2, with 2 left over. So you want to make use of columns that occupy a width of 2, for a total of 10 columns. From here, you would offset by 1 on the left. Considering you now have a total of 11, you've automatically also offset by 1 on the right.

This can be demonstrated in the following:

.row {
  margin: 0 !important; /* Prevent scrollbars in the fiddle */
  text-align: center; /* Helps illustrate the centralisation */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<div class="row">
  <div class="col-sm-2 offset-sm-1">One</div>
  <div class="col-sm-2">Two</div>
  <div class="col-sm-2">Three</div>
  <div class="col-sm-2">Four</div>
  <div class="col-sm-2">Five</div>
</div>

If you're not happy with this offset, then you can simply make use of a custom media query such as width: calc(100% / 5) ...though this would completely violate the point of using Bootstrap; another framework might be more suitable :)

Hope this helps!