From 5f701f101395a59d0aa98b074b457a9745a76184 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 26 Apr 2016 15:00:03 -0700 Subject: [PATCH] carbon update their ad code, so we have to overhaul our css to support new JS embeds --- 2.1.0/assets/css/docs.css | 97 +++++++++++++------------------- 2.1.0/base-css.html | 2 +- 2.1.0/components.html | 2 +- 2.1.0/customize.html | 2 +- 2.1.0/extend.html | 2 +- 2.1.0/getting-started.html | 2 +- 2.1.0/index.html | 2 +- 2.1.0/javascript.html | 2 +- 2.1.0/scaffolding.html | 2 +- 2.1.1/assets/css/docs.css | 111 ++++++++++++++++--------------------- 2.1.1/base-css.html | 2 +- 2.1.1/components.html | 2 +- 2.1.1/customize.html | 2 +- 2.1.1/extend.html | 2 +- 2.1.1/getting-started.html | 2 +- 2.1.1/index.html | 2 +- 2.1.1/javascript.html | 2 +- 2.1.1/scaffolding.html | 2 +- 2.2.0/assets/css/docs.css | 96 +++++++++++++------------------- 2.2.0/base-css.html | 2 +- 2.2.0/components.html | 2 +- 2.2.0/customize.html | 2 +- 2.2.0/extend.html | 2 +- 2.2.0/getting-started.html | 2 +- 2.2.0/index.html | 2 +- 2.2.0/javascript.html | 2 +- 2.2.0/scaffolding.html | 2 +- 2.2.1/assets/css/docs.css | 96 +++++++++++++------------------- 2.2.1/base-css.html | 2 +- 2.2.1/components.html | 2 +- 2.2.1/customize.html | 2 +- 2.2.1/extend.html | 2 +- 2.2.1/getting-started.html | 2 +- 2.2.1/index.html | 2 +- 2.2.1/javascript.html | 2 +- 2.2.1/scaffolding.html | 2 +- 2.2.2/assets/css/docs.css | 96 +++++++++++++------------------- 2.2.2/base-css.html | 2 +- 2.2.2/components.html | 2 +- 2.2.2/customize.html | 2 +- 2.2.2/extend.html | 2 +- 2.2.2/getting-started.html | 2 +- 2.2.2/index.html | 2 +- 2.2.2/javascript.html | 2 +- 2.2.2/scaffolding.html | 2 +- 2.3.0/assets/css/docs.css | 96 +++++++++++++------------------- 2.3.0/base-css.html | 2 +- 2.3.0/components.html | 2 +- 2.3.0/customize.html | 2 +- 2.3.0/extend.html | 2 +- 2.3.0/getting-started.html | 2 +- 2.3.0/index.html | 2 +- 2.3.0/javascript.html | 2 +- 2.3.0/scaffolding.html | 2 +- 2.3.1/assets/css/docs.css | 96 +++++++++++++------------------- 2.3.1/base-css.html | 2 +- 2.3.1/components.html | 2 +- 2.3.1/customize.html | 2 +- 2.3.1/extend.html | 2 +- 2.3.1/getting-started.html | 2 +- 2.3.1/index.html | 2 +- 2.3.1/javascript.html | 2 +- 2.3.1/scaffolding.html | 2 +- 2.3.2/assets/css/docs.css | 96 +++++++++++++------------------- 2.3.2/base-css.html | 2 +- 2.3.2/components.html | 2 +- 2.3.2/customize.html | 2 +- 2.3.2/getting-started.html | 2 +- 2.3.2/index.html | 2 +- 2.3.2/javascript.html | 2 +- 2.3.2/scaffolding.html | 2 +- about/index.html | 2 +- assets/css/docs.min.css | 53 +++++++++++++++++- components/index.html | 2 +- css/index.html | 2 +- customize/index.html | 2 +- getting-started/index.html | 2 +- index.html | 2 +- javascript/index.html | 2 +- migration/index.html | 2 +- 80 files changed, 443 insertions(+), 536 deletions(-) diff --git a/2.1.0/assets/css/docs.css b/2.1.0/assets/css/docs.css index aa598c5cac..d8c636502f 100755 --- a/2.1.0/assets/css/docs.css +++ b/2.1.0/assets/css/docs.css @@ -686,80 +686,61 @@ form.bs-docs-example { /* Ads in headers -------------------------------------------------- */ -.subhead h1, -.subhead .lead { - margin-right: 340px; +@media (min-width: 992px) { + .subhead h1, + .subhead .lead { + margin-right: 350px; + } } -.carbonad { - position: absolute; - top: 0; - right: 0; - margin-top: 0 !important; - padding: 15px; - height: auto !important; - overflow: hidden; /* clearfix */ - font-size: 13px !important; - line-height: 16px !important; - background: #222 !important; /* reset image and color in one line */ - background: rgba(0,0,0,.5) !important; - border: 0 !important; - border-radius: 4px; +#carbonads { + display: block; + overflow: hidden; + margin: 40px -20px -40px; + padding: 15px 15px 15px 160px; + font-size: 13px; + line-height: 1.5; + text-align: left; + background-color: rgba(0,0,0,.5); box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); } -.carbonad-img { - margin: 0 !important; -} -.carbonad-text, -.carbonad-tag, -.carbonad-tag a { - color: #fff !important; -} -.carbonad-text, -.carbonad-tag { - float: none !important; - display: block !important; - width: auto !important; - height: auto !important; - margin-left: 145px !important; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; -} -.carbonad-text { - padding-top: 0 !important; -} -.carbonad-tag { - text-align: left !important; + +#carbonads a { + color: #fff; } -/* Ads on homepage */ -.masthead .carbonad { - position: static; - margin: 30px auto 0 !important; - text-align: left !important; +.carbon-img { + float: left; + margin-left: -145px; } -@media (max-width: 980px) { - .carbonad { - position: static; - width: auto !important; - margin-top: 30px !important; +.carbon-poweredby { + display: block; + color: #cdbfe3 !important; +} + +@media (min-width: 480px) { + #carbonads { + max-width: 155px; /* 330 - padding */ + margin: 50px auto 0; + border-radius: 4px; } } -@media (max-width: 767px) { - .carbonad { +@media (min-width: 992px) { + #carbonads { + position: absolute; + top: 0; + right: 15px; + margin-top: 0; + } + .masthead #carbonads { position: static; - width: auto !important; - margin: 40px -20px -40px !important; - padding: 20px !important; - overflow: hidden; /* clearfix */ - border-radius: 0; + margin: 30px auto 0; } } - - /* Responsive docs -------------------------------------------------- */ diff --git a/2.1.0/base-css.html b/2.1.0/base-css.html index 9f43f39081..650b2358fe 100755 --- a/2.1.0/base-css.html +++ b/2.1.0/base-css.html @@ -83,7 +83,7 @@

Base CSS

Fundamental HTML elements styled and enhanced with extensible classes.

-
+
diff --git a/2.1.0/components.html b/2.1.0/components.html index c757df2a25..2dfbbd67f2 100755 --- a/2.1.0/components.html +++ b/2.1.0/components.html @@ -83,7 +83,7 @@

Components

Dozens of reusable components built to provide navigation, alerts, popovers, and more.

-
+
diff --git a/2.1.0/customize.html b/2.1.0/customize.html index a8eed4c869..5539655875 100755 --- a/2.1.0/customize.html +++ b/2.1.0/customize.html @@ -83,7 +83,7 @@

Customize and download

Download Bootstrap or customize variables, components, javascript plugins, and more.

-
+
diff --git a/2.1.0/extend.html b/2.1.0/extend.html index f99cbda0e0..f469d12af0 100755 --- a/2.1.0/extend.html +++ b/2.1.0/extend.html @@ -83,7 +83,7 @@

Extending Bootstrap

Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

-
+
diff --git a/2.1.0/getting-started.html b/2.1.0/getting-started.html index 4a3b0d2d80..c25454ebd6 100755 --- a/2.1.0/getting-started.html +++ b/2.1.0/getting-started.html @@ -83,7 +83,7 @@

Getting started

Overview of the project, it's contents, and how to get started with a simple template.

-
+
diff --git a/2.1.0/index.html b/2.1.0/index.html index 43e1f56375..ad254398b2 100755 --- a/2.1.0/index.html +++ b/2.1.0/index.html @@ -87,7 +87,7 @@
  • Extend
  • Version 2.1.0
    • -
    +
    diff --git a/2.1.0/javascript.html b/2.1.0/javascript.html index 02f1586fc8..6f3208e275 100755 --- a/2.1.0/javascript.html +++ b/2.1.0/javascript.html @@ -83,7 +83,7 @@

    JavaScript for Bootstrap

    Bring Bootstrap's components to life—now with 13 custom jQuery plugins. -

    +
    diff --git a/2.1.0/scaffolding.html b/2.1.0/scaffolding.html index 2f607ab7f8..7f3edcb96d 100755 --- a/2.1.0/scaffolding.html +++ b/2.1.0/scaffolding.html @@ -83,7 +83,7 @@

    Scaffolding

    Bootstrap is built on responsive 12-column grids, layouts, and components.

    -
    +
    diff --git a/2.1.1/assets/css/docs.css b/2.1.1/assets/css/docs.css index cc485736c5..958fe05fd7 100755 --- a/2.1.1/assets/css/docs.css +++ b/2.1.1/assets/css/docs.css @@ -670,74 +670,57 @@ form.bs-docs-example { /* Ads in headers -------------------------------------------------- */ -.subhead h1, -.subhead .lead { - margin-right: 340px; -} - -.carbonad { - position: absolute; - top: 0; - right: 0; - margin-top: 0 !important; - padding: 15px; - height: auto !important; - overflow: hidden; /* clearfix */ - font-size: 13px !important; - line-height: 16px !important; - background: #222 !important; /* reset image and color in one line */ - background: rgba(0,0,0,.5) !important; - border: 0 !important; - border-radius: 4px; - box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); -} -.carbonad-img { - margin: 0 !important; -} -.carbonad-text, -.carbonad-tag, -.carbonad-tag a { - color: #fff !important; -} -.carbonad-text, -.carbonad-tag { - float: none !important; - display: block !important; - width: auto !important; - height: auto !important; - margin-left: 145px !important; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; -} -.carbonad-text { - padding-top: 0 !important; -} -.carbonad-tag { - text-align: left !important; -} - -/* Ads on homepage */ -.masthead .carbonad { - position: static; - margin: 30px auto 0 !important; - text-align: left !important; -} - -@media (max-width: 980px) { - .carbonad { - position: static; - width: auto !important; - margin-top: 30px !important; +@media (min-width: 992px) { + .subhead h1, + .subhead .lead { + margin-right: 350px; } } -@media (max-width: 767px) { - .carbonad { +#carbonads { + display: block; + overflow: hidden; + margin: 40px -20px -40px; + padding: 15px 15px 15px 160px; + font-size: 13px; + line-height: 1.5; + text-align: left; + background-color: rgba(0,0,0,.5); + box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); +} + +#carbonads a { + color: #fff; +} + +.carbon-img { + float: left; + margin-left: -145px; +} + +.carbon-poweredby { + display: block; + color: #cdbfe3 !important; +} + +@media (min-width: 480px) { + #carbonads { + max-width: 155px; /* 330 - padding */ + margin: 50px auto 0; + border-radius: 4px; + } +} + +@media (min-width: 992px) { + #carbonads { + position: absolute; + top: 0; + right: 15px; + margin-top: 0; + } + .masthead #carbonads { position: static; - width: auto !important; - margin: 40px -20px -40px !important; - padding: 20px !important; - overflow: hidden; /* clearfix */ - border-radius: 0; + margin: 30px auto 0; } } diff --git a/2.1.1/base-css.html b/2.1.1/base-css.html index b079068c80..d9e2c91c3a 100755 --- a/2.1.1/base-css.html +++ b/2.1.1/base-css.html @@ -83,7 +83,7 @@

    Base CSS

    Fundamental HTML elements styled and enhanced with extensible classes.

    -
    +
    diff --git a/2.1.1/components.html b/2.1.1/components.html index d4d4ee2a4e..af3fe1c779 100755 --- a/2.1.1/components.html +++ b/2.1.1/components.html @@ -83,7 +83,7 @@

    Components

    Dozens of reusable components built to provide navigation, alerts, popovers, and more.

    -
    +
    diff --git a/2.1.1/customize.html b/2.1.1/customize.html index a8eed4c869..5539655875 100755 --- a/2.1.1/customize.html +++ b/2.1.1/customize.html @@ -83,7 +83,7 @@

    Customize and download

    Download Bootstrap or customize variables, components, javascript plugins, and more.

    -
    +
    diff --git a/2.1.1/extend.html b/2.1.1/extend.html index f99cbda0e0..f469d12af0 100755 --- a/2.1.1/extend.html +++ b/2.1.1/extend.html @@ -83,7 +83,7 @@

    Extending Bootstrap

    Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

    -
    +
    diff --git a/2.1.1/getting-started.html b/2.1.1/getting-started.html index 6e32942f3b..5f2a01900d 100755 --- a/2.1.1/getting-started.html +++ b/2.1.1/getting-started.html @@ -83,7 +83,7 @@

    Getting started

    Overview of the project, its contents, and how to get started with a simple template.

    -
    +
    diff --git a/2.1.1/index.html b/2.1.1/index.html index 7d080259fe..bf7ac96fd4 100755 --- a/2.1.1/index.html +++ b/2.1.1/index.html @@ -87,7 +87,7 @@
  • Extend
  • Version 2.1.1
    • -
    +
    diff --git a/2.1.1/javascript.html b/2.1.1/javascript.html index 5851ed3d6f..55c309d8c6 100755 --- a/2.1.1/javascript.html +++ b/2.1.1/javascript.html @@ -83,7 +83,7 @@

    JavaScript for Bootstrap

    Bring Bootstrap's components to life—now with 13 custom jQuery plugins. -

    +
    diff --git a/2.1.1/scaffolding.html b/2.1.1/scaffolding.html index ffec55dca7..a1356e12a6 100755 --- a/2.1.1/scaffolding.html +++ b/2.1.1/scaffolding.html @@ -83,7 +83,7 @@

    Scaffolding

    Bootstrap is built on responsive 12-column grids, layouts, and components.

    -
    +
    diff --git a/2.2.0/assets/css/docs.css b/2.2.0/assets/css/docs.css index 1333eb41d9..adbfd2f995 100755 --- a/2.2.0/assets/css/docs.css +++ b/2.2.0/assets/css/docs.css @@ -673,80 +673,62 @@ form.bs-docs-example { /* Ads in headers -------------------------------------------------- */ -.subhead h1, -.subhead .lead { - margin-right: 340px; +@media (min-width: 992px) { + .subhead h1, + .subhead .lead { + margin-right: 350px; + } } -.carbonad { - position: absolute; - top: 0; - right: 0; - margin-top: 0 !important; - padding: 15px; - height: auto !important; - overflow: hidden; /* clearfix */ - font-size: 13px !important; - line-height: 16px !important; - background: #222 !important; /* reset image and color in one line */ - background: rgba(0,0,0,.5) !important; - border: 0 !important; - border-radius: 4px; +#carbonads { + display: block; + overflow: hidden; + margin: 40px -20px -40px; + padding: 15px 15px 15px 160px; + font-size: 13px; + line-height: 1.5; + text-align: left; + background-color: rgba(0,0,0,.5); box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); } -.carbonad-img { - margin: 0 !important; -} -.carbonad-text, -.carbonad-tag, -.carbonad-tag a { - color: #fff !important; -} -.carbonad-text, -.carbonad-tag { - float: none !important; - display: block !important; - width: auto !important; - height: auto !important; - margin-left: 145px !important; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; -} -.carbonad-text { - padding-top: 0 !important; -} -.carbonad-tag { - text-align: left !important; + +#carbonads a { + color: #fff; } -/* Ads on homepage */ -.masthead .carbonad { - position: static; - margin: 30px auto 0 !important; - text-align: left !important; +.carbon-img { + float: left; + margin-left: -145px; } -@media (max-width: 980px) { - .carbonad { - position: static; - width: auto !important; - margin-top: 30px !important; +.carbon-poweredby { + display: block; + color: #cdbfe3 !important; +} + +@media (min-width: 480px) { + #carbonads { + max-width: 155px; /* 330 - padding */ + margin: 50px auto 0; + border-radius: 4px; } } -@media (max-width: 767px) { - .carbonad { +@media (min-width: 992px) { + #carbonads { + position: absolute; + top: 0; + right: 15px; + margin-top: 0; + } + .masthead #carbonads { position: static; - width: auto !important; - margin: 40px -20px -40px !important; - padding: 20px !important; - overflow: hidden; /* clearfix */ - border-radius: 0; + margin: 30px auto 0; } } - /* Responsive docs -------------------------------------------------- */ diff --git a/2.2.0/base-css.html b/2.2.0/base-css.html index a060f89ac5..eb5afb5cae 100755 --- a/2.2.0/base-css.html +++ b/2.2.0/base-css.html @@ -83,7 +83,7 @@

    Base CSS

    Fundamental HTML elements styled and enhanced with extensible classes.

    -
    +
    diff --git a/2.2.0/components.html b/2.2.0/components.html index 20c31ad7ec..e41baacac2 100755 --- a/2.2.0/components.html +++ b/2.2.0/components.html @@ -83,7 +83,7 @@

    Components

    Dozens of reusable components built to provide navigation, alerts, popovers, and more.

    -
    +
    diff --git a/2.2.0/customize.html b/2.2.0/customize.html index 70aaf39b66..5325f415fc 100755 --- a/2.2.0/customize.html +++ b/2.2.0/customize.html @@ -83,7 +83,7 @@

    Customize and download

    Download Bootstrap or customize variables, components, JavaScript plugins, and more.

    -
    +
    diff --git a/2.2.0/extend.html b/2.2.0/extend.html index 8fc855ee36..1a891bc2ae 100755 --- a/2.2.0/extend.html +++ b/2.2.0/extend.html @@ -83,7 +83,7 @@

    Extending Bootstrap

    Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

    -
    +
    diff --git a/2.2.0/getting-started.html b/2.2.0/getting-started.html index d5bbd2e17f..5f8cb8f1c1 100755 --- a/2.2.0/getting-started.html +++ b/2.2.0/getting-started.html @@ -83,7 +83,7 @@

    Getting started

    Overview of the project, its contents, and how to get started with a simple template.

    -
    +
    diff --git a/2.2.0/index.html b/2.2.0/index.html index 7f4b7c8054..1b87e91af3 100755 --- a/2.2.0/index.html +++ b/2.2.0/index.html @@ -98,7 +98,7 @@ Version 2.2.0 -
    +
    diff --git a/2.2.0/javascript.html b/2.2.0/javascript.html index 81b8a57670..3104f9c860 100755 --- a/2.2.0/javascript.html +++ b/2.2.0/javascript.html @@ -83,7 +83,7 @@

    JavaScript

    Bring Bootstrap's components to life—now with 13 custom jQuery plugins. -

    +
    diff --git a/2.2.0/scaffolding.html b/2.2.0/scaffolding.html index 7c985f4c23..d0338b7d25 100755 --- a/2.2.0/scaffolding.html +++ b/2.2.0/scaffolding.html @@ -83,7 +83,7 @@

    Scaffolding

    Bootstrap is built on responsive 12-column grids, layouts, and components.

    -
    +
    diff --git a/2.2.1/assets/css/docs.css b/2.2.1/assets/css/docs.css index 1333eb41d9..adbfd2f995 100755 --- a/2.2.1/assets/css/docs.css +++ b/2.2.1/assets/css/docs.css @@ -673,80 +673,62 @@ form.bs-docs-example { /* Ads in headers -------------------------------------------------- */ -.subhead h1, -.subhead .lead { - margin-right: 340px; +@media (min-width: 992px) { + .subhead h1, + .subhead .lead { + margin-right: 350px; + } } -.carbonad { - position: absolute; - top: 0; - right: 0; - margin-top: 0 !important; - padding: 15px; - height: auto !important; - overflow: hidden; /* clearfix */ - font-size: 13px !important; - line-height: 16px !important; - background: #222 !important; /* reset image and color in one line */ - background: rgba(0,0,0,.5) !important; - border: 0 !important; - border-radius: 4px; +#carbonads { + display: block; + overflow: hidden; + margin: 40px -20px -40px; + padding: 15px 15px 15px 160px; + font-size: 13px; + line-height: 1.5; + text-align: left; + background-color: rgba(0,0,0,.5); box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); } -.carbonad-img { - margin: 0 !important; -} -.carbonad-text, -.carbonad-tag, -.carbonad-tag a { - color: #fff !important; -} -.carbonad-text, -.carbonad-tag { - float: none !important; - display: block !important; - width: auto !important; - height: auto !important; - margin-left: 145px !important; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; -} -.carbonad-text { - padding-top: 0 !important; -} -.carbonad-tag { - text-align: left !important; + +#carbonads a { + color: #fff; } -/* Ads on homepage */ -.masthead .carbonad { - position: static; - margin: 30px auto 0 !important; - text-align: left !important; +.carbon-img { + float: left; + margin-left: -145px; } -@media (max-width: 980px) { - .carbonad { - position: static; - width: auto !important; - margin-top: 30px !important; +.carbon-poweredby { + display: block; + color: #cdbfe3 !important; +} + +@media (min-width: 480px) { + #carbonads { + max-width: 155px; /* 330 - padding */ + margin: 50px auto 0; + border-radius: 4px; } } -@media (max-width: 767px) { - .carbonad { +@media (min-width: 992px) { + #carbonads { + position: absolute; + top: 0; + right: 15px; + margin-top: 0; + } + .masthead #carbonads { position: static; - width: auto !important; - margin: 40px -20px -40px !important; - padding: 20px !important; - overflow: hidden; /* clearfix */ - border-radius: 0; + margin: 30px auto 0; } } - /* Responsive docs -------------------------------------------------- */ diff --git a/2.2.1/base-css.html b/2.2.1/base-css.html index a060f89ac5..eb5afb5cae 100755 --- a/2.2.1/base-css.html +++ b/2.2.1/base-css.html @@ -83,7 +83,7 @@

    Base CSS

    Fundamental HTML elements styled and enhanced with extensible classes.

    -
    +
    diff --git a/2.2.1/components.html b/2.2.1/components.html index 20c31ad7ec..e41baacac2 100755 --- a/2.2.1/components.html +++ b/2.2.1/components.html @@ -83,7 +83,7 @@

    Components

    Dozens of reusable components built to provide navigation, alerts, popovers, and more.

    -
    +
    diff --git a/2.2.1/customize.html b/2.2.1/customize.html index 70aaf39b66..5325f415fc 100755 --- a/2.2.1/customize.html +++ b/2.2.1/customize.html @@ -83,7 +83,7 @@

    Customize and download

    Download Bootstrap or customize variables, components, JavaScript plugins, and more.

    -
    +
    diff --git a/2.2.1/extend.html b/2.2.1/extend.html index 8fc855ee36..1a891bc2ae 100755 --- a/2.2.1/extend.html +++ b/2.2.1/extend.html @@ -83,7 +83,7 @@

    Extending Bootstrap

    Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

    -
    +
    diff --git a/2.2.1/getting-started.html b/2.2.1/getting-started.html index d5bbd2e17f..5f8cb8f1c1 100755 --- a/2.2.1/getting-started.html +++ b/2.2.1/getting-started.html @@ -83,7 +83,7 @@

    Getting started

    Overview of the project, its contents, and how to get started with a simple template.

    -
    +
    diff --git a/2.2.1/index.html b/2.2.1/index.html index 88cff4e768..d80aadb9e2 100755 --- a/2.2.1/index.html +++ b/2.2.1/index.html @@ -98,7 +98,7 @@ Version 2.2.1 -
    +
    diff --git a/2.2.1/javascript.html b/2.2.1/javascript.html index 81b8a57670..3104f9c860 100755 --- a/2.2.1/javascript.html +++ b/2.2.1/javascript.html @@ -83,7 +83,7 @@

    JavaScript

    Bring Bootstrap's components to life—now with 13 custom jQuery plugins. -

    +
    diff --git a/2.2.1/scaffolding.html b/2.2.1/scaffolding.html index 7c985f4c23..d0338b7d25 100755 --- a/2.2.1/scaffolding.html +++ b/2.2.1/scaffolding.html @@ -83,7 +83,7 @@

    Scaffolding

    Bootstrap is built on responsive 12-column grids, layouts, and components.

    -
    +
    diff --git a/2.2.2/assets/css/docs.css b/2.2.2/assets/css/docs.css index 312b9998bb..e79c935477 100755 --- a/2.2.2/assets/css/docs.css +++ b/2.2.2/assets/css/docs.css @@ -706,80 +706,62 @@ form.bs-docs-example { /* Ads in headers -------------------------------------------------- */ -.subhead h1, -.subhead .lead { - margin-right: 340px; +@media (min-width: 992px) { + .subhead h1, + .subhead .lead { + margin-right: 350px; + } } -.carbonad { - position: absolute; - top: 0; - right: 0; - margin-top: 0 !important; - padding: 15px; - height: auto !important; - overflow: hidden; /* clearfix */ - font-size: 13px !important; - line-height: 16px !important; - background: #222 !important; /* reset image and color in one line */ - background: rgba(0,0,0,.5) !important; - border: 0 !important; - border-radius: 4px; +#carbonads { + display: block; + overflow: hidden; + margin: 40px -20px -40px; + padding: 15px 15px 15px 160px; + font-size: 13px; + line-height: 1.5; + text-align: left; + background-color: rgba(0,0,0,.5); box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); } -.carbonad-img { - margin: 0 !important; -} -.carbonad-text, -.carbonad-tag, -.carbonad-tag a { - color: #fff !important; -} -.carbonad-text, -.carbonad-tag { - float: none !important; - display: block !important; - width: auto !important; - height: auto !important; - margin-left: 145px !important; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; -} -.carbonad-text { - padding-top: 0 !important; -} -.carbonad-tag { - text-align: left !important; + +#carbonads a { + color: #fff; } -/* Ads on homepage */ -.masthead .carbonad { - position: static; - margin: 30px auto 0 !important; - text-align: left !important; +.carbon-img { + float: left; + margin-left: -145px; } -@media (max-width: 980px) { - .carbonad { - position: static; - width: auto !important; - margin-top: 30px !important; +.carbon-poweredby { + display: block; + color: #cdbfe3 !important; +} + +@media (min-width: 480px) { + #carbonads { + max-width: 155px; /* 330 - padding */ + margin: 50px auto 0; + border-radius: 4px; } } -@media (max-width: 767px) { - .carbonad { +@media (min-width: 992px) { + #carbonads { + position: absolute; + top: 0; + right: 15px; + margin-top: 0; + } + .masthead #carbonads { position: static; - width: auto !important; - margin: 40px -20px -40px !important; - padding: 20px !important; - overflow: hidden; /* clearfix */ - border-radius: 0; + margin: 30px auto 0; } } - /* Responsive docs -------------------------------------------------- */ diff --git a/2.2.2/base-css.html b/2.2.2/base-css.html index 151351418d..ddc7836090 100755 --- a/2.2.2/base-css.html +++ b/2.2.2/base-css.html @@ -83,7 +83,7 @@

    Base CSS

    Fundamental HTML elements styled and enhanced with extensible classes.

    -
    + diff --git a/2.2.2/components.html b/2.2.2/components.html index eca6e6b1bf..9cb3cbfe3c 100755 --- a/2.2.2/components.html +++ b/2.2.2/components.html @@ -83,7 +83,7 @@

    Components

    Dozens of reusable components built to provide navigation, alerts, popovers, and more.

    -
    +
    diff --git a/2.2.2/customize.html b/2.2.2/customize.html index 5c00489eff..8623c9fc55 100755 --- a/2.2.2/customize.html +++ b/2.2.2/customize.html @@ -83,7 +83,7 @@

    Customize and download

    Download Bootstrap or customize variables, components, JavaScript plugins, and more.

    -
    +
    diff --git a/2.2.2/extend.html b/2.2.2/extend.html index d6d784c2cb..da65133cd9 100755 --- a/2.2.2/extend.html +++ b/2.2.2/extend.html @@ -83,7 +83,7 @@

    Extending Bootstrap

    Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

    -
    +
    diff --git a/2.2.2/getting-started.html b/2.2.2/getting-started.html index 2138f3e9ed..bc12d9aa1c 100755 --- a/2.2.2/getting-started.html +++ b/2.2.2/getting-started.html @@ -83,7 +83,7 @@

    Getting started

    Overview of the project, its contents, and how to get started with a simple template.

    -
    +
    diff --git a/2.2.2/index.html b/2.2.2/index.html index 687797002a..4e2b2aa1ef 100755 --- a/2.2.2/index.html +++ b/2.2.2/index.html @@ -97,7 +97,7 @@
  • Version 2.2.2
    • -
    +
    diff --git a/2.2.2/javascript.html b/2.2.2/javascript.html index 73077537d6..8b41a43c62 100755 --- a/2.2.2/javascript.html +++ b/2.2.2/javascript.html @@ -83,7 +83,7 @@

    JavaScript

    Bring Bootstrap's components to life—now with 13 custom jQuery plugins. -

    +
    diff --git a/2.2.2/scaffolding.html b/2.2.2/scaffolding.html index d5a2634e7c..7e07032fa2 100755 --- a/2.2.2/scaffolding.html +++ b/2.2.2/scaffolding.html @@ -83,7 +83,7 @@

    Scaffolding

    Bootstrap is built on responsive 12-column grids, layouts, and components.

    -
    +
    diff --git a/2.3.0/assets/css/docs.css b/2.3.0/assets/css/docs.css index 73a991ab90..9569587043 100755 --- a/2.3.0/assets/css/docs.css +++ b/2.3.0/assets/css/docs.css @@ -709,79 +709,61 @@ form.bs-docs-example { /* Ads in headers -------------------------------------------------- */ -.subhead h1, -.subhead .lead { - margin-right: 340px; +@media (min-width: 992px) { + .subhead h1, + .subhead .lead { + margin-right: 350px; + } } -.carbonad { - position: absolute; - top: 0; - right: 0; - margin-top: 0 !important; - padding: 15px; - height: auto !important; - overflow: hidden; /* clearfix */ - font-size: 13px !important; - line-height: 16px !important; - background: #222 !important; /* reset image and color in one line */ - background: rgba(0,0,0,.5) !important; - border: 0 !important; - border-radius: 4px; +#carbonads { + display: block; + overflow: hidden; + margin: 40px -20px -40px; + padding: 15px 15px 15px 160px; + font-size: 13px; + line-height: 1.5; + text-align: left; + background-color: rgba(0,0,0,.5); box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); } -.carbonad-img { - margin: 0 !important; -} -.carbonad-text, -.carbonad-tag, -.carbonad-tag a { - color: #fff !important; -} -.carbonad-text, -.carbonad-tag { - float: none !important; - display: block !important; - width: auto !important; - height: auto !important; - margin-left: 145px !important; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; -} -.carbonad-text { - padding-top: 0 !important; -} -.carbonad-tag { - text-align: left !important; + +#carbonads a { + color: #fff; } -/* Ads on homepage */ -.masthead .carbonad { - position: static; - margin: 30px auto 0 !important; - text-align: left !important; +.carbon-img { + float: left; + margin-left: -145px; } -@media (max-width: 980px) { - .carbonad { - position: static; - width: auto !important; - margin-top: 30px !important; +.carbon-poweredby { + display: block; + color: #cdbfe3 !important; +} + +@media (min-width: 480px) { + #carbonads { + max-width: 155px; /* 330 - padding */ + margin: 50px auto 0; + border-radius: 4px; } } -@media (max-width: 767px) { - .carbonad { +@media (min-width: 992px) { + #carbonads { + position: absolute; + top: 0; + right: 15px; + margin-top: 0; + } + .masthead #carbonads { position: static; - width: auto !important; - margin: 40px -20px -40px !important; - padding: 20px !important; - overflow: hidden; /* clearfix */ - border-radius: 0; + margin: 30px auto 0; } } - /* Responsive docs -------------------------------------------------- */ diff --git a/2.3.0/base-css.html b/2.3.0/base-css.html index 0a50190696..7fdb30d3bf 100755 --- a/2.3.0/base-css.html +++ b/2.3.0/base-css.html @@ -83,7 +83,7 @@

    Base CSS

    Fundamental HTML elements styled and enhanced with extensible classes.

    -
    +
    diff --git a/2.3.0/components.html b/2.3.0/components.html index 6ee81d4749..178f1875fb 100755 --- a/2.3.0/components.html +++ b/2.3.0/components.html @@ -83,7 +83,7 @@

    Components

    Dozens of reusable components built to provide navigation, alerts, popovers, and more.

    -
    +
    diff --git a/2.3.0/customize.html b/2.3.0/customize.html index 074d97d201..9e84279555 100755 --- a/2.3.0/customize.html +++ b/2.3.0/customize.html @@ -83,7 +83,7 @@

    Customize and download

    Download Bootstrap or customize variables, components, JavaScript plugins, and more.

    -
    +
    diff --git a/2.3.0/extend.html b/2.3.0/extend.html index bfe32359bb..c18b4f5f59 100755 --- a/2.3.0/extend.html +++ b/2.3.0/extend.html @@ -83,7 +83,7 @@

    Extending Bootstrap

    Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

    -
    +
    diff --git a/2.3.0/getting-started.html b/2.3.0/getting-started.html index 77faa35a15..266f920381 100755 --- a/2.3.0/getting-started.html +++ b/2.3.0/getting-started.html @@ -83,7 +83,7 @@

    Getting started

    Overview of the project, its contents, and how to get started with a simple template.

    -
    +
    diff --git a/2.3.0/index.html b/2.3.0/index.html index 2ca06acd21..796edb2b6c 100755 --- a/2.3.0/index.html +++ b/2.3.0/index.html @@ -98,7 +98,7 @@ Version 2.3.0 -
    +
    diff --git a/2.3.0/javascript.html b/2.3.0/javascript.html index 2d1d04c1ea..7455d0fdf9 100755 --- a/2.3.0/javascript.html +++ b/2.3.0/javascript.html @@ -83,7 +83,7 @@

    JavaScript

    Bring Bootstrap's components to life—now with 13 custom jQuery plugins. -

    +
    diff --git a/2.3.0/scaffolding.html b/2.3.0/scaffolding.html index 2b8ea3720e..6e2580e5e3 100755 --- a/2.3.0/scaffolding.html +++ b/2.3.0/scaffolding.html @@ -83,7 +83,7 @@

    Scaffolding

    Bootstrap is built on responsive 12-column grids, layouts, and components.

    -
    +
    diff --git a/2.3.1/assets/css/docs.css b/2.3.1/assets/css/docs.css index 73a991ab90..9569587043 100755 --- a/2.3.1/assets/css/docs.css +++ b/2.3.1/assets/css/docs.css @@ -709,79 +709,61 @@ form.bs-docs-example { /* Ads in headers -------------------------------------------------- */ -.subhead h1, -.subhead .lead { - margin-right: 340px; +@media (min-width: 992px) { + .subhead h1, + .subhead .lead { + margin-right: 350px; + } } -.carbonad { - position: absolute; - top: 0; - right: 0; - margin-top: 0 !important; - padding: 15px; - height: auto !important; - overflow: hidden; /* clearfix */ - font-size: 13px !important; - line-height: 16px !important; - background: #222 !important; /* reset image and color in one line */ - background: rgba(0,0,0,.5) !important; - border: 0 !important; - border-radius: 4px; +#carbonads { + display: block; + overflow: hidden; + margin: 40px -20px -40px; + padding: 15px 15px 15px 160px; + font-size: 13px; + line-height: 1.5; + text-align: left; + background-color: rgba(0,0,0,.5); box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); } -.carbonad-img { - margin: 0 !important; -} -.carbonad-text, -.carbonad-tag, -.carbonad-tag a { - color: #fff !important; -} -.carbonad-text, -.carbonad-tag { - float: none !important; - display: block !important; - width: auto !important; - height: auto !important; - margin-left: 145px !important; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; -} -.carbonad-text { - padding-top: 0 !important; -} -.carbonad-tag { - text-align: left !important; + +#carbonads a { + color: #fff; } -/* Ads on homepage */ -.masthead .carbonad { - position: static; - margin: 30px auto 0 !important; - text-align: left !important; +.carbon-img { + float: left; + margin-left: -145px; } -@media (max-width: 980px) { - .carbonad { - position: static; - width: auto !important; - margin-top: 30px !important; +.carbon-poweredby { + display: block; + color: #cdbfe3 !important; +} + +@media (min-width: 480px) { + #carbonads { + max-width: 155px; /* 330 - padding */ + margin: 50px auto 0; + border-radius: 4px; } } -@media (max-width: 767px) { - .carbonad { +@media (min-width: 992px) { + #carbonads { + position: absolute; + top: 0; + right: 15px; + margin-top: 0; + } + .masthead #carbonads { position: static; - width: auto !important; - margin: 40px -20px -40px !important; - padding: 20px !important; - overflow: hidden; /* clearfix */ - border-radius: 0; + margin: 30px auto 0; } } - /* Responsive docs -------------------------------------------------- */ diff --git a/2.3.1/base-css.html b/2.3.1/base-css.html index 0a50190696..7fdb30d3bf 100755 --- a/2.3.1/base-css.html +++ b/2.3.1/base-css.html @@ -83,7 +83,7 @@

    Base CSS

    Fundamental HTML elements styled and enhanced with extensible classes.

    -
    +
    diff --git a/2.3.1/components.html b/2.3.1/components.html index 6ee81d4749..178f1875fb 100755 --- a/2.3.1/components.html +++ b/2.3.1/components.html @@ -83,7 +83,7 @@

    Components

    Dozens of reusable components built to provide navigation, alerts, popovers, and more.

    -
    +
    diff --git a/2.3.1/customize.html b/2.3.1/customize.html index 074d97d201..9e84279555 100755 --- a/2.3.1/customize.html +++ b/2.3.1/customize.html @@ -83,7 +83,7 @@

    Customize and download

    Download Bootstrap or customize variables, components, JavaScript plugins, and more.

    -
    +
    diff --git a/2.3.1/extend.html b/2.3.1/extend.html index 8a184e9d75..fff111de54 100755 --- a/2.3.1/extend.html +++ b/2.3.1/extend.html @@ -83,7 +83,7 @@

    Extending Bootstrap

    Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

    -
    +
    diff --git a/2.3.1/getting-started.html b/2.3.1/getting-started.html index 77faa35a15..266f920381 100755 --- a/2.3.1/getting-started.html +++ b/2.3.1/getting-started.html @@ -83,7 +83,7 @@

    Getting started

    Overview of the project, its contents, and how to get started with a simple template.

    -
    +
    diff --git a/2.3.1/index.html b/2.3.1/index.html index ed901056a9..007af22316 100755 --- a/2.3.1/index.html +++ b/2.3.1/index.html @@ -98,7 +98,7 @@ Version 2.3.1 -
    +
    diff --git a/2.3.1/javascript.html b/2.3.1/javascript.html index 2d1d04c1ea..7455d0fdf9 100755 --- a/2.3.1/javascript.html +++ b/2.3.1/javascript.html @@ -83,7 +83,7 @@

    JavaScript

    Bring Bootstrap's components to life—now with 13 custom jQuery plugins. -

    +
    diff --git a/2.3.1/scaffolding.html b/2.3.1/scaffolding.html index 2b8ea3720e..6e2580e5e3 100755 --- a/2.3.1/scaffolding.html +++ b/2.3.1/scaffolding.html @@ -83,7 +83,7 @@

    Scaffolding

    Bootstrap is built on responsive 12-column grids, layouts, and components.

    -
    +
    diff --git a/2.3.2/assets/css/docs.css b/2.3.2/assets/css/docs.css index c88e38ad2e..9cb187e9b0 100644 --- a/2.3.2/assets/css/docs.css +++ b/2.3.2/assets/css/docs.css @@ -855,79 +855,61 @@ form.bs-docs-example { /* Ads in headers -------------------------------------------------- */ -.subhead h1, -.subhead .lead { - margin-right: 340px; +@media (min-width: 992px) { + .subhead h1, + .subhead .lead { + margin-right: 350px; + } } -.carbonad { - position: absolute; - top: 0; - right: 0; - margin-top: 0 !important; - padding: 15px; - height: auto !important; - overflow: hidden; /* clearfix */ - font-size: 13px !important; - line-height: 16px !important; - background: #222 !important; /* reset image and color in one line */ - background: rgba(0,0,0,.5) !important; - border: 0 !important; - border-radius: 4px; +#carbonads { + display: block; + overflow: hidden; + margin: 40px -20px -40px; + padding: 15px 15px 15px 160px; + font-size: 13px; + line-height: 1.5; + text-align: left; + background-color: rgba(0,0,0,.5); box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); } -.carbonad-img { - margin: 0 !important; -} -.carbonad-text, -.carbonad-tag, -.carbonad-tag a { - color: #fff !important; -} -.carbonad-text, -.carbonad-tag { - float: none !important; - display: block !important; - width: auto !important; - height: auto !important; - margin-left: 145px !important; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; -} -.carbonad-text { - padding-top: 0 !important; -} -.carbonad-tag { - text-align: left !important; + +#carbonads a { + color: #fff; } -/* Ads on homepage */ -.masthead .carbonad { - position: static; - margin: 30px auto 0 !important; - text-align: left !important; +.carbon-img { + float: left; + margin-left: -145px; } -@media (max-width: 980px) { - .carbonad { - position: static; - width: auto !important; - margin-top: 30px !important; +.carbon-poweredby { + display: block; + color: #cdbfe3 !important; +} + +@media (min-width: 480px) { + #carbonads { + max-width: 155px; /* 330 - padding */ + margin: 50px auto 0; + border-radius: 4px; } } -@media (max-width: 767px) { - .carbonad { +@media (min-width: 992px) { + #carbonads { + position: absolute; + top: 0; + right: 15px; + margin-top: 0; + } + .masthead #carbonads { position: static; - width: auto !important; - margin: 40px -20px -40px !important; - padding: 20px !important; - overflow: hidden; /* clearfix */ - border-radius: 0; + margin: 30px auto 0; } } - /* Responsive -------------------------------------------------- */ diff --git a/2.3.2/base-css.html b/2.3.2/base-css.html index 6af8ad1bce..a9b1a4a10e 100644 --- a/2.3.2/base-css.html +++ b/2.3.2/base-css.html @@ -83,7 +83,7 @@

    Base CSS

    Fundamental HTML elements styled and enhanced with extensible classes.

    -
    +
    diff --git a/2.3.2/components.html b/2.3.2/components.html index f96b99e7c8..50674709a7 100644 --- a/2.3.2/components.html +++ b/2.3.2/components.html @@ -83,7 +83,7 @@

    Components

    Dozens of reusable components built to provide navigation, alerts, popovers, and more.

    -
    +
    diff --git a/2.3.2/customize.html b/2.3.2/customize.html index 673e4c4833..522228208d 100644 --- a/2.3.2/customize.html +++ b/2.3.2/customize.html @@ -83,7 +83,7 @@

    Customize and download

    Download Bootstrap or customize variables, components, JavaScript plugins, and more.

    -
    +
    diff --git a/2.3.2/getting-started.html b/2.3.2/getting-started.html index 4d05184009..573d684cab 100644 --- a/2.3.2/getting-started.html +++ b/2.3.2/getting-started.html @@ -83,7 +83,7 @@

    Getting started

    Overview of the project, its contents, and how to get started with a simple template.

    -
    +
    diff --git a/2.3.2/index.html b/2.3.2/index.html index 938e33a6eb..34ebde962b 100644 --- a/2.3.2/index.html +++ b/2.3.2/index.html @@ -99,7 +99,7 @@ -
    +
    diff --git a/2.3.2/javascript.html b/2.3.2/javascript.html index 7c9d2861b0..69a7487cc5 100644 --- a/2.3.2/javascript.html +++ b/2.3.2/javascript.html @@ -83,7 +83,7 @@

    JavaScript

    Bring Bootstrap's components to life—now with 13 custom jQuery plugins. -

    +
    diff --git a/2.3.2/scaffolding.html b/2.3.2/scaffolding.html index 5af053499e..c24ea4e2a8 100644 --- a/2.3.2/scaffolding.html +++ b/2.3.2/scaffolding.html @@ -83,7 +83,7 @@

    Scaffolding

    Bootstrap is built on responsive 12-column grids, layouts, and components.

    -
    +
    diff --git a/about/index.html b/about/index.html index 0aad61fc1a..0c66823e74 100644 --- a/about/index.html +++ b/about/index.html @@ -1,2 +1,2 @@ About · Bootstrap
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!

    About

    Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.

    History

    Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.

    Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.

    Originally released on , we've since had over twenty releases, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.

    Team

    Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.

    Core team

    @mdo avatar Mark Otto @mdo
    @fat avatar Jacob Thornton @fat
    @cvrebert avatar Chris Rebert @cvrebert
    @juthilo avatar Julian Thilo @juthilo
    @xhmikosr avatar XhmikosR @xhmikosr
    @hnrch02 avatar Heinrich Fenkart @hnrch02
    @patrickhlauke avatar Patrick H. Lauke @patrickhlauke

    Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.

    Sass team

    @thomas-mcdonald avatar Thomas McDonald @thomas-mcdonald
    @glebm avatar Gleb Mazovetskiy @glebm

    The official Sass port of Bootstrap was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass contributing guidelines for information on how the Sass port is developed.

    Brand guidelines

    Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's Brand Assets.

    Mark and logo

    Use either the Bootstrap mark (a capital B) or the standard logo (just Bootstrap). It should always appear in Helvetica Neue Bold. Do not use the Twitter bird in association with Bootstrap.

    B
    B

    Bootstrap

    Bootstrap

    Download mark

    Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.

    Bootstrap
    Bootstrap
    Bootstrap

    Name

    The project and framework should always be referred to as Bootstrap. No Twitter before it, no capital s, and no abbreviations except for one, a capital B.

    Bootstrap

    (correct)

    BootStrap

    (incorrect)

    Twitter Bootstrap

    (incorrect)

    Colors

    Our docs and branding use a handful of primary colors to differentiate what is Bootstrap from what is in Bootstrap. In other words, if it's purple, it's representative of Bootstrap.

    \ No newline at end of file +
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!

    About

    Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.

    History

    Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.

    Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.

    Originally released on , we've since had over twenty releases, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.

    Team

    Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.

    Core team

    @mdo avatar Mark Otto @mdo
    @fat avatar Jacob Thornton @fat
    @cvrebert avatar Chris Rebert @cvrebert
    @juthilo avatar Julian Thilo @juthilo
    @xhmikosr avatar XhmikosR @xhmikosr
    @hnrch02 avatar Heinrich Fenkart @hnrch02
    @patrickhlauke avatar Patrick H. Lauke @patrickhlauke

    Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.

    Sass team

    @thomas-mcdonald avatar Thomas McDonald @thomas-mcdonald
    @glebm avatar Gleb Mazovetskiy @glebm

    The official Sass port of Bootstrap was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass contributing guidelines for information on how the Sass port is developed.

    Brand guidelines

    Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's Brand Assets.

    Mark and logo

    Use either the Bootstrap mark (a capital B) or the standard logo (just Bootstrap). It should always appear in Helvetica Neue Bold. Do not use the Twitter bird in association with Bootstrap.

    B
    B

    Bootstrap

    Bootstrap

    Download mark

    Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.

    Bootstrap
    Bootstrap
    Bootstrap

    Name

    The project and framework should always be referred to as Bootstrap. No Twitter before it, no capital s, and no abbreviations except for one, a capital B.

    Bootstrap

    (correct)

    BootStrap

    (incorrect)

    Twitter Bootstrap

    (incorrect)

    Colors

    Our docs and branding use a handful of primary colors to differentiate what is Bootstrap from what is in Bootstrap. In other words, if it's purple, it's representative of Bootstrap.

    \ No newline at end of file diff --git a/assets/css/docs.min.css b/assets/css/docs.min.css index 75cbc54407..90876d1001 100644 --- a/assets/css/docs.min.css +++ b/assets/css/docs.min.css @@ -7,7 +7,58 @@ * Copyright 2011-2015 Twitter, Inc. * Licensed under the Creative Commons Attribution 3.0 Unported License. For * details, see https://creativecommons.org/licenses/by/3.0/. - */body{position:relative}.table code{font-size:13px;font-weight:400}h2 code,h3 code,h4 code{background-color:inherit}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:active,.btn-outline:focus,.btn-outline:hover{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:active,.btn-outline-inverse:focus,.btn-outline-inverse:hover{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;font-weight:500;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon-sm{width:30px;height:30px;font-size:20px;line-height:28px}.bs-docs-booticon-lg{width:144px;height:144px;font-size:108px;line-height:140px}.bs-docs-booticon-inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon-outline{background-color:transparent;border:1px solid #cdbfe3}#skippy{display:block;padding:1em;color:#fff;background-color:#6f5499;outline:0}#skippy .skiplink-text{padding:.5em;outline:1px dotted}#content:focus{outline:0}.bs-docs-nav{margin-bottom:0;background-color:#fff;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#563d7c}.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover,.bs-docs-nav .navbar-nav>li>a:hover{color:#463265;background-color:#f9f9f9}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#563d7c}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle:focus,.bs-docs-nav .navbar-header .navbar-toggle:hover{background-color:#f9f9f9;border-color:#f9f9f9}.bs-docs-footer{padding-top:50px;padding-bottom:50px;margin-top:100px;color:#99979c;text-align:center;background-color:#2a2730}.bs-docs-footer a{color:#fff}.bs-docs-footer-links{padding-left:0;margin-bottom:20px}.bs-docs-footer-links li{display:inline-block}.bs-docs-footer-links li+li{margin-left:15px}@media (min-width:768px){.bs-docs-footer{text-align:left}.bs-docs-footer p{margin-bottom:0}}.bs-docs-header,.bs-docs-masthead{position:relative;padding:30px 0;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);background-repeat:repeat-x}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 30px}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 30px;font-size:20px;color:#fff}.bs-docs-masthead .version{margin-top:-15px;margin-bottom:30px;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:15px 30px;font-size:20px}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:80px 0}.bs-docs-masthead h1{font-size:60px}.bs-docs-masthead .lead{font-size:24px}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:30px}}.bs-docs-header{margin-bottom:40px;font-size:20px}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;line-height:1.4}.bs-docs-header .container{position:relative}@media (min-width:768px){.bs-docs-header{padding-top:60px;padding-bottom:60px;font-size:24px;text-align:left}.bs-docs-header h1{font-size:60px;line-height:1}}@media (min-width:992px){.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbonad{width:auto!important;height:auto!important;padding:20px!important;margin:30px -15px -31px!important;overflow:hidden;font-size:13px!important;line-height:16px!important;text-align:left;background:0 0!important;border:solid #866ab3!important;border-width:1px 0!important}.carbonad-img{margin:0!important}.carbonad-tag,.carbonad-text{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-tag a,.carbonad-text a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:480px){.carbonad{width:330px!important;margin:20px auto!important;border-width:1px!important;border-radius:4px}.bs-docs-masthead .carbonad{margin:50px auto 0!important}}@media (min-width:768px){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:0;right:15px;width:330px!important;padding:15px!important;margin:0!important}.bs-docs-masthead .carbonad{position:static}}.bs-docs-featurette{padding-top:40px;padding-bottom:40px;font-size:16px;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:5px;font-size:30px;font-weight:400;color:#333}.half-rule{width:100px;margin:40px auto}.bs-docs-featurette h3{margin-bottom:5px;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:20px;color:#333}.bs-docs-featurette-img:hover{color:#337ab7;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:15px}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:30px}}@media (min-width:768px){.bs-docs-featurette{padding-top:100px;padding-bottom:100px}.bs-docs-featurette-title{font-size:40px}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:4px;border-bottom-left-radius:4px}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:4px;border-bottom-right-radius:4px}}.bs-examples .thumbnail{margin-bottom:10px}.bs-examples h4{margin-bottom:5px}.bs-examples p{margin-bottom:20px}@media (max-width:480px){.bs-examples{margin-right:-10px;margin-left:-10px}.bs-examples>[class^=col-]{padding-right:10px;padding-left:10px}}.bs-docs-sidebar.affix{position:static}@media (min-width:768px){.bs-docs-sidebar{padding-left:20px}}.bs-docs-sidenav{margin-top:20px;margin-bottom:20px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}.bs-docs-sidebar .nav>li>a:focus,.bs-docs-sidebar .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}.bs-docs-sidebar .nav>.active:focus>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>li>a:focus,.bs-docs-sidebar .nav .nav>li>a:hover{padding-left:29px}.bs-docs-sidebar .nav .nav>.active:focus>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active>a{padding-left:28px;font-weight:500}.back-to-top,.bs-docs-theme-toggle{display:none;padding:4px 10px;margin-top:10px;margin-left:10px;font-size:12px;font-weight:500;color:#999}.back-to-top:hover,.bs-docs-theme-toggle:hover{color:#563d7c;text-decoration:none}.bs-docs-theme-toggle{margin-top:0}@media (min-width:768px){.back-to-top,.bs-docs-theme-toggle{display:block}}@media (min-width:992px){.bs-docs-sidebar .nav>.active>ul{display:block}.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:213px}.bs-docs-sidebar.affix{position:fixed;top:20px}.bs-docs-sidebar.affix-bottom{position:absolute}.bs-docs-sidebar.affix .bs-docs-sidenav,.bs-docs-sidebar.affix-bottom .bs-docs-sidenav{margin-top:0;margin-bottom:0}}@media (min-width:1200px){.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:263px}}.bs-docs-section{margin-bottom:60px}.bs-docs-section:last-child{margin-bottom:0}h1[id]{padding-top:20px;margin-top:0}.bs-callout{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:3px}.bs-callout+.bs-callout{margin-top:-5px}.bs-callout-danger{border-left-color:#ce4844}.bs-callout-danger h4{color:#ce4844}.bs-callout-warning{border-left-color:#aa6708}.bs-callout-warning h4{color:#aa6708}.bs-callout-info{border-left-color:#1b809e}.bs-callout-info h4{color:#1b809e}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:60px;height:60px;margin:0 5px;border-radius:3px}@media (min-width:768px){.color-swatch{width:100px;height:100px}}.color-swatches .gray-darker{background-color:#222}.color-swatches .gray-dark{background-color:#333}.color-swatches .gray{background-color:#555}.color-swatches .gray-light{background-color:#999}.color-swatches .gray-lighter{background-color:#eee}.color-swatches .brand-primary{background-color:#337ab7}.color-swatches .brand-success{background-color:#5cb85c}.color-swatches .brand-warning{background-color:#f0ad4e}.color-swatches .brand-danger{background-color:#d9534f}.color-swatches .brand-info{background-color:#5bc0de}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#c7bfd3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:32px;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:20px;margin-top:6px}.bs-team img{float:left;width:32px;margin-right:10px;border-radius:4px}.bs-docs-browser-bugs td p{margin-bottom:0}.bs-docs-browser-bugs th:first-child{width:18%}.show-grid{margin-bottom:15px}.show-grid [class^=col-]{padding-top:10px;padding-bottom:10px;background-color:#eee;background-color:rgba(86,61,124,.15);border:1px solid #ddd;border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:45px 15px 15px;margin:0 -15px 15px;border-color:#e5e5e5 #eee #eee;border-style:solid;border-width:1px 0;-webkit-box-shadow:inset 0 3px 6px rgba(0,0,0,.05);box-shadow:inset 0 3px 6px rgba(0,0,0,.05)}.bs-example:after{position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#959595;text-transform:uppercase;letter-spacing:1px;content:"Example"}.bs-example-padded-bottom{padding-bottom:24px}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin:-15px -15px 15px;border-width:0 0 1px;border-radius:0}@media (min-width:768px){.bs-example{margin-right:0;margin-left:0;background-color:#fff;border-color:#ddd;border-width:1px;border-radius:4px 4px 0 0;-webkit-box-shadow:none;box-shadow:none}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin-top:-16px;margin-right:0;margin-left:0;border-width:1px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.bs-example-standalone{border-radius:4px}}.bs-example .container{width:auto}.bs-example>.alert:last-child,.bs-example>.form-control:last-child,.bs-example>.jumbotron:last-child,.bs-example>.list-group:last-child,.bs-example>.navbar:last-child,.bs-example>.panel:last-child,.bs-example>.progress:last-child,.bs-example>.table-responsive:last-child>.table,.bs-example>.table:last-child,.bs-example>.well:last-child,.bs-example>blockquote:last-child,.bs-example>ol:last-child,.bs-example>p:last-child,.bs-example>ul:last-child{margin-bottom:0}.bs-example>p>.close{float:none}.bs-example-type .table .type-info{color:#767676;vertical-align:middle}.bs-example-type .table td{padding:15px 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:15px}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:5px}.bs-example>.table-responsive>.table{background-color:#fff}.bs-example>.btn,.bs-example>.btn-group{margin-top:5px;margin-bottom:5px}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:10px}.bs-example-control-sizing input[type=text]+input[type=text],.bs-example-control-sizing select{margin-top:10px}.bs-example-form .input-group{margin-bottom:10px}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-bottom-example,.bs-navbar-top-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-bottom-example .navbar-header,.bs-navbar-top-example .navbar-header{margin-left:0}.bs-navbar-bottom-example .navbar-fixed-bottom,.bs-navbar-top-example .navbar-fixed-top{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example:after{top:auto;bottom:15px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-bottom-example .navbar-fixed-bottom,.bs-navbar-top-example .navbar-fixed-top{position:absolute}}.bs-example .pagination{margin-top:10px;margin-bottom:10px}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:5px;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:15px}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:5px;margin-bottom:5px}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.bs-example-popover{padding-bottom:24px;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:20px}.scrollspy-example{position:relative;height:200px;margin-top:10px;overflow:auto}.bs-example>.nav-pills-stacked-example{max-width:300px}#collapseExample .well{margin-bottom:0}.bs-events-table>tbody>tr>td:first-child,.bs-events-table>thead>tr>th:first-child{white-space:nowrap}.bs-events-table>thead>tr>th:first-child{width:150px}.js-options-table>thead>tr>th:nth-child(1),.js-options-table>thead>tr>th:nth-child(2){width:100px}.js-options-table>thead>tr>th:nth-child(3){width:50px}.highlight{padding:9px 14px;margin-bottom:14px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:4px}.highlight pre{padding:0;margin-top:0;margin-bottom:0;word-break:normal;white-space:nowrap;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#333}.highlight pre code:first-child{display:inline-block;padding-right:45px}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:5px}.responsive-utilities-test .col-xs-6{margin-bottom:10px}.responsive-utilities-test span{display:block;padding:15px 10px;font-size:14px;font-weight:700;line-height:1.1;text-align:center;border-radius:4px}.hidden-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-lg,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-xs{color:#999;border:1px solid #ddd}.hidden-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-lg-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-xs-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-glyphicons{margin:0 -10px 20px;overflow:hidden}.bs-glyphicons-list{padding-left:0;list-style:none}.bs-glyphicons li{float:left;width:25%;height:115px;padding:10px;font-size:10px;line-height:1.4;text-align:center;background-color:#f9f9f9;border:1px solid #fff}.bs-glyphicons .glyphicon{margin-top:5px;margin-bottom:10px;font-size:24px}.bs-glyphicons .glyphicon-class{display:block;text-align:center;word-wrap:break-word}.bs-glyphicons li:hover{color:#fff;background-color:#563d7c}@media (min-width:768px){.bs-glyphicons{margin-right:0;margin-left:0}.bs-glyphicons li{width:12.5%;font-size:12px}}.bs-customizer .toggle{float:right;margin-top:25px}.bs-customizer label{margin-top:10px;font-weight:500;color:#555}.bs-customizer h2{padding-top:30px;margin-top:0;margin-bottom:5px}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:15px;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:5px}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{margin-bottom:5px;font-size:12px}#less-section label{font-weight:400}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:0;right:0;left:0;z-index:1030;padding:15px 0;color:#fff;background-color:#d9534f;border-bottom:1px solid #b94441;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.bs-customizer-alert .close{margin-top:-4px;font-size:24px}.bs-customizer-alert p{margin-bottom:0}.bs-customizer-alert .glyphicon{margin-right:5px}.bs-customizer-alert pre{margin:10px 0 0;color:#fff;background-color:#a83c3a;border-color:#973634;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-dropzone{position:relative;padding:20px;margin-bottom:20px;color:#777;text-align:center;border:2px dashed #eee;border-radius:4px}.bs-dropzone .import-header{margin-bottom:5px}.bs-dropzone .glyphicon-download-alt{font-size:40px}.bs-dropzone hr{width:100px}.bs-dropzone .lead{margin-bottom:10px;font-weight:400;color:#333}#import-manual-trigger{cursor:pointer}.bs-dropzone p:last-child{margin-bottom:0}.bs-brand-logos{display:table;width:100%;margin-bottom:15px;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:4px}.bs-brand-item{padding:60px 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}.bs-brand-item .glyphicon{width:30px;height:30px;margin:10px auto -10px;line-height:30px;color:#fff;border-radius:50%}.bs-brand-item .glyphicon-ok{background-color:#5cb85c}.bs-brand-item .glyphicon-remove{background-color:#d9534f}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:60px}}.zero-clipboard{position:relative;display:none}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:5px 8px;font-size:12px;color:#767676;cursor:pointer;background-color:#fff;border:1px solid #e1e1e8;border-radius:0 4px 0 4px}.btn-clipboard-hover{color:#fff;background-color:#563d7c;border-color:#563d7c}@media (min-width:768px){.zero-clipboard{display:block}.bs-example+.zero-clipboard .btn-clipboard{top:-16px;border-top-right-radius:0}}.anchorjs-link{color:inherit}@media (max-width:480px){.anchorjs-link{display:none}}:hover>.anchorjs-link{opacity:.75;-webkit-transition:color .16s linear;-o-transition:color .16s linear;transition:color .16s linear}.anchorjs-link:focus,:hover>.anchorjs-link:hover{text-decoration:none;opacity:1}#focusedInput{border-color:#ccc;border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted\9;-webkit-box-shadow:0 0 8px rgba(82,168,236,.6);box-shadow:0 0 8px rgba(82,168,236,.6)} + */body{position:relative}.table code{font-size:13px;font-weight:400}h2 code,h3 code,h4 code{background-color:inherit}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:active,.btn-outline:focus,.btn-outline:hover{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:active,.btn-outline-inverse:focus,.btn-outline-inverse:hover{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;font-weight:500;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon-sm{width:30px;height:30px;font-size:20px;line-height:28px}.bs-docs-booticon-lg{width:144px;height:144px;font-size:108px;line-height:140px}.bs-docs-booticon-inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon-outline{background-color:transparent;border:1px solid #cdbfe3}#skippy{display:block;padding:1em;color:#fff;background-color:#6f5499;outline:0}#skippy .skiplink-text{padding:.5em;outline:1px dotted}#content:focus{outline:0}.bs-docs-nav{margin-bottom:0;background-color:#fff;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#563d7c}.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover,.bs-docs-nav .navbar-nav>li>a:hover{color:#463265;background-color:#f9f9f9}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#563d7c}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle:focus,.bs-docs-nav .navbar-header .navbar-toggle:hover{background-color:#f9f9f9;border-color:#f9f9f9}.bs-docs-footer{padding-top:50px;padding-bottom:50px;margin-top:100px;color:#99979c;text-align:center;background-color:#2a2730}.bs-docs-footer a{color:#fff}.bs-docs-footer-links{padding-left:0;margin-bottom:20px}.bs-docs-footer-links li{display:inline-block}.bs-docs-footer-links li+li{margin-left:15px}@media (min-width:768px){.bs-docs-footer{text-align:left}.bs-docs-footer p{margin-bottom:0}}.bs-docs-header,.bs-docs-masthead{position:relative;padding:30px 0;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);background-repeat:repeat-x}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 30px}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 30px;font-size:20px;color:#fff}.bs-docs-masthead .version{margin-top:-15px;margin-bottom:30px;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:15px 30px;font-size:20px}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:80px 0}.bs-docs-masthead h1{font-size:60px}.bs-docs-masthead .lead{font-size:24px}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:30px}}.bs-docs-header{margin-bottom:40px;font-size:20px}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;line-height:1.4}.bs-docs-header .container{position:relative}@media (min-width:768px){.bs-docs-header{padding-top:60px;padding-bottom:60px;font-size:24px;text-align:left}.bs-docs-header h1{font-size:60px;line-height:1}}@media (min-width:992px){.bs-docs-header h1,.bs-docs-header p{margin-right:380px}} + + +#carbonads { + display: block; + overflow: hidden; + margin: 50px -15px 0; + padding: 15px 15px 15px 160px; + font-size: 13px; + line-height: 1.5; + text-align: left; + border: solid #866ab3; + border-width: 1px 0 0; +} + +#carbonads a { + color: #fff; + text-decoration: none; +} + +.carbon-img { + float: left; + margin-left: -145px; +} + +.carbon-poweredby { + display: block; + color: #cdbfe3 !important; +} + +@media (min-width: 480px) { + #carbonads { + max-width: 330px; + margin: 50px auto 0; + border-width: 1px; + border-radius: 4px; + } +} + +@media (min-width: 992px) { + #carbonads { + position: absolute; + top: 0; + right: 15px; + margin-top: 0; + } + .bs-docs-masthead #carbonads { + position: static; + } +} + + .bs-docs-featurette{padding-top:40px;padding-bottom:40px;font-size:16px;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:5px;font-size:30px;font-weight:400;color:#333}.half-rule{width:100px;margin:40px auto}.bs-docs-featurette h3{margin-bottom:5px;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:20px;color:#333}.bs-docs-featurette-img:hover{color:#337ab7;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:15px}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:30px}}@media (min-width:768px){.bs-docs-featurette{padding-top:100px;padding-bottom:100px}.bs-docs-featurette-title{font-size:40px}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:4px;border-bottom-left-radius:4px}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:4px;border-bottom-right-radius:4px}}.bs-examples .thumbnail{margin-bottom:10px}.bs-examples h4{margin-bottom:5px}.bs-examples p{margin-bottom:20px}@media (max-width:480px){.bs-examples{margin-right:-10px;margin-left:-10px}.bs-examples>[class^=col-]{padding-right:10px;padding-left:10px}}.bs-docs-sidebar.affix{position:static}@media (min-width:768px){.bs-docs-sidebar{padding-left:20px}}.bs-docs-sidenav{margin-top:20px;margin-bottom:20px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}.bs-docs-sidebar .nav>li>a:focus,.bs-docs-sidebar .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}.bs-docs-sidebar .nav>.active:focus>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>li>a:focus,.bs-docs-sidebar .nav .nav>li>a:hover{padding-left:29px}.bs-docs-sidebar .nav .nav>.active:focus>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active>a{padding-left:28px;font-weight:500}.back-to-top,.bs-docs-theme-toggle{display:none;padding:4px 10px;margin-top:10px;margin-left:10px;font-size:12px;font-weight:500;color:#999}.back-to-top:hover,.bs-docs-theme-toggle:hover{color:#563d7c;text-decoration:none}.bs-docs-theme-toggle{margin-top:0}@media (min-width:768px){.back-to-top,.bs-docs-theme-toggle{display:block}}@media (min-width:992px){.bs-docs-sidebar .nav>.active>ul{display:block}.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:213px}.bs-docs-sidebar.affix{position:fixed;top:20px}.bs-docs-sidebar.affix-bottom{position:absolute}.bs-docs-sidebar.affix .bs-docs-sidenav,.bs-docs-sidebar.affix-bottom .bs-docs-sidenav{margin-top:0;margin-bottom:0}}@media (min-width:1200px){.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:263px}}.bs-docs-section{margin-bottom:60px}.bs-docs-section:last-child{margin-bottom:0}h1[id]{padding-top:20px;margin-top:0}.bs-callout{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:3px}.bs-callout+.bs-callout{margin-top:-5px}.bs-callout-danger{border-left-color:#ce4844}.bs-callout-danger h4{color:#ce4844}.bs-callout-warning{border-left-color:#aa6708}.bs-callout-warning h4{color:#aa6708}.bs-callout-info{border-left-color:#1b809e}.bs-callout-info h4{color:#1b809e}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:60px;height:60px;margin:0 5px;border-radius:3px}@media (min-width:768px){.color-swatch{width:100px;height:100px}}.color-swatches .gray-darker{background-color:#222}.color-swatches .gray-dark{background-color:#333}.color-swatches .gray{background-color:#555}.color-swatches .gray-light{background-color:#999}.color-swatches .gray-lighter{background-color:#eee}.color-swatches .brand-primary{background-color:#337ab7}.color-swatches .brand-success{background-color:#5cb85c}.color-swatches .brand-warning{background-color:#f0ad4e}.color-swatches .brand-danger{background-color:#d9534f}.color-swatches .brand-info{background-color:#5bc0de}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#c7bfd3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:32px;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:20px;margin-top:6px}.bs-team img{float:left;width:32px;margin-right:10px;border-radius:4px}.bs-docs-browser-bugs td p{margin-bottom:0}.bs-docs-browser-bugs th:first-child{width:18%}.show-grid{margin-bottom:15px}.show-grid [class^=col-]{padding-top:10px;padding-bottom:10px;background-color:#eee;background-color:rgba(86,61,124,.15);border:1px solid #ddd;border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:45px 15px 15px;margin:0 -15px 15px;border-color:#e5e5e5 #eee #eee;border-style:solid;border-width:1px 0;-webkit-box-shadow:inset 0 3px 6px rgba(0,0,0,.05);box-shadow:inset 0 3px 6px rgba(0,0,0,.05)}.bs-example:after{position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#959595;text-transform:uppercase;letter-spacing:1px;content:"Example"}.bs-example-padded-bottom{padding-bottom:24px}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin:-15px -15px 15px;border-width:0 0 1px;border-radius:0}@media (min-width:768px){.bs-example{margin-right:0;margin-left:0;background-color:#fff;border-color:#ddd;border-width:1px;border-radius:4px 4px 0 0;-webkit-box-shadow:none;box-shadow:none}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin-top:-16px;margin-right:0;margin-left:0;border-width:1px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.bs-example-standalone{border-radius:4px}}.bs-example .container{width:auto}.bs-example>.alert:last-child,.bs-example>.form-control:last-child,.bs-example>.jumbotron:last-child,.bs-example>.list-group:last-child,.bs-example>.navbar:last-child,.bs-example>.panel:last-child,.bs-example>.progress:last-child,.bs-example>.table-responsive:last-child>.table,.bs-example>.table:last-child,.bs-example>.well:last-child,.bs-example>blockquote:last-child,.bs-example>ol:last-child,.bs-example>p:last-child,.bs-example>ul:last-child{margin-bottom:0}.bs-example>p>.close{float:none}.bs-example-type .table .type-info{color:#767676;vertical-align:middle}.bs-example-type .table td{padding:15px 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:15px}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:5px}.bs-example>.table-responsive>.table{background-color:#fff}.bs-example>.btn,.bs-example>.btn-group{margin-top:5px;margin-bottom:5px}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:10px}.bs-example-control-sizing input[type=text]+input[type=text],.bs-example-control-sizing select{margin-top:10px}.bs-example-form .input-group{margin-bottom:10px}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-bottom-example,.bs-navbar-top-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-bottom-example .navbar-header,.bs-navbar-top-example .navbar-header{margin-left:0}.bs-navbar-bottom-example .navbar-fixed-bottom,.bs-navbar-top-example .navbar-fixed-top{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example:after{top:auto;bottom:15px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-bottom-example .navbar-fixed-bottom,.bs-navbar-top-example .navbar-fixed-top{position:absolute}}.bs-example .pagination{margin-top:10px;margin-bottom:10px}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:5px;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:15px}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:5px;margin-bottom:5px}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.bs-example-popover{padding-bottom:24px;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:20px}.scrollspy-example{position:relative;height:200px;margin-top:10px;overflow:auto}.bs-example>.nav-pills-stacked-example{max-width:300px}#collapseExample .well{margin-bottom:0}.bs-events-table>tbody>tr>td:first-child,.bs-events-table>thead>tr>th:first-child{white-space:nowrap}.bs-events-table>thead>tr>th:first-child{width:150px}.js-options-table>thead>tr>th:nth-child(1),.js-options-table>thead>tr>th:nth-child(2){width:100px}.js-options-table>thead>tr>th:nth-child(3){width:50px}.highlight{padding:9px 14px;margin-bottom:14px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:4px}.highlight pre{padding:0;margin-top:0;margin-bottom:0;word-break:normal;white-space:nowrap;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#333}.highlight pre code:first-child{display:inline-block;padding-right:45px}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:5px}.responsive-utilities-test .col-xs-6{margin-bottom:10px}.responsive-utilities-test span{display:block;padding:15px 10px;font-size:14px;font-weight:700;line-height:1.1;text-align:center;border-radius:4px}.hidden-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-lg,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-xs{color:#999;border:1px solid #ddd}.hidden-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-lg-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-xs-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-glyphicons{margin:0 -10px 20px;overflow:hidden}.bs-glyphicons-list{padding-left:0;list-style:none}.bs-glyphicons li{float:left;width:25%;height:115px;padding:10px;font-size:10px;line-height:1.4;text-align:center;background-color:#f9f9f9;border:1px solid #fff}.bs-glyphicons .glyphicon{margin-top:5px;margin-bottom:10px;font-size:24px}.bs-glyphicons .glyphicon-class{display:block;text-align:center;word-wrap:break-word}.bs-glyphicons li:hover{color:#fff;background-color:#563d7c}@media (min-width:768px){.bs-glyphicons{margin-right:0;margin-left:0}.bs-glyphicons li{width:12.5%;font-size:12px}}.bs-customizer .toggle{float:right;margin-top:25px}.bs-customizer label{margin-top:10px;font-weight:500;color:#555}.bs-customizer h2{padding-top:30px;margin-top:0;margin-bottom:5px}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:15px;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:5px}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{margin-bottom:5px;font-size:12px}#less-section label{font-weight:400}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:0;right:0;left:0;z-index:1030;padding:15px 0;color:#fff;background-color:#d9534f;border-bottom:1px solid #b94441;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.bs-customizer-alert .close{margin-top:-4px;font-size:24px}.bs-customizer-alert p{margin-bottom:0}.bs-customizer-alert .glyphicon{margin-right:5px}.bs-customizer-alert pre{margin:10px 0 0;color:#fff;background-color:#a83c3a;border-color:#973634;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-dropzone{position:relative;padding:20px;margin-bottom:20px;color:#777;text-align:center;border:2px dashed #eee;border-radius:4px}.bs-dropzone .import-header{margin-bottom:5px}.bs-dropzone .glyphicon-download-alt{font-size:40px}.bs-dropzone hr{width:100px}.bs-dropzone .lead{margin-bottom:10px;font-weight:400;color:#333}#import-manual-trigger{cursor:pointer}.bs-dropzone p:last-child{margin-bottom:0}.bs-brand-logos{display:table;width:100%;margin-bottom:15px;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:4px}.bs-brand-item{padding:60px 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}.bs-brand-item .glyphicon{width:30px;height:30px;margin:10px auto -10px;line-height:30px;color:#fff;border-radius:50%}.bs-brand-item .glyphicon-ok{background-color:#5cb85c}.bs-brand-item .glyphicon-remove{background-color:#d9534f}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:60px}}.zero-clipboard{position:relative;display:none}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:5px 8px;font-size:12px;color:#767676;cursor:pointer;background-color:#fff;border:1px solid #e1e1e8;border-radius:0 4px 0 4px}.btn-clipboard-hover{color:#fff;background-color:#563d7c;border-color:#563d7c}@media (min-width:768px){.zero-clipboard{display:block}.bs-example+.zero-clipboard .btn-clipboard{top:-16px;border-top-right-radius:0}}.anchorjs-link{color:inherit}@media (max-width:480px){.anchorjs-link{display:none}}:hover>.anchorjs-link{opacity:.75;-webkit-transition:color .16s linear;-o-transition:color .16s linear;transition:color .16s linear}.anchorjs-link:focus,:hover>.anchorjs-link:hover{text-decoration:none;opacity:1}#focusedInput{border-color:#ccc;border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted\9;-webkit-box-shadow:0 0 8px rgba(82,168,236,.6);box-shadow:0 0 8px rgba(82,168,236,.6)} /*# sourceMappingURL=docs.min.css.map */ .v4-tease { diff --git a/components/index.html b/components/index.html index f03ac918a7..57e7a26aab 100644 --- a/components/index.html +++ b/components/index.html @@ -1,5 +1,5 @@ Components · Bootstrap
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!

    Components

    Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

    Glyphicons

    Available glyphs

    Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

    • glyphicon glyphicon-asterisk
    • glyphicon glyphicon-plus
    • glyphicon glyphicon-euro
    • glyphicon glyphicon-eur
    • glyphicon glyphicon-minus
    • glyphicon glyphicon-cloud
    • glyphicon glyphicon-envelope
    • glyphicon glyphicon-pencil
    • glyphicon glyphicon-glass
    • glyphicon glyphicon-music
    • glyphicon glyphicon-search
    • glyphicon glyphicon-heart
    • glyphicon glyphicon-star
    • glyphicon glyphicon-star-empty
    • glyphicon glyphicon-user
    • glyphicon glyphicon-film
    • glyphicon glyphicon-th-large
    • glyphicon glyphicon-th
    • glyphicon glyphicon-th-list
    • glyphicon glyphicon-ok
    • glyphicon glyphicon-remove
    • glyphicon glyphicon-zoom-in
    • glyphicon glyphicon-zoom-out
    • glyphicon glyphicon-off
    • glyphicon glyphicon-signal
    • glyphicon glyphicon-cog
    • glyphicon glyphicon-trash
    • glyphicon glyphicon-home
    • glyphicon glyphicon-file
    • glyphicon glyphicon-time
    • glyphicon glyphicon-road
    • glyphicon glyphicon-download-alt
    • glyphicon glyphicon-download
    • glyphicon glyphicon-upload
    • glyphicon glyphicon-inbox
    • glyphicon glyphicon-play-circle
    • glyphicon glyphicon-repeat
    • glyphicon glyphicon-refresh
    • glyphicon glyphicon-list-alt
    • glyphicon glyphicon-lock
    • glyphicon glyphicon-flag
    • glyphicon glyphicon-headphones
    • glyphicon glyphicon-volume-off
    • glyphicon glyphicon-volume-down
    • glyphicon glyphicon-volume-up
    • glyphicon glyphicon-qrcode
    • glyphicon glyphicon-barcode
    • glyphicon glyphicon-tag
    • glyphicon glyphicon-tags
    • glyphicon glyphicon-book
    • glyphicon glyphicon-bookmark
    • glyphicon glyphicon-print
    • glyphicon glyphicon-camera
    • glyphicon glyphicon-font
    • glyphicon glyphicon-bold
    • glyphicon glyphicon-italic
    • glyphicon glyphicon-text-height
    • glyphicon glyphicon-text-width
    • glyphicon glyphicon-align-left
    • glyphicon glyphicon-align-center
    • glyphicon glyphicon-align-right
    • glyphicon glyphicon-align-justify
    • glyphicon glyphicon-list
    • glyphicon glyphicon-indent-left
    • glyphicon glyphicon-indent-right
    • glyphicon glyphicon-facetime-video
    • glyphicon glyphicon-picture
    • glyphicon glyphicon-map-marker
    • glyphicon glyphicon-adjust
    • glyphicon glyphicon-tint
    • glyphicon glyphicon-edit
    • glyphicon glyphicon-share
    • glyphicon glyphicon-check
    • glyphicon glyphicon-move
    • glyphicon glyphicon-step-backward
    • glyphicon glyphicon-fast-backward
    • glyphicon glyphicon-backward
    • glyphicon glyphicon-play
    • glyphicon glyphicon-pause
    • glyphicon glyphicon-stop
    • glyphicon glyphicon-forward
    • glyphicon glyphicon-fast-forward
    • glyphicon glyphicon-step-forward
    • glyphicon glyphicon-eject
    • glyphicon glyphicon-chevron-left
    • glyphicon glyphicon-chevron-right
    • glyphicon glyphicon-plus-sign
    • glyphicon glyphicon-minus-sign
    • glyphicon glyphicon-remove-sign
    • glyphicon glyphicon-ok-sign
    • glyphicon glyphicon-question-sign
    • glyphicon glyphicon-info-sign
    • glyphicon glyphicon-screenshot
    • glyphicon glyphicon-remove-circle
    • glyphicon glyphicon-ok-circle
    • glyphicon glyphicon-ban-circle
    • glyphicon glyphicon-arrow-left
    • glyphicon glyphicon-arrow-right
    • glyphicon glyphicon-arrow-up
    • glyphicon glyphicon-arrow-down
    • glyphicon glyphicon-share-alt
    • glyphicon glyphicon-resize-full
    • glyphicon glyphicon-resize-small
    • glyphicon glyphicon-exclamation-sign
    • glyphicon glyphicon-gift
    • glyphicon glyphicon-leaf
    • glyphicon glyphicon-fire
    • glyphicon glyphicon-eye-open
    • glyphicon glyphicon-eye-close
    • glyphicon glyphicon-warning-sign
    • glyphicon glyphicon-plane
    • glyphicon glyphicon-calendar
    • glyphicon glyphicon-random
    • glyphicon glyphicon-comment
    • glyphicon glyphicon-magnet
    • glyphicon glyphicon-chevron-up
    • glyphicon glyphicon-chevron-down
    • glyphicon glyphicon-retweet
    • glyphicon glyphicon-shopping-cart
    • glyphicon glyphicon-folder-close
    • glyphicon glyphicon-folder-open
    • glyphicon glyphicon-resize-vertical
    • glyphicon glyphicon-resize-horizontal
    • glyphicon glyphicon-hdd
    • glyphicon glyphicon-bullhorn
    • glyphicon glyphicon-bell
    • glyphicon glyphicon-certificate
    • glyphicon glyphicon-thumbs-up
    • glyphicon glyphicon-thumbs-down
    • glyphicon glyphicon-hand-right
    • glyphicon glyphicon-hand-left
    • glyphicon glyphicon-hand-up
    • glyphicon glyphicon-hand-down
    • glyphicon glyphicon-circle-arrow-right
    • glyphicon glyphicon-circle-arrow-left
    • glyphicon glyphicon-circle-arrow-up
    • glyphicon glyphicon-circle-arrow-down
    • glyphicon glyphicon-globe
    • glyphicon glyphicon-wrench
    • glyphicon glyphicon-tasks
    • glyphicon glyphicon-filter
    • glyphicon glyphicon-briefcase
    • glyphicon glyphicon-fullscreen
    • glyphicon glyphicon-dashboard
    • glyphicon glyphicon-paperclip
    • glyphicon glyphicon-heart-empty
    • glyphicon glyphicon-link
    • glyphicon glyphicon-phone
    • glyphicon glyphicon-pushpin
    • glyphicon glyphicon-usd
    • glyphicon glyphicon-gbp
    • glyphicon glyphicon-sort
    • glyphicon glyphicon-sort-by-alphabet
    • glyphicon glyphicon-sort-by-alphabet-alt
    • glyphicon glyphicon-sort-by-order
    • glyphicon glyphicon-sort-by-order-alt
    • glyphicon glyphicon-sort-by-attributes
    • glyphicon glyphicon-sort-by-attributes-alt
    • glyphicon glyphicon-unchecked
    • glyphicon glyphicon-expand
    • glyphicon glyphicon-collapse-down
    • glyphicon glyphicon-collapse-up
    • glyphicon glyphicon-log-in
    • glyphicon glyphicon-flash
    • glyphicon glyphicon-log-out
    • glyphicon glyphicon-new-window
    • glyphicon glyphicon-record
    • glyphicon glyphicon-save
    • glyphicon glyphicon-open
    • glyphicon glyphicon-saved
    • glyphicon glyphicon-import
    • glyphicon glyphicon-export
    • glyphicon glyphicon-send
    • glyphicon glyphicon-floppy-disk
    • glyphicon glyphicon-floppy-saved
    • glyphicon glyphicon-floppy-remove
    • glyphicon glyphicon-floppy-save
    • glyphicon glyphicon-floppy-open
    • glyphicon glyphicon-credit-card
    • glyphicon glyphicon-transfer
    • glyphicon glyphicon-cutlery
    • glyphicon glyphicon-header
    • glyphicon glyphicon-compressed
    • glyphicon glyphicon-earphone
    • glyphicon glyphicon-phone-alt
    • glyphicon glyphicon-tower
    • glyphicon glyphicon-stats
    • glyphicon glyphicon-sd-video
    • glyphicon glyphicon-hd-video
    • glyphicon glyphicon-subtitles
    • glyphicon glyphicon-sound-stereo
    • glyphicon glyphicon-sound-dolby
    • glyphicon glyphicon-sound-5-1
    • glyphicon glyphicon-sound-6-1
    • glyphicon glyphicon-sound-7-1
    • glyphicon glyphicon-copyright-mark
    • glyphicon glyphicon-registration-mark
    • glyphicon glyphicon-cloud-download
    • glyphicon glyphicon-cloud-upload
    • glyphicon glyphicon-tree-conifer
    • glyphicon glyphicon-tree-deciduous
    • glyphicon glyphicon-cd
    • glyphicon glyphicon-save-file
    • glyphicon glyphicon-open-file
    • glyphicon glyphicon-level-up
    • glyphicon glyphicon-copy
    • glyphicon glyphicon-paste
    • glyphicon glyphicon-alert
    • glyphicon glyphicon-equalizer
    • glyphicon glyphicon-king
    • glyphicon glyphicon-queen
    • glyphicon glyphicon-pawn
    • glyphicon glyphicon-bishop
    • glyphicon glyphicon-knight
    • glyphicon glyphicon-baby-formula
    • glyphicon glyphicon-tent
    • glyphicon glyphicon-blackboard
    • glyphicon glyphicon-bed
    • glyphicon glyphicon-apple
    • glyphicon glyphicon-erase
    • glyphicon glyphicon-hourglass
    • glyphicon glyphicon-lamp
    • glyphicon glyphicon-duplicate
    • glyphicon glyphicon-piggy-bank
    • glyphicon glyphicon-scissors
    • glyphicon glyphicon-bitcoin
    • glyphicon glyphicon-btc
    • glyphicon glyphicon-xbt
    • glyphicon glyphicon-yen
    • glyphicon glyphicon-jpy
    • glyphicon glyphicon-ruble
    • glyphicon glyphicon-rub
    • glyphicon glyphicon-scale
    • glyphicon glyphicon-ice-lolly
    • glyphicon glyphicon-ice-lolly-tasted
    • glyphicon glyphicon-education
    • glyphicon glyphicon-option-horizontal
    • glyphicon glyphicon-option-vertical
    • glyphicon glyphicon-menu-hamburger
    • glyphicon glyphicon-modal-window
    • glyphicon glyphicon-oil
    • glyphicon glyphicon-grain
    • glyphicon glyphicon-sunglasses
    • glyphicon glyphicon-text-size
    • glyphicon glyphicon-text-color
    • glyphicon glyphicon-text-background
    • glyphicon glyphicon-object-align-top
    • glyphicon glyphicon-object-align-bottom
    • glyphicon glyphicon-object-align-horizontal
    • glyphicon glyphicon-object-align-left
    • glyphicon glyphicon-object-align-vertical
    • glyphicon glyphicon-object-align-right
    • glyphicon glyphicon-triangle-right
    • glyphicon glyphicon-triangle-left
    • glyphicon glyphicon-triangle-bottom
    • glyphicon glyphicon-triangle-top
    • glyphicon glyphicon-console
    • glyphicon glyphicon-superscript
    • glyphicon glyphicon-subscript
    • glyphicon glyphicon-menu-left
    • glyphicon glyphicon-menu-right
    • glyphicon glyphicon-menu-down
    • glyphicon glyphicon-menu-up

    How to use

    For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

    Don't mix with other components

    Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

    Only for use on empty elements

    Icon classes should only be used on elements that contain no text content and have no child elements.

    Changing the icon font location

    Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:

    • Change the @icon-font-path and/or @icon-font-name variables in the source Less files.
    • Utilize the relative URLs option provided by the Less compiler.
    • Change the url() paths in the compiled CSS.

    Use whatever option best suits your specific development setup.

    Accessible icons

    Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.

    If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.

    If you're creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.

    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

    Examples

    Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

    <button type="button" class="btn btn-default" aria-label="Left Align">
+     
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!    
     
     
    Components
     
    Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
     
     
     
     
     
    Glyphicons
     
    Available glyphs
     
    Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.
     
     
       
    •   glyphicon glyphicon-asterisk 
      •  
    •   glyphicon glyphicon-plus 
      •  
    •   glyphicon glyphicon-euro 
      •  
    •   glyphicon glyphicon-eur 
      •  
    •   glyphicon glyphicon-minus 
      •  
    •   glyphicon glyphicon-cloud 
      •  
    •   glyphicon glyphicon-envelope 
      •  
    •   glyphicon glyphicon-pencil 
      •  
    •   glyphicon glyphicon-glass 
      •  
    •   glyphicon glyphicon-music 
      •  
    •   glyphicon glyphicon-search 
      •  
    •   glyphicon glyphicon-heart 
      •  
    •   glyphicon glyphicon-star 
      •  
    •   glyphicon glyphicon-star-empty 
      •  
    •   glyphicon glyphicon-user 
      •  
    •   glyphicon glyphicon-film 
      •  
    •   glyphicon glyphicon-th-large 
      •  
    •   glyphicon glyphicon-th 
      •  
    •   glyphicon glyphicon-th-list 
      •  
    •   glyphicon glyphicon-ok 
      •  
    •   glyphicon glyphicon-remove 
      •  
    •   glyphicon glyphicon-zoom-in 
      •  
    •   glyphicon glyphicon-zoom-out 
      •  
    •   glyphicon glyphicon-off 
      •  
    •   glyphicon glyphicon-signal 
      •  
    •   glyphicon glyphicon-cog 
      •  
    •   glyphicon glyphicon-trash 
      •  
    •   glyphicon glyphicon-home 
      •  
    •   glyphicon glyphicon-file 
      •  
    •   glyphicon glyphicon-time 
      •  
    •   glyphicon glyphicon-road 
      •  
    •   glyphicon glyphicon-download-alt 
      •  
    •   glyphicon glyphicon-download 
      •  
    •   glyphicon glyphicon-upload 
      •  
    •   glyphicon glyphicon-inbox 
      •  
    •   glyphicon glyphicon-play-circle 
      •  
    •   glyphicon glyphicon-repeat 
      •  
    •   glyphicon glyphicon-refresh 
      •  
    •   glyphicon glyphicon-list-alt 
      •  
    •   glyphicon glyphicon-lock 
      •  
    •   glyphicon glyphicon-flag 
      •  
    •   glyphicon glyphicon-headphones 
      •  
    •   glyphicon glyphicon-volume-off 
      •  
    •   glyphicon glyphicon-volume-down 
      •  
    •   glyphicon glyphicon-volume-up 
      •  
    •   glyphicon glyphicon-qrcode 
      •  
    •   glyphicon glyphicon-barcode 
      •  
    •   glyphicon glyphicon-tag 
      •  
    •   glyphicon glyphicon-tags 
      •  
    •   glyphicon glyphicon-book 
      •  
    •   glyphicon glyphicon-bookmark 
      •  
    •   glyphicon glyphicon-print 
      •  
    •   glyphicon glyphicon-camera 
      •  
    •   glyphicon glyphicon-font 
      •  
    •   glyphicon glyphicon-bold 
      •  
    •   glyphicon glyphicon-italic 
      •  
    •   glyphicon glyphicon-text-height 
      •  
    •   glyphicon glyphicon-text-width 
      •  
    •   glyphicon glyphicon-align-left 
      •  
    •   glyphicon glyphicon-align-center 
      •  
    •   glyphicon glyphicon-align-right 
      •  
    •   glyphicon glyphicon-align-justify 
      •  
    •   glyphicon glyphicon-list 
      •  
    •   glyphicon glyphicon-indent-left 
      •  
    •   glyphicon glyphicon-indent-right 
      •  
    •   glyphicon glyphicon-facetime-video 
      •  
    •   glyphicon glyphicon-picture 
      •  
    •   glyphicon glyphicon-map-marker 
      •  
    •   glyphicon glyphicon-adjust 
      •  
    •   glyphicon glyphicon-tint 
      •  
    •   glyphicon glyphicon-edit 
      •  
    •   glyphicon glyphicon-share 
      •  
    •   glyphicon glyphicon-check 
      •  
    •   glyphicon glyphicon-move 
      •  
    •   glyphicon glyphicon-step-backward 
      •  
    •   glyphicon glyphicon-fast-backward 
      •  
    •   glyphicon glyphicon-backward 
      •  
    •   glyphicon glyphicon-play 
      •  
    •   glyphicon glyphicon-pause 
      •  
    •   glyphicon glyphicon-stop 
      •  
    •   glyphicon glyphicon-forward 
      •  
    •   glyphicon glyphicon-fast-forward 
      •  
    •   glyphicon glyphicon-step-forward 
      •  
    •   glyphicon glyphicon-eject 
      •  
    •   glyphicon glyphicon-chevron-left 
      •  
    •   glyphicon glyphicon-chevron-right 
      •  
    •   glyphicon glyphicon-plus-sign 
      •  
    •   glyphicon glyphicon-minus-sign 
      •  
    •   glyphicon glyphicon-remove-sign 
      •  
    •   glyphicon glyphicon-ok-sign 
      •  
    •   glyphicon glyphicon-question-sign 
      •  
    •   glyphicon glyphicon-info-sign 
      •  
    •   glyphicon glyphicon-screenshot 
      •  
    •   glyphicon glyphicon-remove-circle 
      •  
    •   glyphicon glyphicon-ok-circle 
      •  
    •   glyphicon glyphicon-ban-circle 
      •  
    •   glyphicon glyphicon-arrow-left 
      •  
    •   glyphicon glyphicon-arrow-right 
      •  
    •   glyphicon glyphicon-arrow-up 
      •  
    •   glyphicon glyphicon-arrow-down 
      •  
    •   glyphicon glyphicon-share-alt 
      •  
    •   glyphicon glyphicon-resize-full 
      •  
    •   glyphicon glyphicon-resize-small 
      •  
    •   glyphicon glyphicon-exclamation-sign 
      •  
    •   glyphicon glyphicon-gift 
      •  
    •   glyphicon glyphicon-leaf 
      •  
    •   glyphicon glyphicon-fire 
      •  
    •   glyphicon glyphicon-eye-open 
      •  
    •   glyphicon glyphicon-eye-close 
      •  
    •   glyphicon glyphicon-warning-sign 
      •  
    •   glyphicon glyphicon-plane 
      •  
    •   glyphicon glyphicon-calendar 
      •  
    •   glyphicon glyphicon-random 
      •  
    •   glyphicon glyphicon-comment 
      •  
    •   glyphicon glyphicon-magnet 
      •  
    •   glyphicon glyphicon-chevron-up 
      •  
    •   glyphicon glyphicon-chevron-down 
      •  
    •   glyphicon glyphicon-retweet 
      •  
    •   glyphicon glyphicon-shopping-cart 
      •  
    •   glyphicon glyphicon-folder-close 
      •  
    •   glyphicon glyphicon-folder-open 
      •  
    •   glyphicon glyphicon-resize-vertical 
      •  
    •   glyphicon glyphicon-resize-horizontal 
      •  
    •   glyphicon glyphicon-hdd 
      •  
    •   glyphicon glyphicon-bullhorn 
      •  
    •   glyphicon glyphicon-bell 
      •  
    •   glyphicon glyphicon-certificate 
      •  
    •   glyphicon glyphicon-thumbs-up 
      •  
    •   glyphicon glyphicon-thumbs-down 
      •  
    •   glyphicon glyphicon-hand-right 
      •  
    •   glyphicon glyphicon-hand-left 
      •  
    •   glyphicon glyphicon-hand-up 
      •  
    •   glyphicon glyphicon-hand-down 
      •  
    •   glyphicon glyphicon-circle-arrow-right 
      •  
    •   glyphicon glyphicon-circle-arrow-left 
      •  
    •   glyphicon glyphicon-circle-arrow-up 
      •  
    •   glyphicon glyphicon-circle-arrow-down 
      •  
    •   glyphicon glyphicon-globe 
      •  
    •   glyphicon glyphicon-wrench 
      •  
    •   glyphicon glyphicon-tasks 
      •  
    •   glyphicon glyphicon-filter 
      •  
    •   glyphicon glyphicon-briefcase 
      •  
    •   glyphicon glyphicon-fullscreen 
      •  
    •   glyphicon glyphicon-dashboard 
      •  
    •   glyphicon glyphicon-paperclip 
      •  
    •   glyphicon glyphicon-heart-empty 
      •  
    •   glyphicon glyphicon-link 
      •  
    •   glyphicon glyphicon-phone 
      •  
    •   glyphicon glyphicon-pushpin 
      •  
    •   glyphicon glyphicon-usd 
      •  
    •   glyphicon glyphicon-gbp 
      •  
    •   glyphicon glyphicon-sort 
      •  
    •   glyphicon glyphicon-sort-by-alphabet 
      •  
    •   glyphicon glyphicon-sort-by-alphabet-alt 
      •  
    •   glyphicon glyphicon-sort-by-order 
      •  
    •   glyphicon glyphicon-sort-by-order-alt 
      •  
    •   glyphicon glyphicon-sort-by-attributes 
      •  
    •   glyphicon glyphicon-sort-by-attributes-alt 
      •  
    •   glyphicon glyphicon-unchecked 
      •  
    •   glyphicon glyphicon-expand 
      •  
    •   glyphicon glyphicon-collapse-down 
      •  
    •   glyphicon glyphicon-collapse-up 
      •  
    •   glyphicon glyphicon-log-in 
      •  
    •   glyphicon glyphicon-flash 
      •  
    •   glyphicon glyphicon-log-out 
      •  
    •   glyphicon glyphicon-new-window 
      •  
    •   glyphicon glyphicon-record 
      •  
    •   glyphicon glyphicon-save 
      •  
    •   glyphicon glyphicon-open 
      •  
    •   glyphicon glyphicon-saved 
      •  
    •   glyphicon glyphicon-import 
      •  
    •   glyphicon glyphicon-export 
      •  
    •   glyphicon glyphicon-send 
      •  
    •   glyphicon glyphicon-floppy-disk 
      •  
    •   glyphicon glyphicon-floppy-saved 
      •  
    •   glyphicon glyphicon-floppy-remove 
      •  
    •   glyphicon glyphicon-floppy-save 
      •  
    •   glyphicon glyphicon-floppy-open 
      •  
    •   glyphicon glyphicon-credit-card 
      •  
    •   glyphicon glyphicon-transfer 
      •  
    •   glyphicon glyphicon-cutlery 
      •  
    •   glyphicon glyphicon-header 
      •  
    •   glyphicon glyphicon-compressed 
      •  
    •   glyphicon glyphicon-earphone 
      •  
    •   glyphicon glyphicon-phone-alt 
      •  
    •   glyphicon glyphicon-tower 
      •  
    •   glyphicon glyphicon-stats 
      •  
    •   glyphicon glyphicon-sd-video 
      •  
    •   glyphicon glyphicon-hd-video 
      •  
    •   glyphicon glyphicon-subtitles 
      •  
    •   glyphicon glyphicon-sound-stereo 
      •  
    •   glyphicon glyphicon-sound-dolby 
      •  
    •   glyphicon glyphicon-sound-5-1 
      •  
    •   glyphicon glyphicon-sound-6-1 
      •  
    •   glyphicon glyphicon-sound-7-1 
      •  
    •   glyphicon glyphicon-copyright-mark 
      •  
    •   glyphicon glyphicon-registration-mark 
      •  
    •   glyphicon glyphicon-cloud-download 
      •  
    •   glyphicon glyphicon-cloud-upload 
      •  
    •   glyphicon glyphicon-tree-conifer 
      •  
    •   glyphicon glyphicon-tree-deciduous 
      •  
    •   glyphicon glyphicon-cd 
      •  
    •   glyphicon glyphicon-save-file 
      •  
    •   glyphicon glyphicon-open-file 
      •  
    •   glyphicon glyphicon-level-up 
      •  
    •   glyphicon glyphicon-copy 
      •  
    •   glyphicon glyphicon-paste 
      •  
    •   glyphicon glyphicon-alert 
      •  
    •   glyphicon glyphicon-equalizer 
      •  
    •   glyphicon glyphicon-king 
      •  
    •   glyphicon glyphicon-queen 
      •  
    •   glyphicon glyphicon-pawn 
      •  
    •   glyphicon glyphicon-bishop 
      •  
    •   glyphicon glyphicon-knight 
      •  
    •   glyphicon glyphicon-baby-formula 
      •  
    •   glyphicon glyphicon-tent 
      •  
    •   glyphicon glyphicon-blackboard 
      •  
    •   glyphicon glyphicon-bed 
      •  
    •   glyphicon glyphicon-apple 
      •  
    •   glyphicon glyphicon-erase 
      •  
    •   glyphicon glyphicon-hourglass 
      •  
    •   glyphicon glyphicon-lamp 
      •  
    •   glyphicon glyphicon-duplicate 
      •  
    •   glyphicon glyphicon-piggy-bank 
      •  
    •   glyphicon glyphicon-scissors 
      •  
    •   glyphicon glyphicon-bitcoin 
      •  
    •   glyphicon glyphicon-btc 
      •  
    •   glyphicon glyphicon-xbt 
      •  
    •   glyphicon glyphicon-yen 
      •  
    •   glyphicon glyphicon-jpy 
      •  
    •   glyphicon glyphicon-ruble 
      •  
    •   glyphicon glyphicon-rub 
      •  
    •   glyphicon glyphicon-scale 
      •  
    •   glyphicon glyphicon-ice-lolly 
      •  
    •   glyphicon glyphicon-ice-lolly-tasted 
      •  
    •   glyphicon glyphicon-education 
      •  
    •   glyphicon glyphicon-option-horizontal 
      •  
    •   glyphicon glyphicon-option-vertical 
      •  
    •   glyphicon glyphicon-menu-hamburger 
      •  
    •   glyphicon glyphicon-modal-window 
      •  
    •   glyphicon glyphicon-oil 
      •  
    •   glyphicon glyphicon-grain 
      •  
    •   glyphicon glyphicon-sunglasses 
      •  
    •   glyphicon glyphicon-text-size 
      •  
    •   glyphicon glyphicon-text-color 
      •  
    •   glyphicon glyphicon-text-background 
      •  
    •   glyphicon glyphicon-object-align-top 
      •  
    •   glyphicon glyphicon-object-align-bottom 
      •  
    •   glyphicon glyphicon-object-align-horizontal 
      •  
    •   glyphicon glyphicon-object-align-left 
      •  
    •   glyphicon glyphicon-object-align-vertical 
      •  
    •   glyphicon glyphicon-object-align-right 
      •  
    •   glyphicon glyphicon-triangle-right 
      •  
    •   glyphicon glyphicon-triangle-left 
      •  
    •   glyphicon glyphicon-triangle-bottom 
      •  
    •   glyphicon glyphicon-triangle-top 
      •  
    •   glyphicon glyphicon-console 
      •  
    •   glyphicon glyphicon-superscript 
      •  
    •   glyphicon glyphicon-subscript 
      •  
    •   glyphicon glyphicon-menu-left 
      •  
    •   glyphicon glyphicon-menu-right 
      •  
    •   glyphicon glyphicon-menu-down 
      •  
    •   glyphicon glyphicon-menu-up 
      •  
     
     
    How to use
     
    For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.
     
     
    Don't mix with other components
     
    Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.
     
     
     
    Only for use on empty elements
     
    Icon classes should only be used on elements that contain no text content and have no child elements.
     
     
     
    Changing the icon font location
     
    Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:
     
       
    • Change the @icon-font-path and/or @icon-font-name variables in the source Less files.
      •  
    • Utilize the relative URLs option provided by the Less compiler.
      •  
    • Change the url() paths in the compiled CSS.
      •  
     
    Use whatever option best suits your specific development setup.
     
     
     
    Accessible icons
     
    Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.
     
    If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.
     
    If you're creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.
     
     
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
     
    Examples
     
    Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
     
       
     
    <button type="button" class="btn btn-default" aria-label="Left Align">
   <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
 </button>
 
diff --git a/css/index.html b/css/index.html
index f989fbfd38..d39fcbdb64 100644
--- a/css/index.html
+++ b/css/index.html
@@ -1,5 +1,5 @@
            CSS · Bootstrap            
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!    
     
     
    CSS
     
    Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
     
     
     
     
     
    Overview
     
    Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.
     
    HTML5 doctype
     
    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.
     
    <!DOCTYPE html>
+     
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!    
     
     
    CSS
     
    Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
     
     
     
     
     
    Overview
     
    Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.
     
    HTML5 doctype
     
    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.
     
    <!DOCTYPE html>
 <html lang="en">
   ...
 </html>
     
    Mobile first
     
    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>.
     
    <meta name="viewport" content="width=device-width, initial-scale=1">
     
    You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!
     
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      
    Bootstrap sets basic global display, typography, and link styles. Specifically, we:
     
       
    • Set background-color: #fff; 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.
     
    Normalize.css
     
    For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal.
     
    Containers
     
    Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
     
    Use .container for a responsive fixed width container.
     
    <div class="container">
diff --git a/customize/index.html b/customize/index.html
index 05c91c06c8..eb157a7ac2 100644
--- a/customize/index.html
+++ b/customize/index.html
@@ -1,5 +1,5 @@
            Customize and download · Bootstrap          
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!    
     
     
    Customize and download
     
    Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
     
     
     
         
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!    
     
     
    Customize and download
     
    Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
     
     
     
          
    Skip to main content
        
     
     
    Getting started
     
    An overview of Bootstrap, how to download and use, basic templates and examples, and more.
     
     
     
     
     
    Download
     
    Bootstrap (currently v3.3.6) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
     
     
     
    Bootstrap
     
    Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.
     
     Download Bootstrap 
     
     
     
    Source code
     
    Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.
     
     Download source 
     
     
     
    Sass
     
    Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.
     
     Download Sass 
     
     
     
    Bootstrap CDN
     
    The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links.
     
    <!-- Latest compiled and minified CSS -->
+     
    Skip to main content
        
     
     
    Getting started
     
    An overview of Bootstrap, how to download and use, basic templates and examples, and more.
     
     
     
     
     
    Download
     
    Bootstrap (currently v3.3.6) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
     
     
     
    Bootstrap
     
    Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.
     
     Download Bootstrap 
     
     
     
    Source code
     
    Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.
     
     Download source 
     
     
     
    Sass
     
    Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.
     
     Download Sass 
     
     
     
    Bootstrap CDN
     
    The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links.
     
    <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 
 <!-- Optional theme -->
diff --git a/index.html b/index.html
index 01529b0776..4f09ff489f 100644
--- a/index.html
+++ b/index.html
@@ -1,2 +1,2 @@
            Bootstrap · The world's most popular mobile-first and responsive front-end framework.          
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!    
     
     B 
    Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
     
     Download Bootstrap 
     
    Currently v3.3.6
     
     
     
    Designed for everyone, everywhere.
     
    Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
     
     
     
     Sass and Less support 
    Preprocessors
     
    Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.
     
     
     Responsive across devices 
    One framework, every device.
     
    Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
     
     
     Components 
    Full of features
     
    With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.
     
     
     
     
    Bootstrap is open source. It's hosted, developed, and maintained on GitHub.
     View the GitHub project 
     
     
     
     
    Built with Bootstrap.
     
    Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing collection of examples or by exploring some of our favorites.
     
     
     
      Lyft  
     
      Vogue  
     
      Riot Design  
     
      Newsweek  
     
     
     
    We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.
     Explore the Expo 
     
         
+     
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!    
     
     B 
    Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
     
     Download Bootstrap 
     
    Currently v3.3.6
     
     
     
    Designed for everyone, everywhere.
     
    Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
     
     
     
     Sass and Less support 
    Preprocessors
     
    Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.
     
     
     Responsive across devices 
    One framework, every device.
     
    Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
     
     
     Components 
    Full of features
     
    With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.
     
     
     
     
    Bootstrap is open source. It's hosted, developed, and maintained on GitHub.
     View the GitHub project 
     
     
     
     
    Built with Bootstrap.
     
    Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing collection of examples or by exploring some of our favorites.
     
     
     
      Lyft  
     
      Vogue  
     
      Riot Design  
     
      Newsweek  
     
     
     
    We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.
     Explore the Expo 
     
         
diff --git a/javascript/index.html b/javascript/index.html
index 2950a230cd..c22681dbbd 100644
--- a/javascript/index.html
+++ b/javascript/index.html
@@ -1,5 +1,5 @@
            JavaScript · Bootstrap            
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!    
     
     
    JavaScript
     
    Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
     
     
     
     
     
    Overview
     
    Individual or compiled
     
    Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js).
     
     
    Using the compiled JavaScript
     
    Both bootstrap.js and bootstrap.min.js contain all plugins in a single file. Include only one.
     
     
     
    Plugin dependencies
     
    Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.
     
     
    Data attributes
     
    You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.
     
    That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with data-api. This looks like this:
     
    $(document).off('.data-api')
     
    Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:
     
    $(document).off('.alert.data-api')
     
     
    Only one plugin per element via data attributes
     
    Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.
     
     
    Programmatic API
     
    We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
     
    $('.btn.danger').button('toggle').addClass('fat')
     
    All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):
     
    $('#myModal').modal()                      // initialized with defaults
+     
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!    
     
     
    JavaScript
     
    Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
     
     
     
     
     
    Overview
     
    Individual or compiled
     
    Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js).
     
     
    Using the compiled JavaScript
     
    Both bootstrap.js and bootstrap.min.js contain all plugins in a single file. Include only one.
     
     
     
    Plugin dependencies
     
    Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.
     
     
    Data attributes
     
    You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.
     
    That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with data-api. This looks like this:
     
    $(document).off('.data-api')
     
    Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:
     
    $(document).off('.alert.data-api')
     
     
    Only one plugin per element via data attributes
     
    Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.
     
     
    Programmatic API
     
    We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
     
    $('.btn.danger').button('toggle').addClass('fat')
     
    All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):
     
    $('#myModal').modal()                      // initialized with defaults
 $('#myModal').modal({ keyboard: false })   // initialized with no keyboard
 $('#myModal').modal('show')                // initializes and invokes show immediately
     
    Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel="popover"]').data('popover').
     
    Default settings
     
    You can change the default settings for a plugin by modifying the plugin's Constructor.DEFAULTS object:
     
    $.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false
     
    No conflict
     
    Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.
     
    var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
 $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
     
    Events
     
    Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is triggered on the completion of an action.
     
    As of 3.0.0, all Bootstrap events are namespaced.
     
    All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.
     
    $('#myModal').on('show.bs.modal', function (e) {
diff --git a/migration/index.html b/migration/index.html
index 6f050a0c89..2f67461d45 100644
--- a/migration/index.html
+++ b/migration/index.html
@@ -1,2 +1,2 @@
            Migrating to v3.x · Bootstrap          
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!    
     
     
    Migrating to v3.x
     
    Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.
     
     
     
      
     
    Migrating from 2.x to 3.0
     
    Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see what's new in the v3.0 release announcement.
     
    Major class changes
     
    This table shows the style changes between v2.x and v3.0.
     
     
      
     Bootstrap 2.x Bootstrap 3.0 
           
     .row-fluid .row 
     
     .span* .col-md-* 
     
     .offset* .col-md-offset-* 
     
     .brand .navbar-brand 
     
     .navbar .nav .navbar-nav 
     
     .nav-collapse .navbar-collapse 
     
     .nav-toggle .navbar-toggle 
     
     .btn-navbar .navbar-btn 
     
     .hero-unit .jumbotron 
     
     .icon-* .glyphicon .glyphicon-* 
     
     .btn .btn .btn-default 
     
     .btn-mini .btn-xs 
     
     .btn-small .btn-sm 
     
     .btn-large .btn-lg 
     
     .alert .alert .alert-warning 
     
     .alert-error .alert-danger 
     
     .visible-phone .visible-xs 
     
     .visible-tablet .visible-sm 
     
     .visible-desktop Split into .visible-md .visible-lg 
     
     .hidden-phone .hidden-xs 
     
     .hidden-tablet .hidden-sm 
     
     .hidden-desktop Split into .hidden-md .hidden-lg 
     
     .input-block-level .form-control 
     
     .control-group .form-group 
     
     .control-group.warning .control-group.error .control-group.success .form-group.has-* 
     
     .checkbox.inline .radio.inline .checkbox-inline .radio-inline 
     
     .input-prepend .input-append .input-group 
     
     .add-on .input-group-addon 
     
     .img-polaroid .img-thumbnail 
     
     ul.unstyled .list-unstyled 
     
     ul.inline .list-inline 
     
     .muted .text-muted 
     
     .label .label .label-default 
     
     .label-important .label-danger 
     
     .text-error .text-danger 
     
     .table .error .table .danger 
     
     .bar .progress-bar 
     
     .bar-* .progress-bar-* 
     
     .accordion .panel-group 
     
     .accordion-group .panel .panel-default 
     
     .accordion-heading .panel-heading 
     
     .accordion-body .panel-collapse 
     
     .accordion-inner .panel-body 
          
     
     
    What's new
     
    We've added new elements and changed some existing ones. Here are the new or updated styles.
     
     
      
     Element Description 
           
     Panels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse 
     
     List groups .list-group .list-group-item .list-group-item-text .list-group-item-heading 
     
     Glyphicons .glyphicon 
     
     Jumbotron .jumbotron 
     
     Extra small grid (<768px) .col-xs-* 
     
     Small grid (≥768px) .col-sm-* 
     
     Medium grid (≥992px) .col-md-* 
     
     Large grid (≥1200px) .col-lg-* 
     
     Responsive utility classes (≥1200px) .visible-lg .hidden-lg 
     
     Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-* 
     
     Push .col-sm-push-* .col-md-push-* .col-lg-push-* 
     
     Pull .col-sm-pull-* .col-md-pull-* .col-lg-pull-* 
     
     Input height sizes .input-sm .input-lg 
     
     Input groups .input-group .input-group-addon .input-group-btn 
     
     Form controls .form-control .form-group 
     
     Button group sizes .btn-group-xs .btn-group-sm .btn-group-lg 
     
     Navbar text .navbar-text 
     
     Navbar header .navbar-header 
     
     Justified tabs / pills .nav-justified 
     
     Responsive images .img-responsive 
     
     Contextual table rows .success .danger .warning .active .info 
     
     Contextual panels .panel-success .panel-danger .panel-warning .panel-info 
     
     Modal .modal-dialog .modal-content 
     
     Thumbnail image .img-thumbnail 
     
     Well sizes .well-sm .well-lg 
     
     Alert links .alert-link 
          
     
     
    What's removed
     
    The following elements have been dropped or changed in v3.0.
     
     
      
     Element Removed from 2.x 3.0 Equivalent 
           
     Form actions .form-actions N/A 
     
     Search form .form-search N/A 
     
     Form group with info .control-group.info N/A 
     
     Fixed-width input sizes .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Use .form-control and the grid system instead. 
     
     Block level form input .input-block-level No direct equivalent, but forms controls are similar. 
     
     Inverse buttons .btn-inverse N/A 
     
     Fluid row .row-fluid .row (no more fixed grid) 
     
     Controls wrapper .controls N/A 
     
     Controls row .controls-row .row or .form-group 
     
     Navbar inner .navbar-inner N/A 
     
     Navbar vertical dividers .navbar .divider-vertical N/A 
     
     Dropdown submenu .dropdown-submenu N/A 
     
     Tab alignments .tabs-left .tabs-right .tabs-below N/A 
     
     Pill-based tabbable area .pill-content .tab-content 
     
     Pill-based tabbable area pane .pill-pane .tab-pane 
     
     Nav lists .nav-list .nav-header No direct equivalent, but list groups and .panel-groups are similar. 
     
     Inline help for form controls .help-inline No exact equivalent, but .help-block is similar. 
     
     Non-bar-level progress colors .progress-info .progress-success .progress-warning .progress-danger Use .progress-bar-* on the .progress-bar instead. 
          
     
     
    Additional notes
     
    Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:
     
       
    • By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the .form-control class on the element to style.
      •  
    • Text-based form controls with the .form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths.
      •  
    • .badge no longer has contextual (-success,-primary,etc..) classes.
      •  
    • .btn must also use .btn-default to get the "default" button.
      •  
    • .row is now fluid.
      •  
    • Images are no longer responsive by default. Use .img-responsive for fluid <img> size.
      •  
    • The icons, now .glyphicon, are now font based. Icons also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk).
      •  
    • Typeahead has been dropped, in favor of using Twitter Typeahead.
      •  
    • Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior. Also, you should no longer apply .hide to .modal in your markup.
      •  
    • As of v3.1.0, the HTML loaded by the remote modal option is now injected into the .modal-content (from v3.0.0 to v3.0.3, into the .modal) instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.
      •  
    • The checkbox and radio features of the button.js plugin now both use data-toggle="buttons" instead of data-toggle="buttons-checkbox" or data-toggle="buttons-radio" in their markup.
      •  
    • JavaScript events are namespaced. For example, to handle the modal "show" event, use 'show.bs.modal'. For tabs "shown" use 'shown.bs.tab', etc.
      •  
     
    For more information on upgrading to v3.0, and code snippets from the community, see Bootply.
     
     
      
     
         
\ No newline at end of file
+     
    Skip to main content
     Aww yeah, Bootstrap 4 is coming!    
     
     
    Migrating to v3.x
     
    Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.
     
     
     
      
     
    Migrating from 2.x to 3.0
     
    Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see what's new in the v3.0 release announcement.
     
    Major class changes
     
    This table shows the style changes between v2.x and v3.0.
     
     
      
     Bootstrap 2.x Bootstrap 3.0 
           
     .row-fluid .row 
     
     .span* .col-md-* 
     
     .offset* .col-md-offset-* 
     
     .brand .navbar-brand 
     
     .navbar .nav .navbar-nav 
     
     .nav-collapse .navbar-collapse 
     
     .nav-toggle .navbar-toggle 
     
     .btn-navbar .navbar-btn 
     
     .hero-unit .jumbotron 
     
     .icon-* .glyphicon .glyphicon-* 
     
     .btn .btn .btn-default 
     
     .btn-mini .btn-xs 
     
     .btn-small .btn-sm 
     
     .btn-large .btn-lg 
     
     .alert .alert .alert-warning 
     
     .alert-error .alert-danger 
     
     .visible-phone .visible-xs 
     
     .visible-tablet .visible-sm 
     
     .visible-desktop Split into .visible-md .visible-lg 
     
     .hidden-phone .hidden-xs 
     
     .hidden-tablet .hidden-sm 
     
     .hidden-desktop Split into .hidden-md .hidden-lg 
     
     .input-block-level .form-control 
     
     .control-group .form-group 
     
     .control-group.warning .control-group.error .control-group.success .form-group.has-* 
     
     .checkbox.inline .radio.inline .checkbox-inline .radio-inline 
     
     .input-prepend .input-append .input-group 
     
     .add-on .input-group-addon 
     
     .img-polaroid .img-thumbnail 
     
     ul.unstyled .list-unstyled 
     
     ul.inline .list-inline 
     
     .muted .text-muted 
     
     .label .label .label-default 
     
     .label-important .label-danger 
     
     .text-error .text-danger 
     
     .table .error .table .danger 
     
     .bar .progress-bar 
     
     .bar-* .progress-bar-* 
     
     .accordion .panel-group 
     
     .accordion-group .panel .panel-default 
     
     .accordion-heading .panel-heading 
     
     .accordion-body .panel-collapse 
     
     .accordion-inner .panel-body 
          
     
     
    What's new
     
    We've added new elements and changed some existing ones. Here are the new or updated styles.
     
     
      
     Element Description 
           
     Panels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse 
     
     List groups .list-group .list-group-item .list-group-item-text .list-group-item-heading 
     
     Glyphicons .glyphicon 
     
     Jumbotron .jumbotron 
     
     Extra small grid (<768px) .col-xs-* 
     
     Small grid (≥768px) .col-sm-* 
     
     Medium grid (≥992px) .col-md-* 
     
     Large grid (≥1200px) .col-lg-* 
     
     Responsive utility classes (≥1200px) .visible-lg .hidden-lg 
     
     Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-* 
     
     Push .col-sm-push-* .col-md-push-* .col-lg-push-* 
     
     Pull .col-sm-pull-* .col-md-pull-* .col-lg-pull-* 
     
     Input height sizes .input-sm .input-lg 
     
     Input groups .input-group .input-group-addon .input-group-btn 
     
     Form controls .form-control .form-group 
     
     Button group sizes .btn-group-xs .btn-group-sm .btn-group-lg 
     
     Navbar text .navbar-text 
     
     Navbar header .navbar-header 
     
     Justified tabs / pills .nav-justified 
     
     Responsive images .img-responsive 
     
     Contextual table rows .success .danger .warning .active .info 
     
     Contextual panels .panel-success .panel-danger .panel-warning .panel-info 
     
     Modal .modal-dialog .modal-content 
     
     Thumbnail image .img-thumbnail 
     
     Well sizes .well-sm .well-lg 
     
     Alert links .alert-link 
          
     
     
    What's removed
     
    The following elements have been dropped or changed in v3.0.
     
     
      
     Element Removed from 2.x 3.0 Equivalent 
           
     Form actions .form-actions N/A 
     
     Search form .form-search N/A 
     
     Form group with info .control-group.info N/A 
     
     Fixed-width input sizes .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Use .form-control and the grid system instead. 
     
     Block level form input .input-block-level No direct equivalent, but forms controls are similar. 
     
     Inverse buttons .btn-inverse N/A 
     
     Fluid row .row-fluid .row (no more fixed grid) 
     
     Controls wrapper .controls N/A 
     
     Controls row .controls-row .row or .form-group 
     
     Navbar inner .navbar-inner N/A 
     
     Navbar vertical dividers .navbar .divider-vertical N/A 
     
     Dropdown submenu .dropdown-submenu N/A 
     
     Tab alignments .tabs-left .tabs-right .tabs-below N/A 
     
     Pill-based tabbable area .pill-content .tab-content 
     
     Pill-based tabbable area pane .pill-pane .tab-pane 
     
     Nav lists .nav-list .nav-header No direct equivalent, but list groups and .panel-groups are similar. 
     
     Inline help for form controls .help-inline No exact equivalent, but .help-block is similar. 
     
     Non-bar-level progress colors .progress-info .progress-success .progress-warning .progress-danger Use .progress-bar-* on the .progress-bar instead. 
          
     
     
    Additional notes
     
    Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:
     
       
    • By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the .form-control class on the element to style.
      •  
    • Text-based form controls with the .form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths.
      •  
    • .badge no longer has contextual (-success,-primary,etc..) classes.
      •  
    • .btn must also use .btn-default to get the "default" button.
      •  
    • .row is now fluid.
      •  
    • Images are no longer responsive by default. Use .img-responsive for fluid <img> size.
      •  
    • The icons, now .glyphicon, are now font based. Icons also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk).
      •  
    • Typeahead has been dropped, in favor of using Twitter Typeahead.
      •  
    • Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior. Also, you should no longer apply .hide to .modal in your markup.
      •  
    • As of v3.1.0, the HTML loaded by the remote modal option is now injected into the .modal-content (from v3.0.0 to v3.0.3, into the .modal) instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.
      •  
    • The checkbox and radio features of the button.js plugin now both use data-toggle="buttons" instead of data-toggle="buttons-checkbox" or data-toggle="buttons-radio" in their markup.
      •  
    • JavaScript events are namespaced. For example, to handle the modal "show" event, use 'show.bs.modal'. For tabs "shown" use 'shown.bs.tab', etc.
      •  
     
    For more information on upgrading to v3.0, and code snippets from the community, see Bootply.
     
     
      
     
         
\ No newline at end of file