Scaffolding

Back To Top

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;
}
Back To Top

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>
Back To Top

Grid system

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4
<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

3
3

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>
Back To Top

Vertical spacing

Clearing floats

Use the .clearFix class to clear floats without adding additional elements to your HTML.

Float left
Content

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
Back To Top

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)

  • Use the built in grid classes to layout content.

Basic responsive layout

  • Show/hide content based on device width
  • Reflow content into a single column for small devices
  • Start with the built in grid classes to layout content
  • Use the responsive utility classes to show/hide content
  • Use responsive.less to reflow content into a single column when the device becomes too narrow

Advanced responsive layout

  • Reorder content based on the device resolution
  • Change background images
  • Change apperance/behavior

Example: TODO

  • Create custom styles based on the type of content (.show, .recipe, .episode )
  • Leverage media queries to give the custom styles different appearances at each resolution.
  • Leverage mixins like .row() and .column() from layout.less to quickly apply layout rules to the custom styles.

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.