Advertisement

Twitter Bootstrap 101: The Grid

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

This post is part of a series called Twitter Bootstrap 101.
Twitter Bootstrap 101: Introduction
Twitter Bootstrap 101: Introducing 2.0

Today, let's look at the grid system that comes with Twitter Bootstrap and we'll take a look at their media grid while we're doing so. In the process we'll build ourselves a nice little mockup for a portfolio page.

Note: The grid we're working with today comes with the Bootstrap release current at the time of publication: 1.4.0.


Get the Code

  • We'll start with these files, based on where we ended with Part 1 of this series.

Video 3: Bootstrap's Grid System

Let me introduce you to Bootstrap's grid, which is based on the 960 grid system. I'll encourage you to learn by playing around with the grid, using the hero.html file.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Topics Mentioned


Video 4: Laying out a Portfolio Page

Now let's create our own custom portfolio page. We'll embed two YouTube videos and arrange them in an alternating pattern using the grid system. As we do so, I'll share how to calculate appropriate widths for fitting media within the grid.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!


Video 5: Now for a Media Grid

Let's continue developing our portfolio page. We'll use the class media-grid to setup two rows of thumbnail images. And I'll introduce you to the very helpful placehold-image site: Placehold.it.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!


Video 6: Time for Some Custom CSS

With our content in place, we're ready to add some of our own custom styles. Let's link up our own stylesheet, importing Bootstrap's styles and adding our own. This step will have you ready to be off and running, ready to create your own beautifully customized Bootstrap-built site.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!


Next Steps?

Exciting things are going on in the development community which has taken shape around the project. In a few weeks (at last report), Twitter Bootstrap 2.0 will be released to the world, and it will include some exciting new touches, including a responsive grid. That's certainly something to look out for.

Meanwhile, we'll prepare ourselves by becoming fully familiar with the current best that Bootstrap has to offer.

Advertisement