In the previous article in this series, we went over how to make beautiful grid layouts with Twitter Bootstrap. Now we’ll take a closer look how organize your images or video with Twitter Bootstrap.

The best source for placeholder images

In the course of designing any media layouts, we’ll need a number of images of various sizes. Instead of creating our own, we’ll use a great site that front-end designers love– placehold.it. The site hosts images named after their sizes. An image of width 180 and height 50 would be named “180×50″ and located at http://placehold.it/180x50.

As one might expect, the image at placehold.it/600×300 is a bit bigger:

Bootstrap Thumbnails

Bootstrap Thumbnails (known as media-grid” until v1.4) allow you to organize media such as images or video in a grid layout with minimum hassle. In fact, it’s even a little bit easier than putting text into grid layouts since you don’t even have to specify rows!

As with any bootstrap project, you’ll need to include the bootstrap.css file in your html.

Next you’ll have to create the container div:

Then, make a ul with class=”thumbnails”. You don’t have to create rows. Just put each image or video inside an li element and Bootstrap will format them for you!

Using span classes

Of course there are some times when you want to control the size of each image. Just as you can format paragraphs with span elements in bootstrap, you can do the same with thumbnails. Do this by adding span3, span6, etc… classes to your li elements.

Since Bootstrap works on a 12 column grid, any images in a span4 li will take up 1/3 of the width of the container. Classes with span3 will take up 1/4 of the width and those with span2 will take up 1/6 of the container. Look at the image below:

As you can see, this example uses a lot of 300×200 images from placehold.it, but some of them have been forcibly shrunk to much smaller than 300×200. This was done with spans. The first two images have a class of “span4″, the next four have a class of “span2″ and the bottom row are all “span3″. Note that counting across any row of images, the total span is 12. Here’s the code that generated the thumbnail grid:

You can download the original source for myMediaGrid.html and play around with it. Notice how the behavior is a bit odd when the window is large enough to make the bottom row display in full 300×200 size! Play around with it a bit. Remember, you’ll have to download bootstrap so this HTML file can find the bootstrap.css!

Final thoughts

Arranging media into a pleasing grid is a lot easier when using a framework such as Twitter bootstrap. There are also a lot of other options such as adding captions right below the image tags like this:

If you make anything interesting, please share a link in the comments below!