<pclass="lead">Learn how to quickly start a new project with Bootstrap with downloads, basic templates and examples, and more.</p>
{% elsif page.url contains "layout" %}
<h1>Layout</h1>
<pclass="lead">Grid system, containers, media object, and responsive utilities for organization pages.</p>
{% elsif page.url contains "content" %}
<h1>Components</h1>
<pclass="lead">
Styles and patterns for common HTML elements like typography, tables, forms, and more.
</p>
{% elsif page.url contains "components" %}
<h1>Components</h1>
<pclass="lead">
Custom design patterns built as reusable components, including dropdowns, input groups, navigation, alerts, and more.
</p>
{% elsif page.url contains "javascript" %}
<h1>JavaScript</h1>
<pclass="lead">Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p>
{% elsif page.url contains "examples" %}
<h1>Examples</h1>
<pclass="lead">Build on the basic template above with Bootstrap's many components. Customize and adapt Bootstrap to suit your individual project's needs.</p>
{% elsif page.url contains "about" %}
<h1>About</h1>
<pclass="lead">Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.</p>
{% elsif page.url contains "migration" %}
<h1>Migration</h1>
<pclass="lead">Bootstrap 4 is not backwards compatible with v3.x.x. Use this section as a general guide to upgrading from v3.x.x to v4.0.0.</p>
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).
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
{% example html %}
{% example html %}
<divclass="page-header">
<divclass="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
<h1>Example page header <small>Subtext for header</small></h1>
Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.
Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each form's contents and structure below.
Quickly add Bootstrap to your project via the [Bootstrap CDN](http://bootstrapcdn.com), graciously provided by the [MaxCDN](http://www.maxcdn.com/) folks. Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets.
Quickly add Bootstrap to your project via the [Bootstrap CDN](http://bootstrapcdn.com), graciously provided by the [MaxCDN](http://www.maxcdn.com/) folks.
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets.
Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.
Bootstrap is built to work best with the latest techniques. As such, older desktop and mobile browsers may display differently, but should remain fully functional.
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose from one of two containers—fixed width or fluid width—to use in your projects.
Bootstrap requires a containing element to wrap site contents and house our grid system. Choose from the fixed or fluid width variation.
Containers *can* be nested, but be aware that most layouts don't require it.
Use `.container` for a responsive fixed width container. This will center content withing the viewport and apply the appropriate `width` for a given device size. **Containers *can* be nested, but be aware that most layouts don't require it.**
Use `.container` for a responsive fixed width container. This will center content withing the viewport and apply the appropriate `width` for a given device size.
Bootstrap includes a powerful grid system for building layouts of all shapes and sizes. It's based on a 12 column layout and features multiple tiers for different device sizes. Put it to work with our predefined classes or semantic mixins. Plus, it's mobile-first!
Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes based on a 12 column layout.
There are multiple tiers for different device sizes, available via our predefined classes or semantic mixins.
Since Bootstrap is designed to be mobile-first, we employ media queries in our CSS to create responsive pages and components. Media queries allow you to group rulesets by a handful of parameters, most notably viewport dimensions, to gracefully scale content across devices.
Since Bootstrap is designed to be mobile-first, we employ media queries in our CSS to create responsive pages and components.
Bootstrap mainly uses the following media query ranges in our source Sass files for key breakpoints in our layout, grid system, and components.
Media queries allow you to group rulesets by a handful of parameters, most notably viewport dimensions, to gracefully scale content across devices. Bootstrap mainly uses the following media query ranges in our source Sass files for key breakpoints in our layout, grid system, and components.
{% highlight scss %}
{% highlight scss %}
/* Extra small devices (portrait phones, less than ???px) */
/* Extra small devices (portrait phones, less than ???px) */
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.
Abstract object styles for building custom components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
