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.
Topics Mentioned
- The clearfix applied to
.row,.row:before, androw:afteris based on Nicolas Gallagher’s micro clearfix hack. - The selector
.row > [class*="span"]is a CSS 2.1 attribute selector. Here is the W3C spec. See Chris Coyier’s helpful introduction.
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.
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.
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.
Next Steps?
Exciting things are going on in the development community which have 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.
Next up: Navigation..