Maintain single row in 5 column Bootstrap grid

Question

When I run the code snippet on https://stackoverflow.com/a/42464655/7835535 in full page, column 5 ends up on the next line when the screen is resized xs. Is there a way to maintain the single row when the screen is shrunk to extra small? In other words, how to I change the breakpoint for auto-layout columns?

Answer 1

try @media (max-width: ) code specifying max and min width and write specific code for that screen size

Answer 2

You could also try setting the width of the columns to % or em rather than px to see if it makes any difference.

Hope that helps!

Answer 3

As explained here: Non 12-divisible Equal columns on Bootstrap 4

There are auto-layout columns for each breakpoint...

col = auto layout xs and up
col-sm = auto layout sm and up
col-md = auto layout md and up
col-lg = auto layout lg and up
col-xl = auto layout xl

Answer 4

You don't seem to understand what is actually happening there. So, here's a tip:

Replace the word "column" in that code snippet with "c o l u m n". In other words, add a space between each letter and then resize the window.

You'll see that all 5 columns remain in a single row. That is the normal and expected behavior of Flexbox which is what powers Bootstrap columns in this case.

Only when you put long words or images etc. into some of the columns and the content cannot flow downwards (within the same column) only then will Flexbox push the outermost column(s) onto the next row (because the overall content width becomes greater than the available width in a row).

THAT's what's actually happening there when you resize the window to a very small size. This has only to do with the content that fills out the columns and has nothing to do with the breakpoints. The class col is non-responsive by default i.e. it doesn't have any breakpoints. Responsiveness is added/created by adding other classes such as col-sm etc.