CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bill
Bill

Reputation: 2349

dynamically scale number of images per row depending on screen width

I've tried this using a number of different approaches, and each one seems to have some fault.

I need to display a relatively large number of images (approx 50) neatly aligned in rows and columns. However, I need the length of each row to scale depending on the width of the screen.

Here are a number of attempts I've taken:

  1. Putting the images directly in a <div>. This works but doesn't align them in rows and columns.
  2. Using a bootstrap row-fluid, and then putting each image in a span2, but this seems to make the images float and sometimes stack up on one another in undesirable ways.
  3. Using a table, but this often leaves dangling rows if it needs to wrap.

Is there an idiomatic way to do this in bootstrap, or just straight-up HTML/CSS?

Upvotes: 1

Views: 963

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362580

In Bootstrap 2.x you need to use media queries to customize the layout of number of columns across (length of rows). For example, this would create 2 columns of span3 at tablet size.

/* responsive media query */
@media (min-width: 768px) and (max-width: 980px) {
  .span3 {
    width:41% !important;
  }
  .span3:nth-child(odd) {
    margin-left:0;
  }
}

Here is a 2.x demo: http://bootply.com/72915

In Bootstrap 3, it becomes a lot easier using the new grid sizes.

Here is 3.0 RC1 demo: http://bootply.com/70929

Upvotes: 1

Jonathan Pyper
Jonathan Pyper

Reputation: 28

You can put a 100% width value on the image?

.gallery .span2 img{width:100%;}

<div class="gallery">
<div class="span2"><img></div>
<div class="span2"><img></div>
<div class="span2"><img></div>
</div>

I believe bootstrap has those spans floated already?

Upvotes: 1

Phorden
Phorden

Reputation: 1034

I would like to see your code, but based on what you gave me, I would want to create divs for the images and create a class for all of them that floats them left with padding around the div. You will probably have to have separate css for different screen sizes though and base a lot of it on percentages.

Upvotes: 1

Related Questions