Bootstrap 3 - different number of fixed width items depending upon screeen width

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.
Sean ClarkeOwner / ManagerAsked:
Who is Participating?
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
sorry, typing on phone...

dont be crippled by bootstrap. just because you have bootstrap doesnt mean every single element on your page has to be determined by bootstrap classes
Kyle HamiltonData ScientistCommented:
you dong have to use bootstrap columns. just use float:left on all the fixed width containers.

for example:

<div class="my-container">

.my-container > div{

how many inner divs fit across will depend on the with of the container
Sean ClarkeOwner / ManagerAuthor Commented:
Kyle, blinked by Bootstrap - Indeed, just needed to go back to basic CSS

.mydiv { float: left; width: 135px; height: 155px; overflow: hidden; margin: 0px 10px 10px 0px; }
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.