Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.
On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-span-* elements within a .row. As this is a 12-column grid, each .col-span-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-lg-* elements within a .row. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
To nest your content with the default grid, add a new .row and set of .col-span-* columns within an existing .col-span-* column. Nested rows should include a set of columns that add up to 12.
To nest your content with the default grid, add a new .row and set of .col-lg-* columns within an existing .col-lg-* column. Nested rows should include a set of columns that add up to 12.
<section> should be wrapped as inline.
{% endhighlight %}
Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .col-span-* classes.
Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .col-lg-* classes.
Create larger or smaller form controls that match button sizes.