asked on

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.

Kyle Hamilton

you dong have to use bootstrap columns. just use float:left on all the fixed width containers.

for example:

<div class="my-container">
<div>foo</div>
<div>bar</div>
</div>

.my-container > div{
float:left;
}

how many inner divs fit across will depend on the with of the container

ASKER CERTIFIED SOLUTION

Kyle Hamilton

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sean Clarke

ASKER

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; }