Global styles for CSS reset, typography, and links
Requires HTML5 doctype
Bootstrap makes use of HTML elements and CSS properties that require the use of the HTML5 doctype. Be sure to include it at the beginning of every Bootstrapped page in your project.
<!DOCTYPE html> <html lang="en"> ... </html>
Typography and links
Within the scaffolding.less file, we set basic global display, typography, and link styles. Specifically, we:
- Remove margin on the body
- Set
background-color: white;
on thebody
- Use the
@baseFontFamily
,@baseFontSize
, and@baseLineHeight
attributes as our typographyic base - Set the global link color via
@linkColor
and apply link underlines only on:hover
Reset via Normalize
As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate.
The new reset can still be found in reset.less, but with many elements removed for brevity and accuracy.
Default grid system 12 columns with a responsive twist
The default grid system provided in Bootstrap utilizes 12 columns that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically.
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
As shown here, a basic layout can be created with two “columns”, each spanning a number of the 12 foundational columns we defined as part of our grid system.
Offsetting columns
<div class="row"> <div class="span4">...</div> <div class="span4 offset4">...</div> </div>
Nesting columns
With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row
and set of .span*
columns within an existing .span*
column.
Example
Nested rows should include a set of columns that add up to the number of columns of it’s parent. For example, two nested .span3
columns should be placed within a .span6
.
<div class="row"> <div class="span6"> Level 1 column <div class="row"> <div class="span3">Level 2</div> <div class="span3">Level 2</div> </div> </div> </div>
Fluid grid system 12 responsive, percent-based columns
Fluid columns
Percents, not pixels
The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.
Fluid rows
Make any row fluid simply by changing .row
to .row-fluid
. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.
Markup
<div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>
Fluid nesting
Nesting with fluid grids is a bit different: the number of nested columns doesn’t need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.
<div class="row-fluid"> <div class="span12"> Level 1 of column <div class="row-fluid"> <div class="span6">Level 2</div> <div class="span6">Level 2</div> </div> </div> </div>