Advertisement
Complete Websites

Twitter Bootstrap 101: The Grid

by

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.

Related Posts
  • Web Design
    CMS
    Adding Media Queries to Our Tumblr ThemeTumblr 18 retina
    In this video, we'll be rounding off our responsive CSS by adding some Media Queries. We'll be talking about defensive coding, being sure that we make allowances for various usage scenarios, such as unusually long blog titles.Read More…
  • Web Design
    CMS
    Continuing With Our Tumblr Theme's CSSTumblr 15 retina
    In this part of our Tumblr theming series, we're going to continue with our theme's CSS. We'll be working directly on the live site, as a number of elements won't show up otherwise. Let's dig in!Read More…
  • Web Design
    Applications and Tools
    Building a Complete Website With the Gumby FrameworkGumby site build retina
    In this, our final video tutorial on Gumby, we're going to put all we've learned into practice. We're going to build a complete website using Gumby's semantic grid, parallax effects, toggles and switches, covering workflow best practices as we go. There's plenty to cover, so let's get started!Read More…
  • Web Design
    Applications and Tools
    Building Semantic Grids With GumbyGumby semantic retina
    In this tutorial we're going to build ourselves clean, readable markup with the help of Gumby's semantic grid structure. We'll continue working with the example we started in the previous lesson, getting rid of as much unnecessary mess from our code as possible, plus we'll be using Sass to speed things up.Read More…
  • Web Design
    CMS
    The Code Behind a Tumblr ThemeTumblr 2 retina
    In this screencast we'll take a first look at the structure of a Tumblr theme and the Tumblr customize area.Read More…
  • Web Design
    Applications and Tools
    Build Bootstrap in Minutes Using EmmetEmmet bootstrap retina
    Bootstrap (currently at version 3) is all about rapidly building websites, whether they be prototypes or finished products. In today's videos we're going to build ourselves a Bootstrap layout, in record time, using Emmet's powerful time-saving markup syntax.Read More…