Designing a Website Template with Twitter Bootstrap - Part 1 - Setup
This video is a part of an ongoing series on how to use Twitter's Bootstrap framework to develop a web site project. In our case, we'll just be creating a template, but over the course of many tutorials, we'll experiment with the many features of Bootstrap and enhance the layout with our own additions to the look and feel.
In this tutorial, we'll start a project and create a 2-column layout using the fluid grid system. There have been some questions about problems with various spans, and my students today were just asking me for help, so I'd like to add a little advice regarding how not to break your Bootstrap grid layout:
Make sure you aren't dropping any tags in between your span divs, and don't place any tags between a row or row-fluid div and the spans inside the row. Basically, the direct parent of a span must be a row or row-fluid, and you don't ever want to place a tag in between the span divs. For example, don't place a header after the closing of a span8 and before the opening of a span4.