Hi there, and welcome to the latest in our series of posts covering Twitter Bootstrap. So far we have given a proper introduction to the framework, shown you how to create a responsive homepage and made that even faster with BootstrapCDN.
Today, we will expand on the idea of building pages with Bootstrap that you can use within your own projects. The Bootstrap framework provides for a giant amount of productivity to be completed within a relativly short period of time. Today’s tutorial will cover nested columns in more depth, and provide you with a great beginning point for a 100% responsive blog style layout!
View The Demo | Download the Files
One of the core concepts to understand when laying out a page using Bootstrap is the idea of nesting divs using “rows.” Essentially, we are trying to declare an outer container wherein we can safely nest our inner divs. In this case, we are doing it with posts and widgets but you could use this technique for just about anything. 
Nesting divs within containers is a very easy concept, yet it’s also easy to overlook. Just remember; when beginning a new area that will contain subsequent divs, you will need to use a row to ensure proper alignment. The use of rows provides for a rather brilliant alternative to the standard practice of using “Alpha” and “Omega” classes when designing within a grid.
Building incredible layouts with Twitter Bootstrap is easy and efficient. Once you have mastered a few of the simple techniques provided by the Bootstrap framework, just about any layout is within reach. As you can see, it only took about eight minutes to create a fully functional markup of a great looking blog page. If you would like to take a gander at the code or demo just check the links above.
