\ No newline at end of file
diff --git a/docs/_includes/nav-javascript.html b/docs/_includes/nav-javascript.html
new file mode 100644
index 0000000000..9422b27fb5
--- /dev/null
+++ b/docs/_includes/nav-javascript.html
@@ -0,0 +1,28 @@
+
Bootstrap comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement.
+
+
+
glyphicon-glass
+
glyphicon-music
+
glyphicon-search
+
glyphicon-envelope
+
glyphicon-heart
+
glyphicon-star
+
glyphicon-star-empty
+
glyphicon-user
+
glyphicon-film
+
glyphicon-th-large
+
glyphicon-th
+
glyphicon-th-list
+
glyphicon-ok
+
glyphicon-remove
+
glyphicon-zoom-in
+
glyphicon-zoom-out
+
glyphicon-off
+
glyphicon-signal
+
glyphicon-cog
+
glyphicon-trash
+
glyphicon-home
+
glyphicon-file
+
glyphicon-time
+
glyphicon-road
+
glyphicon-download-alt
+
glyphicon-download
+
glyphicon-upload
+
glyphicon-inbox
+
+
glyphicon-play-circle
+
glyphicon-repeat
+
glyphicon-refresh
+
glyphicon-list-alt
+
glyphicon-lock
+
glyphicon-flag
+
glyphicon-headphones
+
glyphicon-volume-off
+
glyphicon-volume-down
+
glyphicon-volume-up
+
glyphicon-qrcode
+
glyphicon-barcode
+
glyphicon-tag
+
glyphicon-tags
+
glyphicon-book
+
glyphicon-bookmark
+
glyphicon-print
+
glyphicon-camera
+
glyphicon-font
+
glyphicon-bold
+
glyphicon-italic
+
glyphicon-text-height
+
glyphicon-text-width
+
glyphicon-align-left
+
glyphicon-align-center
+
glyphicon-align-right
+
glyphicon-align-justify
+
glyphicon-list
+
+
glyphicon-indent-left
+
glyphicon-indent-right
+
glyphicon-facetime-video
+
glyphicon-picture
+
glyphicon-pencil
+
glyphicon-map-marker
+
glyphicon-adjust
+
glyphicon-tint
+
glyphicon-edit
+
glyphicon-share
+
glyphicon-check
+
glyphicon-move
+
glyphicon-step-backward
+
glyphicon-fast-backward
+
glyphicon-backward
+
glyphicon-play
+
glyphicon-pause
+
glyphicon-stop
+
glyphicon-forward
+
glyphicon-fast-forward
+
glyphicon-step-forward
+
glyphicon-eject
+
glyphicon-chevron-left
+
glyphicon-chevron-right
+
glyphicon-plus-sign
+
glyphicon-minus-sign
+
glyphicon-remove-sign
+
glyphicon-ok-sign
+
+
glyphicon-question-sign
+
glyphicon-info-sign
+
glyphicon-screenshot
+
glyphicon-remove-circle
+
glyphicon-ok-circle
+
glyphicon-ban-circle
+
glyphicon-arrow-left
+
glyphicon-arrow-right
+
glyphicon-arrow-up
+
glyphicon-arrow-down
+
glyphicon-share-alt
+
glyphicon-resize-full
+
glyphicon-resize-small
+
glyphicon-plus
+
glyphicon-minus
+
glyphicon-asterisk
+
glyphicon-exclamation-sign
+
glyphicon-gift
+
glyphicon-leaf
+
glyphicon-fire
+
glyphicon-eye-open
+
glyphicon-eye-close
+
glyphicon-warning-sign
+
glyphicon-plane
+
glyphicon-calendar
+
glyphicon-random
+
glyphicon-comment
+
glyphicon-magnet
+
+
glyphicon-chevron-up
+
glyphicon-chevron-down
+
glyphicon-retweet
+
glyphicon-shopping-cart
+
glyphicon-folder-close
+
glyphicon-folder-open
+
glyphicon-resize-vertical
+
glyphicon-resize-horizontal
+
glyphicon-hdd
+
glyphicon-bullhorn
+
glyphicon-bell
+
glyphicon-certificate
+
glyphicon-thumbs-up
+
glyphicon-thumbs-down
+
glyphicon-hand-right
+
glyphicon-hand-left
+
glyphicon-hand-up
+
glyphicon-hand-down
+
glyphicon-circle-arrow-right
+
glyphicon-circle-arrow-left
+
glyphicon-circle-arrow-up
+
glyphicon-circle-arrow-down
+
glyphicon-globe
+
glyphicon-wrench
+
glyphicon-tasks
+
glyphicon-filter
+
glyphicon-briefcase
+
glyphicon-fullscreen
+
+
glyphicon-dashboard
+
glyphicon-paperclip
+
glyphicon-heart-empty
+
glyphicon-link
+
glyphicon-phone
+
glyphicon-pushpin
+
glyphicon-euro
+
glyphicon-usd
+
glyphicon-gbp
+
glyphicon-sort
+
glyphicon-sort-by-alphabet
+
glyphicon-sort-by-alphabet-alt
+
glyphicon-sort-by-order
+
glyphicon-sort-by-order-alt
+
glyphicon-sort-by-attributes
+
glyphicon-sort-by-attributes-alt
+
glyphicon-unchecked
+
glyphicon-expand
+
glyphicon-collapse
+
glyphicon-collapse-top
+
+
+
+
Glyphicons attribution
+
Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.
+
+
+
How to use
+
Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:
+{% highlight html %}
+
+{% endhighlight %}
+
Want to change the icon color? Just change the color of the parent element.
+
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
+
+
+
Icon examples
+
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
+
+
Buttons
+
+
Button group in a button toolbar
+
+
+
+
+
+
+
+
+
+
+{% highlight html %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+
+
Accessibility
+
Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.
Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.
+
+
Basic button group
+
Wrap a series of buttons with .btn in .btn-group.
+
+
+
+
+
+
+
+{% highlight html %}
+
+
+
+
+
+{% endhighlight %}
+
+
Multiple button groups
+
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% highlight html %}
+
+
...
+
...
+
...
+
+{% endhighlight %}
+
+
Nested button groups
+
Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.
Make a set of buttons appear vertically stacked rather than horizontally.
+
+
+
+
+
+
+
+
+{% highlight html %}
+
+ ...
+
+{% endhighlight %}
+
+
Justified button groups
+
Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.
Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.
+
+
Tabs
+
Note the .nav-tabs class requires the .nav base class.
To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.
To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% highlight html %}
+
+{% endhighlight %}
+
+
Buttons
+
For buttons not residing in a <form>, add this class to vertically center buttons within a navbar.
For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.
Align nav links, forms, buttons, or text, using the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction. To align nav links, put them in a separate <ul> with the respective utility class applied.
+
+
+
Optional display variations
+
Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar. These will also remove rounded corners.
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Make sure to include this after the core Bootstrap CSS.
+
+
+
Static top navbar
+
Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.
To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .navbar-toggle.
Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
+
+
Standard pagination
+
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
+
+
+
Example page header Subtext for header
+
+
+{% highlight html %}
+
+
Example page header Subtext for header
+
+{% endhighlight %}
+
+
+
+
+
+
+
+
Thumbnails
+
+
Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
+
+
Default thumbnails
+
By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
+
+
+
+
+
+
+
Thumbnail label
+
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.
+
+
Default alert
+
Wrap any text and an optional dismiss button in .alert for a basic warning alert message. To ensure proper behavior across all devices, be sure to use <button> element with the data-dismiss="alert" data attribute.
+
+
+
+ Warning! Best check yo self, you're not looking too good.
+
+
+{% highlight html %}
+
+
+ Warning! Best check yo self, you're not looking too good.
+
+{% endhighlight %}
+
+
Block alerts
+
For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.
+
+
+
+
Warning!
+
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+
+
+{% highlight html %}
+
+
+
Warning!
+
...
+
+{% endhighlight %}
+
+
Contextual alternatives
+
Add optional classes to change an alert's connotation.
+
+
+
+ Oh snap! Change a few things up and try submitting again.
+
+
+
+ Well done! You successfully read this important alert message.
+
+
+
+ Heads up! This alert needs your attention, but it's not super important.
+
+
+{% highlight html %}
+
...
+
...
+
...
+{% endhighlight %}
+
+
+
+
+
+
+
+
+
Progress bars
+
+
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
+
+
+
Cross-browser compatibility
+
Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
+
+
+
Basic
+
Default progress bar with a vertical gradient.
+
+
+
+
+
+{% highlight html %}
+
+
+
+{% endhighlight %}
+
+
Contextual alternatives
+
Progress bars use some of the same button and alert classes for consistent styles.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% highlight html %}
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+
Striped
+
Uses a gradient to create a striped effect. Not available in IE8.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% highlight html %}
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+
Animated
+
Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.
+
+
+
+
+
+{% highlight html %}
+
+
+
+{% endhighlight %}
+
+
Stacked
+
Place multiple bars into the same .progress to stack them.
+
+
+
+
+
+
+
+{% highlight html %}
+
+
+
+
+
+{% endhighlight %}
+
+
+
+
+
+
+
+
+
Media object
+
+
Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
+
+
Default example
+
The default media allow to float a media object (images, video, audio) to the left or right of a content block.
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+
+
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
+
+
Basic list group
+
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
+
+
+
Cras justo odio
+
Dapibus ac facilisis in
+
Morbi leo risus
+
Porta ac consectetur ac
+
Vestibulum at eros
+
+
+{% highlight html %}
+
+
Cras justo odio
+
Dapibus ac facilisis in
+
Morbi leo risus
+
Porta ac consectetur ac
+
Vestibulum at eros
+
+{% endhighlight %}
+
+
With chevrons
+
Add Glyphicon chevrons that are automatically moved to the right.
+
+
+
+
+ Cras justo odio
+
+
+
+ Dapibus ac facilisis in
+
+
+
+ Morbi leo risus
+
+
+
+{% highlight html %}
+
+
+
+ Cras justo odio
+
+
+{% endhighlight %}
+
+
With badges
+
Add the badges component to any list group item and it will automatically be positioned on the right.
+
+
+
+ 14
+ Cras justo odio
+
+
+ 2
+ Dapibus ac facilisis in
+
+
+ 1
+ Morbi leo risus
+
+
+
+{% highlight html %}
+
+
+ 14
+ Cras justo odio
+
+
+{% endhighlight %}
+
+
With badges and chevrons
+
Why not both?
+
+
+
+
+ 14
+ Cras justo odio
+
+
+
+ 2
+ Dapibus ac facilisis in
+
+
+
+ 1
+ Morbi leo risus
+
+
+
+{% highlight html %}
+
+
+
+ 14
+ Cras justo odio
+
+
+{% endhighlight %}
+
+
Linked list group
+
Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
+
+
Basic panel
+
By default, all the .panel does is apply some basic border and padding to contain some content.
+
+
+ Basic panel example
+
+
+{% highlight html %}
+
+ Basic panel example
+
+{% endhighlight %}
+
+
Panel with heading
+
Easily add a heading to your panel with .panel-heading. Use it on a <div> or any heading element (e.g., <h3>).
+
+
+
Panel heading
+ Panel content
+
+
+{% highlight html %}
+
+
Panel heading
+ Panel content
+
+{% endhighlight %}
+
+
Panel with footer
+
Wrap buttons or secondary text in .panel-footer.
+
+
+ Panel content
+
+
+
+{% highlight html %}
+
+ Panel content
+
+
+{% endhighlight %}
+
+
Contextual alternatives
+
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
+
+
+
Panel heading
+ Panel content
+
+
+
Panel heading
+ Panel content
+
+
+
Panel heading
+ Panel content
+
+
+
Panel heading
+ Panel content
+
+
+
Panel heading
+ Panel content
+
+
+{% highlight html %}
+
...
+
...
+
...
+
...
+
...
+{% endhighlight %}
+
+
With list groups
+
Easily include full-width list groups within any panel.
+
+
+
+
Panel heading
+
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
+
+
+
+
Cras justo odio
+
Dapibus ac facilisis in
+
Morbi leo risus
+
Porta ac consectetur ac
+
Vestibulum at eros
+
+
+
+{% highlight html %}
+
+
+
Panel heading
+
...
+
+
+
+
Cras justo odio
+
Dapibus ac facilisis in
+
Morbi leo risus
+
Porta ac consectetur ac
+
Vestibulum at eros
+
+
+{% endhighlight %}
+
+
+
+
+
+
+
+
+
+
+
Wells
+
+
+
Default well
+
Use the well as a simple effect on an element to give it an inset effect.
+
+
+ Look, I'm in a well!
+
+
+{% highlight html %}
+
...
+{% endhighlight %}
+
Optional classes
+
Control padding and rounded corners with two optional modifier classes.
+
+
+ Look, I'm in a well!
+
+
+{% highlight html %}
+
...
+{% endhighlight %}
+
+
+
+ Look, I'm in a well!
+
+
+{% highlight html %}
+
...
+{% endhighlight %}
+
diff --git a/docs/css.html b/docs/css.html
new file mode 100644
index 0000000000..36b5208e6e
--- /dev/null
+++ b/docs/css.html
@@ -0,0 +1,2034 @@
+---
+layout: default
+title: CSS
+slug: css
+lead: "Fundamental HTML elements styled and enhanced with extensible classes."
+---
+
+
+
+
+
+
Overview
+
+
Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.
+
+
HTML5 doctype required
+
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
+
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.
+{% highlight html %}
+
+{% endhighlight %}
+
+
Responsive images
+
We automatically attempt to scale images to appropriate sizes with a global max-width: 100%; on all <img> elements. If you run into problems (e.g., with Google Maps), be sure to disable this property on a per-case basis.
+
+
Typography and links
+
Bootstrap sets basic global display, typography, and link styles. Specifically, we:
+
+
Remove margin on the body
+
Set background-color: white; on the body
+
Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base
+
Set the global link color via @link-color and apply link underlines only on :hover
+
+
These styles can be found within scaffolding.less.
Easily center a page's contents by wrapping its contents in a container. Containers set `max-width` at various media query breakpoints to match our grid system.
+{% highlight html %}
+
+ ...
+
+{% endhighlight %}
+
+
+
+
+
+
+
+
Grid system
+
+
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.
+
+
Grid example
+
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.
+
+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
+
4
+
+
+
6
+
6
+
+
+{% highlight html %}
+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
+
4
+
+
+
6
+
6
+
+{% endhighlight %}
+
+
Offsetting columns
+
Move columns to the right using .col-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-offset-4 moves .col col-lg-4 over four columns.
+
+
+
4
+
4 offset 4
+
+
+
3 offset 3
+
3 offset 3
+
+
+
6 offset 3
+
+
+{% highlight html %}
+
+
...
+
...
+
+
+
3 offset 3
+
3 offset 3
+
+
+
...
+
+{% endhighlight %}
+
+
+
Nesting columns
+
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.
+
+
+ Level 1: 9 columns
+
+
+ Level 2: 6 columns
+
+
+ Level 2: 6 columns
+
+
+
+
+{% highlight html %}
+
+
+ Level 1: 9 columns
+
+
+ Level 2: 6 columns
+
+
+ Level 2: 6 columns
+
+
+
+
+{% endhighlight %}
+
+
Column ordering
+
Easily change the order of our built-in grid columns with .col-push-* and .col-pull-* modifier classes.
+
+
9
+
3
+
+
+{% highlight html %}
+
+
9
+
3
+
+{% endhighlight %}
+
+
Small device grid
+
Use the small device grid classes, like .col-sm-6, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.
+
+
4 cols, 6 small cols
+
4 cols, 6 small cols
+
4 cols, 12 small cols
+
+{% highlight html %}
+
+
4 cols, 6 small cols
+
4 cols, 6 small cols
+
4 cols, 12 small cols
+
+{% endhighlight %}
+
+
LESS mixins and variables
+
In addition to prebuilt grid classes for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.
+
+
Variables
+
Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
+{% highlight css %}
+// Creates a wrapper for a series of columns
+.make-row() {
+ // Negative margin the row out to align the content of columns
+ margin-left: (@grid-gutter-width / -2);
+ margin-right: (@grid-gutter-width / -2);
+ // Then clear the floated columns
+ .clearfix();
+}
+
+// Generate the columns
+.make-column(@columns) {
+ @media (min-width: @grid-float-breakpoint) {
+ float: left;
+ // Calculate width based on number of columns available
+ width: percentage(@columns / @grid-columns);
+ }
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Set inner padding as gutters instead of margin
+ padding-left: (@grid-gutter-width / 2);
+ padding-right: (@grid-gutter-width / 2);
+}
+
+// Generate the column offsets
+.make-column-offset(@columns) {
+ @media (min-width: @grid-float-breakpoint) {
+ margin-left: percentage((@columns / @grid-columns));
+ }
+}
+{% endhighlight %}
+
+
Example usage
+
You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
All HTML headings, <h1> through <h6> are available.
+
+
+
+
+
+
Bootstrap heading
+
Semibold 38px
+
+
+
Bootstrap heading
+
Semibold 32px
+
+
+
Bootstrap heading
+
Semibold 24px
+
+
+
Bootstrap heading
+
Semibold 18px
+
+
+
Bootstrap heading
+
Semibold 16px
+
+
+
Bootstrap heading
+
Semibold 12px
+
+
+
+
+{% highlight html %}
+
...
+
...
+
...
+
...
+
...
+
...
+{% endhighlight %}
+
+
+
Body copy
+
Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).
+
+
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
+
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
+
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+
+{% highlight html %}
+
...
+{% endhighlight %}
+
+
+
Lead body copy
+
Make a paragraph stand out by adding .lead.
+
+
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
+
+{% highlight html %}
+
...
+{% endhighlight %}
+
+
+
Built with Less
+
The typographic scale is based on two LESS variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
+
+
+
+
Emphasis
+
Make use of HTML's default emphasis tags with lightweight styles.
+
+
Small text
+
For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.
+
+
This line of text is meant to be treated as fine print.
+
+{% highlight html %}
+This line of text is meant to be treated as fine print.
+{% endhighlight %}
+
+
+
Bold
+
For emphasizing a snippet of text with a heavier font-weight.
+
+
The following snippet of text is rendered as bold text.
+
+{% highlight html %}
+rendered as bold text
+{% endhighlight %}
+
+
Italics
+
For emphasizing a snippet of text with italics.
+
+
The following snippet of text is rendered as italicized text.
+
+{% highlight html %}
+rendered as italicized text
+{% endhighlight %}
+
+
Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
+
+
Alignment classes
+
Easily realign text to components with text alignment classes.
+
+
Left aligned text.
+
Center aligned text.
+
Right aligned text.
+
+{% highlight html %}
+
Left aligned text.
+
Center aligned text.
+
Right aligned text.
+{% endhighlight %}
+
+
Emphasis classes
+
Convey meaning through color with a handful of emphasis utility classes.
+
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
+
Etiam porta sem malesuada magna mollis euismod.
+
Donec ullamcorper nulla non metus auctor fringilla.
+
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+
+{% highlight html %}
+
...
+
...
+
...
+
...
+{% endhighlight %}
+
+
+
+
Abbreviations
+
Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
+
+
Basic abbreviation
+
For expanded text on long hover of an abbreviation, include the title attribute with the <abbr> element.
+
+
An abbreviation of the word attribute is attr.
+
+{% highlight html %}
+attr
+{% endhighlight %}
+
+
Initialism
+
Add .initialism to an abbreviation for a slightly smaller font-size.
Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.
+
+
+ Twitter, Inc.
+ 795 Folsom Ave, Suite 600
+ San Francisco, CA 94107
+ P: (123) 456-7890
+
+
+ Full Name
+ first.last@example.com
+
+
+{% highlight html %}
+
+ Twitter, Inc.
+ 795 Folsom Ave, Suite 600
+ San Francisco, CA 94107
+ P: (123) 456-7890
+
+
+
+ Full Name
+ first.last@example.com
+
+{% endhighlight %}
+
+
+
+
Blockquotes
+
For quoting blocks of content from another source within your document.
+
+
Default blockquote
+
Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+
+{% highlight html %}
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+{% endhighlight %}
+
+
Blockquote options
+
Style and content changes for simple variations on a standard blockquote.
+
+
Naming a source
+
Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ Someone famous in Source Title
+
+
+{% highlight html %}
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ Someone famous Source Title
+
+{% endhighlight %}
+
+
Alternate displays
+
Use .pull-right for a floated, right-aligned blockquote.
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ Someone famous in Source Title
+
+
+{% highlight html %}
+
+ ...
+
+{% endhighlight %}
+
+
+
+
Lists
+
+
Unordered
+
A list of items in which the order does not explicitly matter.
+
+
+
Lorem ipsum dolor sit amet
+
Consectetur adipiscing elit
+
Integer molestie lorem at massa
+
Facilisis in pretium nisl aliquet
+
Nulla volutpat aliquam velit
+
+
Phasellus iaculis neque
+
Purus sodales ultricies
+
Vestibulum laoreet porttitor sem
+
Ac tristique libero volutpat at
+
+
+
Faucibus porta lacus fringilla vel
+
Aenean sit amet erat nunc
+
Eget porttitor lorem
+
+
+{% highlight html %}
+
+
...
+
+{% endhighlight %}
+
+
Ordered
+
A list of items in which the order does explicitly matter.
+
+
+
Lorem ipsum dolor sit amet
+
Consectetur adipiscing elit
+
Integer molestie lorem at massa
+
Facilisis in pretium nisl aliquet
+
Nulla volutpat aliquam velit
+
Faucibus porta lacus fringilla vel
+
Aenean sit amet erat nunc
+
Eget porttitor lorem
+
+
+{% highlight html %}
+
+
...
+
+{% endhighlight %}
+
+
Unstyled
+
Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
+
+
+
Lorem ipsum dolor sit amet
+
Consectetur adipiscing elit
+
Integer molestie lorem at massa
+
Facilisis in pretium nisl aliquet
+
Nulla volutpat aliquam velit
+
+
Phasellus iaculis neque
+
Purus sodales ultricies
+
Vestibulum laoreet porttitor sem
+
Ac tristique libero volutpat at
+
+
+
Faucibus porta lacus fringilla vel
+
Aenean sit amet erat nunc
+
Eget porttitor lorem
+
+
+{% highlight html %}
+
+
...
+
+{% endhighlight %}
+
+
Inline
+
Place all list items on a single line with inline-block and some light padding.
+
+
+
Lorem ipsum
+
Phasellus iaculis
+
Nulla volutpat
+
+
+{% highlight html %}
+
+
...
+
+{% endhighlight %}
+
+
Description
+
A list of terms with their associated descriptions.
+
+
+
Description lists
+
A description list is perfect for defining terms.
+
Euismod
+
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+
Donec id elit non mi porta gravida at eget metus.
+
Malesuada porta
+
Etiam porta sem malesuada magna mollis euismod.
+
+
+{% highlight html %}
+
+
...
+
...
+
+{% endhighlight %}
+
+
Horizontal description
+
Make terms and descriptions in <dl> line up side-by-side.
+
+
+
Description lists
+
A description list is perfect for defining terms.
+
Euismod
+
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+
Donec id elit non mi porta gravida at eget metus.
+
Malesuada porta
+
Etiam porta sem malesuada magna mollis euismod.
+
Felis euismod semper eget lacinia
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+
+
+{% highlight html %}
+
+
...
+
...
+
+{% endhighlight %}
+
+
Auto-truncating
+
+ Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.
+
+
+
+
+
+
+
+
Code
+
+
+
Inline
+
Wrap inline snippets of code with <code>.
+
+ For example, <section> should be wrapped as inline.
+
+{% highlight html %}
+For example, <section> should be wrapped as inline.
+{% endhighlight %}
+
+
Basic block
+
Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
+
+
<p>Sample text here...</p>
+
+{% highlight html %}
+
<p>Sample text here...</p>
+{% endhighlight %}
+
+
You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.
+
+
+
+
+
+
+
+
Tables
+
+
+
Basic example
+
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
+
+
+
+
+
#
+
First Name
+
Last Name
+
Username
+
+
+
+
+
1
+
Mark
+
Otto
+
@mdo
+
+
+
2
+
Jacob
+
Thornton
+
@fat
+
+
+
3
+
Larry
+
the Bird
+
@twitter
+
+
+
+
+{% highlight html %}
+
+ ...
+
+{% endhighlight %}
+
+
+
Optional classes
+
Add any of the following classes to the .table base class.
+
+
Striped
+
Use .table-striped to add zebra-striping to any table row within the <tbody>.
+
+
Cross-browser compatibility
+
Striped tables are styled via the :nth-child CSS selector, which is not available in IE8.
+
+
+
+
+
+
#
+
First Name
+
Last Name
+
Username
+
+
+
+
+
1
+
Mark
+
Otto
+
@mdo
+
+
+
2
+
Jacob
+
Thornton
+
@fat
+
+
+
3
+
Larry
+
the Bird
+
@twitter
+
+
+
+
+{% highlight html %}
+
+ ...
+
+{% endhighlight %}
+
+
Bordered
+
Add .table-bordered for borders and rounded corners.
+
+
+
+
+
#
+
First Name
+
Last Name
+
Username
+
+
+
+
+
1
+
Mark
+
Otto
+
@mdo
+
+
+
Mark
+
Otto
+
@TwBootstrap
+
+
+
2
+
Jacob
+
Thornton
+
@fat
+
+
+
3
+
Larry the Bird
+
@twitter
+
+
+
+
+{% highlight html %}
+
+ ...
+
+{% endhighlight %}
+
+
Hover rows
+
Add .table-hover to enable a hover state on table rows within a <tbody>.
+
+
+
+
+
#
+
First Name
+
Last Name
+
Username
+
+
+
+
+
1
+
Mark
+
Otto
+
@mdo
+
+
+
2
+
Jacob
+
Thornton
+
@fat
+
+
+
3
+
Larry the Bird
+
@twitter
+
+
+
+
+{% highlight html %}
+
+ ...
+
+{% endhighlight %}
+
+
+
Condensed
+
Add .table-condensed to make tables more compact by cutting cell padding in half.
+
+
+
+
+
#
+
First Name
+
Last Name
+
Username
+
+
+
+
+
1
+
Mark
+
Otto
+
@mdo
+
+
+
2
+
Jacob
+
Thornton
+
@fat
+
+
+
3
+
Larry the Bird
+
@twitter
+
+
+
+
+{% highlight html %}
+
+ ...
+
+{% endhighlight %}
+
+
+
+
Optional row classes
+
Use contextual classes to color table rows.
+
+
+
+
+
+
+
+
Class
+
Description
+
+
+
+
+
+ .success
+
+
Indicates a successful or positive action.
+
+
+
+ .danger
+
+
Indicates a dangerous or potentially negative action.
+
+
+
+ .warning
+
+
Indicates a warning that might need attention.
+
+
+
+ .info
+
+
Used as an alternative to the default styles.
+
+
+
+
+
+
+
+
#
+
Product
+
Payment Taken
+
Status
+
+
+
+
+
1
+
TB - Monthly
+
01/04/2012
+
Approved
+
+
+
2
+
TB - Monthly
+
02/04/2012
+
Declined
+
+
+
3
+
TB - Monthly
+
03/04/2012
+
Pending
+
+
+
+
+{% highlight html %}
+...
+
+
1
+
TB - Monthly
+
01/04/2012
+
Approved
+
+...
+{% endhighlight %}
+
+
+
+
+
+
+
+
+
Forms
+
+
+
Basic example
+
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements are set to width: 100%; by default.
Included with Bootstrap are optional form layouts for common use cases.
+
+
Inline form
+
Add .form-inline for left-aligned and inline-block controls for a compact layout.
+
+
Requires custom widths
+
Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
+
+
+{% highlight html %}
+
+{% endhighlight %}
+
+
Horizontal form
+
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.
Examples of standard form controls supported in an example form layout.
+
+
Inputs
+
Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
+
+
Type declaration required
+
Inputs will only be fully styled if their type is properly declared.
+
+
+{% highlight html %}
+
+{% endhighlight %}
+
+
Textarea
+
Form control which supports multiple lines of text. Change rows attribute as necessary.
+
+{% highlight html %}
+
+{% endhighlight %}
+
+
Checkboxes and radios
+
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
+
Default (stacked)
+
+{% highlight html %}
+
+
+
+
+
+
+
+{% endhighlight %}
+
+
Inline checkboxes
+
Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.
Provide feedback to users or visitors with basic feedback states on form controls and labels.
+
+
Input focus
+
We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.
+
+{% highlight html %}
+
+{% endhighlight %}
+
+
Invalid inputs
+
Style inputs via default browser functionality. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.
+
+
+
Cross-browser compatibility
+
Invalid inputs are styled via the :invalid CSS selector, which is not supported by Internet Explorer 9 and below.
Add the disabled attribute on an input to prevent user input and trigger a slightly different look.
+
+{% highlight html %}
+
+{% endhighlight %}
+
+
Disabled fieldsets
+
Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.
+
+
+
Link functionality of <a> not impacted
+
This class will only change the appearance of <a class="btn btn-default"> buttons, not their functionality. Use custom JavaScript to disable links here.
+
+
+
+
Cross-browser compatibility
+
While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <disabled> attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.
Bootstrap includes validation styles for error, warning, info, and success messages. To use:
+
+
Add .has-warning, .has-error, or .has-success to the parent element
+
Add .input-with-feedback to the field(s) in question
+
+
Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.
+
+
+{% highlight html %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+
+
+
Extending form controls
+
Adding on top of existing browser controls, Bootstrap includes other useful form components.
+
+
Input groups
+
Add text or buttons before, after, or on both sides of any text-based input. Use .input-group with a .add-on to prepend or append elements to an <input>.
+
+
+
Cross-browser compatibility
+
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
+
+
+
+{% highlight html %}
+
+ @
+
+
+
+
+
+ .00
+
+
+
+ $
+
+ .00
+
+{% endhighlight %}
+
+
Optional sizes
+
Add the relative form sizing classes to the `.input-group-addon`.
+
+{% highlight html %}
+
+ @
+
+
+
+
+ @
+
+
+
+
+ @
+
+
+{% endhighlight %}
+
+
Buttons instead of text
+
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
+
+{% highlight html %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+
Form actions
+
End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.
+
+{% highlight html %}
+
+
+
+
+{% endhighlight %}
+
+
Help text
+
Block level help text for form controls.
+
+{% highlight html %}
+A longer block of help text that breaks onto a new line and may extend beyond one line.
+{% endhighlight %}
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
Button options
+
Use any of the available button classes to quickly create a styled button.
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
+
+
Responsive classes
+
+
+
+
+
Class
+
Phones 767px and below
+
Tablets 979px to 768px
+
Desktops Default
+
+
+
+
+
.visible-sm
+
Visible
+
Hidden
+
Hidden
+
+
+
.visible-md
+
Hidden
+
Visible
+
Hidden
+
+
+
.visible-lg
+
Hidden
+
Hidden
+
Visible
+
+
+
.hidden-sm
+
Hidden
+
Visible
+
Visible
+
+
+
.hidden-md
+
Visible
+
Hidden
+
Visible
+
+
+
.hidden-lg
+
Visible
+
Visible
+
Hidden
+
+
+
+
+
+
Print classes
+
+
+
+
Class
+
Browser
+
Print
+
+
+
+
+
.visible-print
+
Hidden
+
Visible
+
+
+
.hidden-print
+
Visible
+
Hidden
+
+
+
+
+
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. Responsive utilities should not be used with tables, and as such are not supported.
+
+
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 class is hidden in your current viewport.
Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.
+
+
+
diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index cd6855aab5..75e0838e39 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -327,19 +327,19 @@ body {
Heading
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.