Scaffolding
Page structure
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>
Detecting JavaScript
Sometimes you need to detect if JavaScript is enabled on the browser.
By default the page will be rendered with a class of no-js
on
the <html>
element, which allows specific styles to be
applied to the page.
<html class="no-js" lang="en">
The class attribute will be updated to js
when Modernizer.js
runs to indicate that JavaScript is enabled on the browser. This allows JavaScript
specific styles to be applied.
<html class="js" lang="en">
Conditional classes for Internet Explorer
Bootstrap uses conditional comments
to identify the version of IE that is being used. The conditional comments are used to
specify which <html>
element should be used to start the document.
The conditional comments will apply one or more classes to the <html>
element that can be used for IE specific styles. For example, IE7 would have the
classes lt-ie8
(less than IE8) and lt-ie9
(less than IE9).
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Creating an IE specific style
To create an IE specific style, simply create a rule that starts with a IE version
selector like .lt-ie8
. This makes the rule more specific than the default
rule and ensures it will only apply to IE.
/* This rule will be applied to all browsers */ .some-rule { color: Red; } /* This rule will be applied to IE 6 and 7 */ .lt-ie8 .some-rule { color: Black; }
Layouts
Fixed layout
A simple 960px-wide, centered layout provided by a single <div class="container-fixed">
.
<div class="container-fixed"> <div class="content"> <div class="row"> <div class="span2">...</div> <div class="span10">...</div> </div> </div> </div>
Fluid layout
<div class="container-fluid">
resizes the page content to fill the entire screen.
<div class="container-fluid"> <div class="content"> <div class="row"> <div class="span2">...</div> <div class="span10">...</div> </div> </div> </div>
Adding Local Navigation
When adding local navigation, in addition to the above classes, we also would need to add class container-localNavigation
. Adding this class, allocates space for local navigation.
Note:
Please note that even though local navigation is allocated space in the layout, the grid is still 12 columns with each column being reduced in size.
Fixed layout with local navigation
<div class="container-fixed container-localNavigation"> <div class="content"> <div class="row"> <div class="span2">...</div> <div class="span10">...</div> </div> </div> <div class="localNavigation"> ... </div> </div>
Fluid layout with local navigation
<div class="container-fluid container-localNavigation"> <div class="content"> <div class="row"> <div class="span2">...</div> <div class="span10">...</div> </div> </div> <div class="localNavigation"> ... </div> </div>
Grid system
The default grid system utilizes 12 fluid columns and is based on the excellent work done by the Semantic Grid. When the viewport is sized to exactly 960px, the column and margin sizes match up with the design guidelines of 56px columns and 24px gutters.
<div class="row"> <div class="span6">...</div> <div class="span6">...</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
Unlike top level rows, there are no styles predefined for nested rows. It would take 144 rules to define all of the different ways of nesting rows and columns for just one level of nesting.
Instead, Bootstrap provides a set of mixins that makes it easy to define the exact CSS rules needed for nesting. Since most fluid grids don't support nested rows, the little bit of extra work to define specific CSS rules is a small price to pay.
A .row() mixin must be applied to the containing element of the nested columns. That mixin should contain the number of columns of its parent (6, in this case), and the same number must be passed into the nested columns as a second parameter (.column(3,6) in the example ).
6
CSS
@import "layout.less"; .row6 { .row(6); } .span3of6 { .column(3, 6); }
HTML
<div class="span6"> ... <div class="row6"> <div class="span3of6"></div> <div class="span3of6"></div> </div> </div>
Vertical spacing
Clearing floats
Use the .clearFix
class to clear floats without
adding additional elements to your HTML.
Margins utilities
Bootstrap includes several utility classes for vertically spacing out components, rows and widgets. Simply add the class to the top element to add the desired bottom margin.
.smallBottomMargin (6px) |
.mediumBottomMargin (12px) |
.largeBottomMargin (24px) |
Top
Bottom
|
Top
Bottom
|
Top
Bottom
|
Responsive design
Do I need a responsive layout?
Projects should decide whether (and where) they need a responsive layout. Responsive layouts require additional thought, design and development compared to "desktop only" web applications.
Match your design requirements to the responsive requirements to find a recommended approach. Keep in mind that not every page has the same level of requirements; you can use different techniques on different pages. Selecting the right tools for the job ensures that design and development are simple and quick.
Responsive Requirements | Recommended Approach |
---|---|
Fluid only (not responsive) |
|
Basic responsive layout
|
|
Advanced responsive layout
Example: TODO |
|
Media queries
Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.
TODO: Review these to make sure they cover the scenarios correctly
Devices and resolutions
Label | Layout width | Media query |
---|---|---|
Smartphones | 480px and below | @media (max-width: 480px) { ... } |
Smartphones to tablets | 767px and below | @media (max-width: 767px) { ... } |
Portrait tablets | 768px to 979px | @media (min-width: 768px) and (max-width: 979px) { ... } |
Default | 980px and above | No media query required - this is your default appearance |
Large display | 1200px and above | @media (min-width: 1200px) { ... } |
Responsive utility classes
What are they
For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.
When to use
Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
Supported classes
Shown here is a table of the classes we support and their effect on a given media query
layout (labeled by device). They can be found in responsive.less
.
Class | Phones 480px and below | Tablets 767px and below | Desktops 768px and above |
---|---|---|---|
.visible-phone |
Visible | Hidden | Hidden |
.visible-tablet |
Hidden | Visible | Hidden |
.visible-desktop |
Hidden | Hidden | Visible |
.hidden-phone |
Hidden | Visible | Visible |
.hidden-tablet |
Visible | Hidden | Visible |
.hidden-desktop |
Visible | Visible | Hidden |
Test case
Resize your browser or load on different devices to test the above classes.
Visible on...
Green checkmarks indicate that class is visible in your current viewport.
- Phone✔ Phone
- Tablet✔ Tablet
- Desktop✔ Desktop
Hidden on...
Here, green checkmarks indicate that the class is hidden in your current viewport.
- Phone✔ Phone
- Tablet✔ Tablet
- Desktop✔ Desktop
IE8 doesn't support media queries, but thats not a problem because it wouldn't be used to view websites from a phone or tablet. To see these examples in action on your desktop, use IE9, Firefox, Chrome or Safari.