Bootstrap 3 - different number of fixed width items depending upon screeen width
Posted on 2015-01-02
We have a website designed using Bootstrap v3+
We want to have on a particular page a number of fixed width <div> or <img>
How many we can display naturally depends on the width of the screen.
The page content will be wrapped in a <div class='container-fluid'>
So if each <div> or <img> is fixed at 200px wide...
- on a 960px wide screen = 4 blocks could be displayed
- on a 1200px wide screen = 5 or 6 blocks could be displayed (depends on the margin between each block)
- on a 1480px wide screen = 7 blocks could be displayed
Just cannot work out how to do this in Bootstrap as everything in there is fixed columns and you need to know how many columns you want. I don't know how many columns I need. Also would like this to be flexible enough, so that if I need to change the blocks size, everything just works itself out.