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
background-color: white;on the
- Use the
@baseLineHeightattributes as our typographyic base
- Set the global link color via
@linkColorand apply link underlines only on
Reset via Normalize
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.
<div class="row"> <div class="span4">...</div> <div class="span4 offset4">...</div> </div>
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
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
<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
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.
Make any row fluid simply by changing
.row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.
<div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>
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>