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

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 */
}

  
One
  
Two
  
Three
  
Four
  
Five

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!