O'Reilly logo

Bootstrap Site Blueprints Volume II by Matt Lambert

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Setting up the index page

The layout for the body of the page is the first place where we will use some different grid classes. When the project is viewed on the desktop, there will be a main feed on the left and a sidebar on the right. If we switch to viewing this on a mobile device, there will be only one column with the sidebar sliding in below the main feed. Here's the grid code we'll use to set this up:

<div class="col-xs-12 col-lg-8">
…
</div>
<div class="col-xs-12 col-lg-3 col-lg-offset-1">
…
</div>

The first column uses the col-lg-8 class for the desktop, which will set the feed to roughly three-fourth of the width of the layout. However, for mobile devices, I'm using the col-xs-12 class because I want it to span the width of the layout. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required