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 of width I want to show the 5 HTML elements in one full-width row.

Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit flex-basis or border.

Two workarounds have been documented in a reduced test case outside Bootstrap, though if the browser is up to date this shouldn’t be necessary.

Source: https://getbootstrap.com/docs/4.0/layout/grid/

So, I'm a bit confused in how can I achieve this responsive behaviour that I want using Bootstrap 4.

I have this "idea", but I think will pretty ugly, what do you think about it?

Let's consider this markup

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
  </div>
</div>

Then, with jQuery I can select .sep and add bootstrap4 class w-100 in the case of width <992px.

Thanks for reading and please forgive my bad english.

Have you considered using [CSS Grid layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)? If you've dismissed them as inappropriate it would be worth updating your question, using the [edit] link, in order to prevent answers that suggest its use. — David Thomas, Dec 17 '17 at 19:21
I don't know about CSS Grid layouts, I will check it up, please feel free to post an answer using that approach. — candlejack, Dec 17 '17 at 19:28

score 3 · Answer 1 · answered Dec 17 '17 at 19:16

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!

Nice answer, but I don't really like this offset nor change framework only for this thing... Hmmm, give 2 minutes, I will edit my question to add an idea that probably will considered as a "dirty-fix" — candlejack, Dec 17 '17 at 19:23
Like I say, you can always craft a custom media query to handle a specific breakpoint, setting `width` to `20%` (or `calc(100% / column-count)`). However, you'd have to account for margins and paddings, and it does kind of go against the 'style' of Bootstrap :) — Obsidian Age, Dec 17 '17 at 19:37
That's true, what do you think about of the approach in my question, using JavaScript? — candlejack, Dec 17 '17 at 19:43

score 3 · Accepted Answer · answered Dec 18 '17 at 11:07

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>

Non 12-divisible Equal columns on Bootstrap 4

2 Answers2

Linked