sven_toasty sven_toasty - 2 months ago 7
CSS Question

9 divs in a row, want to lose one div at every breakpoint with bootstrap

I have 9 divs all the same size in one row. I am using the latest version of bootstrap 3.

How should I code it so that, when making the screen smaller, lose exactly one div at every breakpoint until the screen is mobile size and displays exactly two divs?

With current bootstrap there are I believe four breakpoints, will I have to code my own extra breakpoints using media queries? How would I do that? I think I would need about eight breakpoints in total.

Answer

Then just don't use bootstrap!!!, use float:left instead, and let the browser decide when to move the overflowing divs to the new line.

Also you could use display: inline-block; for the similar effect, while also reaping the benefits of being able to align them(blocks) as text.

Demo