Solved

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

Posted on 2015-01-02
3
230 Views
Last Modified: 2015-01-03
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.
0
Comment
Question by:Sean Clarke
  • 2
3 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
Comment Utility
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
0
 
LVL 1

Author Closing Comment

by:Sean Clarke
Comment Utility
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; }
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now