CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Michael Mahony
Michael Mahony

Reputation: 1350

New to Bootstrap -- need to figure out layout issue

I understand that Bootstrap is a grid-based system. What I want to do is create a category page (catgegory of products) that can have as many DIVs as the screen will allow. Basically it is "reverse responsive" in that the number of DIVs grows as the screen grows larger.

Right now I seem to be "stuck" using a set number of DIVs based upon the grid-system of Bootstrap. Perhaps I should not be using the Bootstrap layout features for this? If not, how can I accomplish what I am looking to do?

Example:

If on one screen I get this:

<div>
   <div>content</div>
   <div>content2</div>
   <div>content3</div>
   <div>content4</div>
</div>
<div>
   <div>content5</div>
   <div>content6</div>
   <div>content7</div>
   <div>content8</div>
</div>

When viewed on a larger screen it should be like this:

<div>
   <div>content</div>
   <div>content2</div>
   <div>content3</div>
   <div>content4</div>
   <div>content5</div>
</div>
<div>
   <div>content6</div>
   <div>content7</div>
   <div>content8</div>
</div>

and on an even larger screen it should be:

<div>
   <div>content</div>
   <div>content2</div>
   <div>content3</div>
   <div>content4</div>
   <div>content5</div>
   <div>content6</div>
</div>
<div>
   <div>content7</div>
   <div>content8</div>
</div>

Is there a way (any way at all) to accomplish this?

Thanks!

UPDATE: For those needing to visualize, this is an image of my layout with just 4 columns, but if the screen was larger I would want it to grow to 5, 6, 7 or even 8 columns:

enter image description here

Upvotes: 0

Views: 63

Answers (1)

drew_w
drew_w

Reputation: 10430

I think (maybe) what you are looking for here is what bootstrap (2, at least) does by default - 12 columns that wrap as necessary depending on the page size. What you want to do is use a class on your div's to set the number of columns that div will take up. Pretty much, what you are looking at is this:

<div class="span2">First Column</div>
<div class="span2">Second Column</div>
<div class="span2">Third Column</div>
<div class="span2">Fourth Column</div>
<div class="span2">Fifth Column</div>
<div class="span2">Sixth Column</div>

Then just let bootstrap do its magic. Try resizing your window and it should float the columns correctly based on the size of your window (in other words, it should be responsive). If you want to make a column bigger, just change the number in the span (up) and be sure to remove that same amount from other spans. Hope that helps!

NOTE: For bootstrap3, the syntax is different (see ".col-md-*" on this page)

Upvotes: 2

Related Questions