From: XhmikosR Date: Sat, 29 Dec 2018 20:10:00 +0000 (+0200) Subject: Use https when possible. X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=169c075294b50e9d9101910c9da8b647e4312001;p=thirdparty%2Fbootstrap.git Use https when possible. --- diff --git a/1.0.0/index.html b/1.0.0/index.html index a1c9e9cce3..8766806089 100755 --- a/1.0.0/index.html +++ b/1.0.0/index.html @@ -501,7 +501,7 @@ </table>

Example: Zebra-striped w/ TableSorter.js

-

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column's header to change the sort.

+

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column's header to change the sort.

@@ -1304,8 +1304,8 @@ Lorem ipsum dolar sit amet illo error ipsum verita

Back to top

- Designed and built with all the love in the world @twitter by @mdo and @fat.
- Licensed under the Apache License v2.0. + Designed and built with all the love in the world @twitter by @mdo and @fat.
+ Licensed under the Apache License v2.0.

diff --git a/1.1.0/index.html b/1.1.0/index.html index cdfc4c3988..6ba183192a 100755 --- a/1.1.0/index.html +++ b/1.1.0/index.html @@ -561,7 +561,7 @@ ... </table>

Example: Zebra-striped w/ TableSorter.js

-

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

+

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

@@ -1384,8 +1384,8 @@ Lorem ipsum dolar sit amet illo error ipsum verita

Back to top

- Designed and built with all the love in the world @twitter by @mdo and @fat.
- Licensed under the Apache License v2.0. + Designed and built with all the love in the world @twitter by @mdo and @fat.
+ Licensed under the Apache License v2.0.

diff --git a/1.1.1/index.html b/1.1.1/index.html index f4222f83f8..1eb6c3a7fa 100755 --- a/1.1.1/index.html +++ b/1.1.1/index.html @@ -555,7 +555,7 @@ ... </table>

Example: Zebra-striped w/ TableSorter.js

-

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

+

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

@@ -1385,8 +1385,8 @@ Lorem ipsum dolar sit amet illo error ipsum verita

Back to top

- Designed and built with all the love in the world @twitter by @mdo and @fat.
- Licensed under the Apache License v2.0. + Designed and built with all the love in the world @twitter by @mdo and @fat.
+ Licensed under the Apache License v2.0.

diff --git a/1.2.0/index.html b/1.2.0/index.html index 15e89a52c2..8544246f52 100755 --- a/1.2.0/index.html +++ b/1.2.0/index.html @@ -567,7 +567,7 @@ ... </table>

Example: Zebra-striped w/ TableSorter.js

-

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

+

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

@@ -1410,8 +1410,8 @@ Lorem ipsum dolar sit amet illo error ipsum verita

Back to top

- Designed and built with all the love in the world @twitter by @mdo and @fat.
- Licensed under the Apache License v2.0. + Designed and built with all the love in the world @twitter by @mdo and @fat.
+ Licensed under the Apache License v2.0.

diff --git a/1.3.0/index.html b/1.3.0/index.html index 30249b3d36..3194c001c9 100755 --- a/1.3.0/index.html +++ b/1.3.0/index.html @@ -130,7 +130,7 @@

Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.

Read more on dev.twitter.com ›

- +

@@ -922,7 +922,7 @@ ... </table>

Example: Zebra-striped w/ TableSorter.js

-

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

+

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

@@ -1714,7 +1714,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita

What's included

-

Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.

+

Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.

@@ -1931,8 +1931,8 @@ Lorem ipsum dolar sit amet illo error ipsum verita

Back to top

- Designed and built with all the love in the world @twitter by @mdo and @fat.
- Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0. + Designed and built with all the love in the world @twitter by @mdo and @fat.
+ Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

diff --git a/1.3.0/javascript.html b/1.3.0/javascript.html index 731b085150..fd1d38f941 100755 --- a/1.3.0/javascript.html +++ b/1.3.0/javascript.html @@ -73,7 +73,7 @@

Javascript for Bootstrap

- Bring Bootstrap's components to life with new, custom plugins that work with jQuery and Ender. + Bring Bootstrap's components to life with new, custom plugins that work with jQuery and Ender.

← Back to Bootstrap home

@@ -675,8 +675,8 @@ $('#my-modal').bind('hidden', function () {

Back to top

- Designed and built with all the love in the world @twitter by @mdo and @fat.
- Licensed under the Apache License v2.0. + Designed and built with all the love in the world @twitter by @mdo and @fat.
+ Licensed under the Apache License v2.0.

diff --git a/1.4.0/index.html b/1.4.0/index.html index 4ed42e0517..1662f24413 100755 --- a/1.4.0/index.html +++ b/1.4.0/index.html @@ -120,7 +120,7 @@

Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.

Read more on dev.twitter.com ›

- +

@@ -994,7 +994,7 @@ ... </table>

Example: Zebra-striped w/ TableSorter.js

-

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

+

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

@@ -1804,7 +1804,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita

What's included

-

Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.

+

Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.

@@ -2025,8 +2025,8 @@ Lorem ipsum dolar sit amet illo error ipsum verita

Back to top

- Designed and built with all the love in the world @twitter by @mdo and @fat.
- Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0. + Designed and built with all the love in the world @twitter by @mdo and @fat.
+ Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

diff --git a/1.4.0/javascript.html b/1.4.0/javascript.html index 7f6bdad9c1..c53556a7c5 100755 --- a/1.4.0/javascript.html +++ b/1.4.0/javascript.html @@ -75,7 +75,7 @@

Javascript for Bootstrap

- Bring Bootstrap's components to life with new, custom plugins that work with jQuery and Ender. + Bring Bootstrap's components to life with new, custom plugins that work with jQuery and Ender.

← Back to Bootstrap home

@@ -797,8 +797,8 @@ $('#.tabs').bind('change', function (e) {

Back to top

- Designed and built with all the love in the world @twitter by @mdo and @fat.
- Licensed under the Apache License v2.0. + Designed and built with all the love in the world @twitter by @mdo and @fat.
+ Licensed under the Apache License v2.0.

diff --git a/2.0.0/base-css.html b/2.0.0/base-css.html index 8a3f952903..1fcfc115a2 100755 --- a/2.0.0/base-css.html +++ b/2.0.0/base-css.html @@ -1310,7 +1310,7 @@ For example, <code>section</code> should be wrapped as inline. ================================================== -->
@@ -1465,7 +1465,7 @@ For example, <code>section</code> should be wrapped as inline.

Built as a sprite

Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

-

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

+

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

@@ -1557,9 +1557,9 @@ For example, <code>section</code> should be wrapped as inline. ================================================== -->
diff --git a/2.0.0/components.html b/2.0.0/components.html index 2846748205..ad977fda1d 100755 --- a/2.0.0/components.html +++ b/2.0.0/components.html @@ -1492,9 +1492,9 @@ ================================================== -->
diff --git a/2.0.0/download.html b/2.0.0/download.html index 2d36ac91fc..40f94d5c66 100755 --- a/2.0.0/download.html +++ b/2.0.0/download.html @@ -99,9 +99,9 @@ ================================================== --> diff --git a/2.0.0/examples.html b/2.0.0/examples.html index eade156766..0daa16df8a 100755 --- a/2.0.0/examples.html +++ b/2.0.0/examples.html @@ -120,9 +120,9 @@ ================================================== --> diff --git a/2.0.0/index.html b/2.0.0/index.html index 63912c1c00..27b20a2bfa 100755 --- a/2.0.0/index.html +++ b/2.0.0/index.html @@ -183,7 +183,7 @@

Made at Twitter

-

Brought to you by an experienced engineer and designer.

+

Brought to you by an experienced engineer and designer.

@@ -203,7 +203,7 @@
  • - + JS Hint
  • @@ -215,9 +215,9 @@ ================================================== --> diff --git a/2.0.0/javascript.html b/2.0.0/javascript.html index a412509eb4..ce724e7cb5 100755 --- a/2.0.0/javascript.html +++ b/2.0.0/javascript.html @@ -87,7 +87,7 @@ ================================================== -->

    Javascript for Bootstrap

    -

    Bring Bootstrap's components to life—now with 12 custom jQuery plugins. +

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

    diff --git a/2.0.0/less.html b/2.0.0/less.html index 10dd2368ec..95064b5dda 100755 --- a/2.0.0/less.html +++ b/2.0.0/less.html @@ -771,9 +771,9 @@ ================================================== --> diff --git a/2.0.0/scaffolding.html b/2.0.0/scaffolding.html index 8a12415e55..cffd0537cc 100755 --- a/2.0.0/scaffolding.html +++ b/2.0.0/scaffolding.html @@ -413,9 +413,9 @@ ================================================== --> diff --git a/2.0.0/upgrading.html b/2.0.0/upgrading.html index a970ee6758..e21661a000 100755 --- a/2.0.0/upgrading.html +++ b/2.0.0/upgrading.html @@ -272,9 +272,9 @@ ================================================== --> diff --git a/2.0.1/base-css.html b/2.0.1/base-css.html index a0f70349a4..7ed533cc78 100755 --- a/2.0.1/base-css.html +++ b/2.0.1/base-css.html @@ -1381,7 +1381,7 @@ For example, <code>section</code> should be wrapped as inline. ================================================== -->
    @@ -1532,7 +1532,7 @@ For example, <code>section</code> should be wrapped as inline.

    Built as a sprite

    Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

    All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

    -

    Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

    +

    Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

    How to use

    @@ -1624,9 +1624,9 @@ For example, <code>section</code> should be wrapped as inline. ================================================== -->
    diff --git a/2.0.1/components.html b/2.0.1/components.html index 27b60ce802..8878630064 100755 --- a/2.0.1/components.html +++ b/2.0.1/components.html @@ -1567,9 +1567,9 @@ ================================================== -->
    diff --git a/2.0.1/download.html b/2.0.1/download.html index 599303a60f..134864891c 100755 --- a/2.0.1/download.html +++ b/2.0.1/download.html @@ -98,9 +98,9 @@ ================================================== --> diff --git a/2.0.1/examples.html b/2.0.1/examples.html index 8268667d0c..acde796eac 100755 --- a/2.0.1/examples.html +++ b/2.0.1/examples.html @@ -120,9 +120,9 @@ ================================================== --> diff --git a/2.0.1/index.html b/2.0.1/index.html index b829aa8ddc..570a1456ce 100755 --- a/2.0.1/index.html +++ b/2.0.1/index.html @@ -191,7 +191,7 @@

    Made at Twitter

    -

    Brought to you by an experienced engineer and designer.

    +

    Brought to you by an experienced engineer and designer.

    @@ -211,7 +211,7 @@
  • - + JS Hint
  • @@ -223,9 +223,9 @@ ================================================== --> diff --git a/2.0.1/javascript.html b/2.0.1/javascript.html index 71d9be5a4e..d7b3de837c 100755 --- a/2.0.1/javascript.html +++ b/2.0.1/javascript.html @@ -87,7 +87,7 @@ ================================================== -->

    Javascript for Bootstrap

    -

    Bring Bootstrap's components to life—now with 12 custom jQuery plugins. +

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

    diff --git a/2.0.1/less.html b/2.0.1/less.html index ca206a0961..706e936010 100755 --- a/2.0.1/less.html +++ b/2.0.1/less.html @@ -770,9 +770,9 @@ ================================================== --> diff --git a/2.0.1/scaffolding.html b/2.0.1/scaffolding.html index 0930db002f..0c1a96222f 100755 --- a/2.0.1/scaffolding.html +++ b/2.0.1/scaffolding.html @@ -523,9 +523,9 @@ ================================================== --> diff --git a/2.0.1/upgrading.html b/2.0.1/upgrading.html index 6d3de22994..2eb18ec246 100755 --- a/2.0.1/upgrading.html +++ b/2.0.1/upgrading.html @@ -283,9 +283,9 @@ ================================================== --> diff --git a/2.0.2/base-css.html b/2.0.2/base-css.html index d966e6b436..4c24a98ab2 100755 --- a/2.0.2/base-css.html +++ b/2.0.2/base-css.html @@ -1419,7 +1419,7 @@ For example, <code>section</code> should be wrapped as inline. ================================================== -->
    @@ -1567,7 +1567,7 @@ For example, <code>section</code> should be wrapped as inline.

    Built as a sprite

    Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

    All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

    -

    Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

    +

    Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

    How to use

    @@ -1663,9 +1663,9 @@ For example, <code>section</code> should be wrapped as inline. ================================================== -->
    diff --git a/2.0.2/components.html b/2.0.2/components.html index a029ce03d5..ef2744d900 100755 --- a/2.0.2/components.html +++ b/2.0.2/components.html @@ -1917,9 +1917,9 @@ ================================================== -->
    diff --git a/2.0.2/download.html b/2.0.2/download.html index da623db45b..cdfe79ccea 100755 --- a/2.0.2/download.html +++ b/2.0.2/download.html @@ -99,9 +99,9 @@ ================================================== --> diff --git a/2.0.2/examples.html b/2.0.2/examples.html index feac164594..a50eb6f1cc 100755 --- a/2.0.2/examples.html +++ b/2.0.2/examples.html @@ -120,9 +120,9 @@ ================================================== --> diff --git a/2.0.2/index.html b/2.0.2/index.html index 7933486512..3de21f3ed0 100755 --- a/2.0.2/index.html +++ b/2.0.2/index.html @@ -194,7 +194,7 @@

    Made at Twitter

    -

    Brought to you by an experienced engineer and designer.

    +

    Brought to you by an experienced engineer and designer.

    @@ -219,7 +219,7 @@
  • - + JS Hint
  • @@ -231,9 +231,9 @@ ================================================== --> diff --git a/2.0.2/javascript.html b/2.0.2/javascript.html index 53f6ddfa66..d0e1a649a6 100755 --- a/2.0.2/javascript.html +++ b/2.0.2/javascript.html @@ -87,7 +87,7 @@ ================================================== -->

    Javascript for Bootstrap

    -

    Bring Bootstrap's components to life—now with 12 custom jQuery plugins. +

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

    diff --git a/2.0.2/less.html b/2.0.2/less.html index 91addcd71d..9626af4e86 100755 --- a/2.0.2/less.html +++ b/2.0.2/less.html @@ -765,9 +765,9 @@ ================================================== --> diff --git a/2.0.2/scaffolding.html b/2.0.2/scaffolding.html index 94ec3a54af..912f6a2fe4 100755 --- a/2.0.2/scaffolding.html +++ b/2.0.2/scaffolding.html @@ -132,7 +132,7 @@

    Reset via Normalize

    -

    As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate.

    +

    As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate.

    The new reset can still be found in reset.less, but with many elements removed for brevity and accuracy.

    @@ -648,9 +648,9 @@ ================================================== --> diff --git a/2.0.2/upgrading.html b/2.0.2/upgrading.html index aafe30c483..86aed71e29 100755 --- a/2.0.2/upgrading.html +++ b/2.0.2/upgrading.html @@ -283,9 +283,9 @@ ================================================== --> diff --git a/2.0.3/base-css.html b/2.0.3/base-css.html index dad91c15e0..058d06f16b 100755 --- a/2.0.3/base-css.html +++ b/2.0.3/base-css.html @@ -1419,7 +1419,7 @@ For example, <code>section</code> should be wrapped as inline. ================================================== -->
    @@ -1587,7 +1587,7 @@ For example, <code>section</code> should be wrapped as inline.

    Built as a sprite

    Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

    All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

    -

    Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

    +

    Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

    How to use

    @@ -1682,9 +1682,9 @@ For example, <code>section</code> should be wrapped as inline. ================================================== -->
    diff --git a/2.0.3/components.html b/2.0.3/components.html index 507535620f..af2899b341 100755 --- a/2.0.3/components.html +++ b/2.0.3/components.html @@ -1905,9 +1905,9 @@ ================================================== -->
    diff --git a/2.0.3/download.html b/2.0.3/download.html index 851496e747..56dc9274f8 100755 --- a/2.0.3/download.html +++ b/2.0.3/download.html @@ -99,9 +99,9 @@ ================================================== --> diff --git a/2.0.3/examples.html b/2.0.3/examples.html index 62c8ab114a..de56809067 100755 --- a/2.0.3/examples.html +++ b/2.0.3/examples.html @@ -121,9 +121,9 @@ ================================================== --> diff --git a/2.0.3/index.html b/2.0.3/index.html index f588f235ba..99fc5d1a34 100755 --- a/2.0.3/index.html +++ b/2.0.3/index.html @@ -100,7 +100,7 @@ @@ -196,7 +196,7 @@

    Made at Twitter

    -

    Brought to you by an experienced engineer and designer.

    +

    Brought to you by an experienced engineer and designer.

    @@ -221,7 +221,7 @@
  • - + JS Hint
  • @@ -233,9 +233,9 @@ ================================================== --> diff --git a/2.0.3/javascript.html b/2.0.3/javascript.html index f9e357edaf..309c8f30ca 100755 --- a/2.0.3/javascript.html +++ b/2.0.3/javascript.html @@ -88,7 +88,7 @@ ================================================== -->

    Javascript for Bootstrap

    -

    Bring Bootstrap's components to life—now with 12 custom jQuery plugins. +

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

    diff --git a/2.0.3/less.html b/2.0.3/less.html index 4b62253450..21ef557599 100755 --- a/2.0.3/less.html +++ b/2.0.3/less.html @@ -1028,9 +1028,9 @@ ================================================== --> diff --git a/2.0.3/scaffolding.html b/2.0.3/scaffolding.html index 98b30ff1fc..2475a6e7c3 100755 --- a/2.0.3/scaffolding.html +++ b/2.0.3/scaffolding.html @@ -133,7 +133,7 @@

    Reset via Normalize

    -

    As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate.

    +

    As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate.

    The new reset can still be found in reset.less, but with many elements removed for brevity and accuracy.

    @@ -646,9 +646,9 @@ ================================================== --> diff --git a/2.0.3/upgrading.html b/2.0.3/upgrading.html index f218ab8107..52cfd0f1c5 100755 --- a/2.0.3/upgrading.html +++ b/2.0.3/upgrading.html @@ -284,9 +284,9 @@ ================================================== --> diff --git a/2.0.4/base-css.html b/2.0.4/base-css.html index c45daaf85a..aa1c326c00 100755 --- a/2.0.4/base-css.html +++ b/2.0.4/base-css.html @@ -1421,7 +1421,7 @@ For example, <code>section</code> should be wrapped as inline. ================================================== -->
    @@ -1589,7 +1589,7 @@ For example, <code>section</code> should be wrapped as inline.

    Built as a sprite

    Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

    All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

    -

    Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

    +

    Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

    How to use

    @@ -1684,9 +1684,9 @@ For example, <code>section</code> should be wrapped as inline. ================================================== -->
    diff --git a/2.0.4/components.html b/2.0.4/components.html index eb300aab90..93b605b5d4 100755 --- a/2.0.4/components.html +++ b/2.0.4/components.html @@ -1905,9 +1905,9 @@ ================================================== -->
    diff --git a/2.0.4/download.html b/2.0.4/download.html index cedcce01e0..f715d320b3 100755 --- a/2.0.4/download.html +++ b/2.0.4/download.html @@ -99,9 +99,9 @@ ================================================== --> diff --git a/2.0.4/examples.html b/2.0.4/examples.html index 3eed94074c..9514c41ddd 100755 --- a/2.0.4/examples.html +++ b/2.0.4/examples.html @@ -121,9 +121,9 @@ ================================================== --> diff --git a/2.0.4/index.html b/2.0.4/index.html index cedfc3dbe3..15e4d1208d 100755 --- a/2.0.4/index.html +++ b/2.0.4/index.html @@ -100,7 +100,7 @@ @@ -196,7 +196,7 @@

    Made at Twitter

    -

    Brought to you by an experienced engineer and designer.

    +

    Brought to you by an experienced engineer and designer.

    @@ -221,7 +221,7 @@
  • - + JS Hint
  • @@ -233,9 +233,9 @@ ================================================== --> diff --git a/2.0.4/javascript.html b/2.0.4/javascript.html index 21414a80f3..8550e6aaff 100755 --- a/2.0.4/javascript.html +++ b/2.0.4/javascript.html @@ -88,7 +88,7 @@ ================================================== -->

    Javascript for Bootstrap

    -

    Bring Bootstrap's components to life—now with 12 custom jQuery plugins. +

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

    diff --git a/2.0.4/less.html b/2.0.4/less.html index e1d8d4f1ac..b60fb42fc6 100755 --- a/2.0.4/less.html +++ b/2.0.4/less.html @@ -1034,9 +1034,9 @@ ================================================== --> diff --git a/2.0.4/scaffolding.html b/2.0.4/scaffolding.html index 45d32535b0..caef53df9c 100755 --- a/2.0.4/scaffolding.html +++ b/2.0.4/scaffolding.html @@ -133,7 +133,7 @@

    Reset via Normalize

    -

    As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate.

    +

    As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate.

    The new reset can still be found in reset.less, but with many elements removed for brevity and accuracy.

    @@ -645,9 +645,9 @@ ================================================== --> diff --git a/2.0.4/upgrading.html b/2.0.4/upgrading.html index 9c8be482e7..c7d230e63f 100755 --- a/2.0.4/upgrading.html +++ b/2.0.4/upgrading.html @@ -284,9 +284,9 @@ ================================================== --> diff --git a/2.1.0/base-css.html b/2.1.0/base-css.html index ba43f2b832..9175f6e9e0 100755 --- a/2.1.0/base-css.html +++ b/2.1.0/base-css.html @@ -1612,11 +1612,11 @@ For example, <code><section></code> should be wrapped as inlin ================================================== -->

    Icon glyphs

    -

    140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

    +

    140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

    • icon-glass
    • icon-music
    • @@ -1765,7 +1765,7 @@ For example, <code><section></code> should be wrapped as inlin

    Glyphicons attribution

    -

    Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

    +

    Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.


    @@ -1911,11 +1911,11 @@ For example, <code><section></code> should be wrapped as inlin
    @@ -555,11 +555,11 @@

    Back to top

    -

    Designed and built with all the love in the world @twitter by @mdo and @fat.

    -

    Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

    -

    Icons from Glyphicons Free, licensed under CC BY 3.0.

    +

    Designed and built with all the love in the world @twitter by @mdo and @fat.

    +

    Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

    +

    Icons from Glyphicons Free, licensed under CC BY 3.0.

    diff --git a/2.1.1/base-css.html b/2.1.1/base-css.html index 3090ee7bb9..52fef7c904 100755 --- a/2.1.1/base-css.html +++ b/2.1.1/base-css.html @@ -1648,11 +1648,11 @@ For example, <code><section></code> should be wrapped as inlin ================================================== -->

    Icon glyphs

    -

    140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

    +

    140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

    • icon-glass
    • icon-music
    • @@ -1801,7 +1801,7 @@ For example, <code><section></code> should be wrapped as inlin

    Glyphicons attribution

    -

    Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

    +

    Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.


    @@ -1949,11 +1949,11 @@ For example, <code><section></code> should be wrapped as inlin
    @@ -553,11 +553,11 @@

    Back to top

    -

    Designed and built with all the love in the world @twitter by @mdo and @fat.

    -

    Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

    -

    Icons from Glyphicons Free, licensed under CC BY 3.0.

    +

    Designed and built with all the love in the world @twitter by @mdo and @fat.

    +

    Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

    +

    Icons from Glyphicons Free, licensed under CC BY 3.0.

    diff --git a/2.2.0/base-css.html b/2.2.0/base-css.html index d3b0cd8ae4..5b45af1583 100755 --- a/2.2.0/base-css.html +++ b/2.2.0/base-css.html @@ -1782,11 +1782,11 @@ For example, <code><section></code> should be wrapped as inlin ================================================== -->

    Icon glyphs

    -

    140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

    +

    140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

    • icon-glass
    • icon-music
    • @@ -1935,7 +1935,7 @@ For example, <code><section></code> should be wrapped as inlin

    Glyphicons attribution

    -

    Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

    +

    Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.


    @@ -2083,11 +2083,11 @@ For example, <code><section></code> should be wrapped as inlin
    @@ -553,11 +553,11 @@

    Back to top

    -

    Designed and built with all the love in the world by @mdo and @fat.

    -

    Code licensed under Apache License v2.0, documentation under CC BY 3.0.

    -

    Glyphicons Free licensed under CC BY 3.0.

    +

    Designed and built with all the love in the world by @mdo and @fat.

    +

    Code licensed under Apache License v2.0, documentation under CC BY 3.0.

    +

    Glyphicons Free licensed under CC BY 3.0.

    Browser(s) Summary of bug Upstream bug(s) Bootstrap issue(s)
    Microsoft Edge

    Native browser tooltip for title shows on first keyboard focus (in addition to custom tooltip component)

    Edge issue #6793560 #18692
    Microsoft Edge

    Hovered element still remains in :hover state after scrolling away.

    Edge issue #5381673 #14211
    Microsoft Edge

    When hovering over a <select> menu item, the cursor for the element underneath the menu is displayed.

    Edge issue #817822 #14528
    Microsoft Edge

    CSS border-radius sometimes causes lines of bleed-through of the background-color of the parent element.

    Edge issue #3342037 #16671
    Microsoft Edge

    background of <tr> is only applied to first child cell instead of all cells in the row

    Edge issue #5865620 #18504
    Microsoft Edge

    @-ms-viewport{width: device-width;} has side-effect of making scrollbars auto-hide

    Edge issue #7165383 #18543
    Microsoft Edge

    Background color from lower layer bleeds through transparent border in some cases

    Edge issue #6274505 #18228
    Microsoft Edge

    Hovering over descendant SVG element fires mouseleave event at ancestor

    Edge issue #7787318 #19670
    Firefox

    .table-bordered with an empty <tbody> is missing borders.

    Mozilla bug #1023761 #13453
    Firefox

    If the disabled state of a form control is changed via JavaScript, the normal state doesn’t return after refreshing the page.

    Mozilla bug #654072 #793
    Firefox

    focus events should not be fired at the document object

    Mozilla bug #1228802 #18365
    Firefox

    Wide floated table doesn’t wrap onto new line

    Mozilla bug #1277782 #19839
    Firefox

    Mouse sometimes not within element for purposes of mouseenter/mouseleave when it’s within SVG elements

    Mozilla bug #577785 #19670
    Firefox

    position: absolute element that’s wider than its column renders differently than other browsers

    Mozilla bug #1282363 #20161
    Firefox (Windows)

    Right border of <select> menu is sometimes missing when screen is set to uncommon resolution

    Mozilla bug #545685 #15990
    Firefox (OS X & Linux)

    Badge widget causes bottom border of Tabs widget to unexpectedly not overlap

    Mozilla bug #1259972 #19626
    Chrome (Android)

    Tapping on an <input> in a scrollable overlay doesn’t scroll the <input> into view

    Chromium issue #595210 #17338
    Chrome (OS X)

    Clicking above <input type="number"> increment button flashes the decrement button.

    Chromium issue #419108 Offshoot of #8350 & Chromium issue #337668
    Chrome

    CSS infinite linear animation with alpha transparency leaks memory.

    Chromium issue #429375 #14409
    Chrome

    :focus outline style causes cursor to not be displayed when toggling a readonly <input> to read-write.

    Chromium issue #465274 #16022
    Chrome

    table-cell borders not overlapping despite margin-right: -1px

    Chromium issue #534750 #17438, #14237
    Chrome

    Clicking scrollbar in <select multiple> with overflowed options will select nearby <option>

    Chromium issue #597642 #19810
    Chrome

    Don’t make :hover sticky on touch-friendly webpages

    Chromium issue #370155 #12832
    Chrome (Windows & Linux)

    Animation glitch when returning to inactive tab after animations occurred while tab was hidden.

    Chromium issue #449180 #15298
    Safari

    rem units in media queries should be calculated using font-size: initial, not the root element’s font-size

    WebKit bug #156684 #17403
    Safari (OS X)

    px, em, and rem should all behave the same in media queries when page zoom is applied

    WebKit bug #156687 #17403
    Safari (OS X)

    Weird button behavior with some <input type="number"> elements.

    WebKit bug #137269, Apple Safari Radar #18834768 #8350, Normalize #283, Chromium issue #337668
    Safari (OS X)

    Small font size when printing webpage with fixed-width .container.

    WebKit bug #138192, Apple Safari Radar #19435018 #14868
    Safari (iPad)

    <select> menu on iPad causes shifting of hit-testing areas

    WebKit bug #150079, Apple Safari Radar #23082521 #14975
    Safari (iOS)

    transform: translate3d(0,0,0); rendering bug.

    WebKit bug #138162, Apple Safari Radar #18804973 #14603
    Safari (iOS)

    Text input’s cursor doesn’t move while scrolling the page.

    WebKit bug #138201, Apple Safari Radar #18819624 #14708
    Safari (iOS)

    Can’t move cursor to start of text after entering long string of text into <input type="text">

    WebKit bug #148061, Apple Safari Radar #22299624 #16988
    Safari (iOS)

    display: block causes text of temporal <input>s to become vertically misaligned

    WebKit bug #139848, Apple Safari Radar #19434878 #11266, #13098
    Safari (iOS)

    Tapping on <body> doesn’t fire click events

    WebKit bug #151933 #16028
    Safari (iOS)

    position:fixed is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari

    WebKit bug #153056 #18859
    Safari (iOS)

    Tapping into an <input> within a position:fixed element scrolls to the top of the page

    WebKit bug #153224, Apple Safari Radar #24235301 #17497
    Safari (iOS)

    <body> with overflow:hidden CSS is scrollable on iOS

    WebKit bug #153852 #14839
    Safari (iOS)

    Scroll gesture in text field in position:fixed element sometimes scrolls <body> instead of scrollable ancestor

    WebKit bug #153856 #14839
    Safari (iOS)

    Tapping from one <input> to another in an overlay can cause shaking/jiggling effect

    WebKit bug #158276 #19927
    Safari (iOS)

    Modal with -webkit-overflow-scrolling: touch doesn’t become scrollable after added text makes it taller

    WebKit bug #158342 #17695
    Safari (iOS)

    Don’t make :hover sticky on touch-friendly webpages

    WebKit bug #158517 #12832
    Safari (iPad Pro)

    Rendering of descendants of position: fixed element gets clipped on iPad Pro in Landscape orientation

    WebKit bug #152637, Apple Safari Radar #24030853 #18738

    Most wanted features

    There are several features specified in Web standards which would allow us to make Bootstrap more robust, elegant, or performant, but aren't yet implemented in certain browsers, thus preventing us from taking advantage of them.

    We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented.

    Browser(s) Summary of feature Upstream issue(s) Bootstrap issue(s)
    Microsoft Edge

    Implement the :dir() pseudo-class from Selectors Level 4

    Edge UserVoice idea #12299532 #19984
    Microsoft Edge

    Implement sticky positioning from CSS Positioned Layout Level 3

    Edge UserVoice idea #6263621 #17021
    Firefox

    Fire a transitioncancel event when a CSS transition is canceled

    Mozilla bug #1264125 Mozilla bug #1182856
    Firefox

    Implement the of <selector-list> clause of the :nth-child() pseudo-class

    Mozilla bug #854148 #20143
    Firefox

    Implement the HTML5 <dialog> element

    Mozilla bug #840640 #20175
    Chrome

    Implement the of <selector-list> clause of the :nth-child() pseudo-class

    Chromium issue #304163 #20143
    Chrome

    Implement the :dir() pseudo-class from Selectors Level 4

    Chromium issue #576815 #19984
    Chrome

    Implement sticky positioning from CSS Positioned Layout Level 3

    Chromium issue #231752 #17021
    Safari

    Implement the :dir() pseudo-class from Selectors Level 4

    WebKit bug #64861 #19984
    Safari

    Implement the HTML5 <dialog> element

    WebKit bug #84635 #20175
    \ No newline at end of file + Wall of browser bugs · Bootstrap
    Skip to main content
    Bootstrap 4 is here!

    Wall of browser bugs

    A list of the browser bugs that Bootstrap is currently grappling with.

    Browser bugs

    Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.

    We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, see our browser compatibility docs.

    See also:

    Browser(s) Summary of bug Upstream bug(s) Bootstrap issue(s)
    Microsoft Edge

    Native browser tooltip for title shows on first keyboard focus (in addition to custom tooltip component)

    Edge issue #6793560 #18692
    Microsoft Edge

    Hovered element still remains in :hover state after scrolling away.

    Edge issue #5381673 #14211
    Microsoft Edge

    When hovering over a <select> menu item, the cursor for the element underneath the menu is displayed.

    Edge issue #817822 #14528
    Microsoft Edge

    CSS border-radius sometimes causes lines of bleed-through of the background-color of the parent element.

    Edge issue #3342037 #16671
    Microsoft Edge

    background of <tr> is only applied to first child cell instead of all cells in the row

    Edge issue #5865620 #18504
    Microsoft Edge

    @-ms-viewport{width: device-width;} has side-effect of making scrollbars auto-hide

    Edge issue #7165383 #18543
    Microsoft Edge

    Background color from lower layer bleeds through transparent border in some cases

    Edge issue #6274505 #18228
    Microsoft Edge

    Hovering over descendant SVG element fires mouseleave event at ancestor

    Edge issue #7787318 #19670
    Firefox

    .table-bordered with an empty <tbody> is missing borders.

    Mozilla bug #1023761 #13453
    Firefox

    If the disabled state of a form control is changed via JavaScript, the normal state doesn’t return after refreshing the page.

    Mozilla bug #654072 #793
    Firefox

    focus events should not be fired at the document object

    Mozilla bug #1228802 #18365
    Firefox

    Wide floated table doesn’t wrap onto new line

    Mozilla bug #1277782 #19839
    Firefox

    Mouse sometimes not within element for purposes of mouseenter/mouseleave when it’s within SVG elements

    Mozilla bug #577785 #19670
    Firefox

    position: absolute element that’s wider than its column renders differently than other browsers

    Mozilla bug #1282363 #20161
    Firefox (Windows)

    Right border of <select> menu is sometimes missing when screen is set to uncommon resolution

    Mozilla bug #545685 #15990
    Firefox (OS X & Linux)

    Badge widget causes bottom border of Tabs widget to unexpectedly not overlap

    Mozilla bug #1259972 #19626
    Chrome (Android)

    Tapping on an <input> in a scrollable overlay doesn’t scroll the <input> into view

    Chromium issue #595210 #17338
    Chrome (OS X)

    Clicking above <input type="number"> increment button flashes the decrement button.

    Chromium issue #419108 Offshoot of #8350 & Chromium issue #337668
    Chrome

    CSS infinite linear animation with alpha transparency leaks memory.

    Chromium issue #429375 #14409
    Chrome

    :focus outline style causes cursor to not be displayed when toggling a readonly <input> to read-write.

    Chromium issue #465274 #16022
    Chrome

    table-cell borders not overlapping despite margin-right: -1px

    Chromium issue #534750 #17438, #14237
    Chrome

    Clicking scrollbar in <select multiple> with overflowed options will select nearby <option>

    Chromium issue #597642 #19810
    Chrome

    Don’t make :hover sticky on touch-friendly webpages

    Chromium issue #370155 #12832
    Chrome (Windows & Linux)

    Animation glitch when returning to inactive tab after animations occurred while tab was hidden.

    Chromium issue #449180 #15298
    Safari

    rem units in media queries should be calculated using font-size: initial, not the root element’s font-size

    WebKit bug #156684 #17403
    Safari (OS X)

    px, em, and rem should all behave the same in media queries when page zoom is applied

    WebKit bug #156687 #17403
    Safari (OS X)

    Weird button behavior with some <input type="number"> elements.

    WebKit bug #137269, Apple Safari Radar #18834768 #8350, Normalize #283, Chromium issue #337668
    Safari (OS X)

    Small font size when printing webpage with fixed-width .container.

    WebKit bug #138192, Apple Safari Radar #19435018 #14868
    Safari (iPad)

    <select> menu on iPad causes shifting of hit-testing areas

    WebKit bug #150079, Apple Safari Radar #23082521 #14975
    Safari (iOS)

    transform: translate3d(0,0,0); rendering bug.

    WebKit bug #138162, Apple Safari Radar #18804973 #14603
    Safari (iOS)

    Text input’s cursor doesn’t move while scrolling the page.

    WebKit bug #138201, Apple Safari Radar #18819624 #14708
    Safari (iOS)

    Can’t move cursor to start of text after entering long string of text into <input type="text">

    WebKit bug #148061, Apple Safari Radar #22299624 #16988
    Safari (iOS)

    display: block causes text of temporal <input>s to become vertically misaligned

    WebKit bug #139848, Apple Safari Radar #19434878 #11266, #13098
    Safari (iOS)

    Tapping on <body> doesn’t fire click events

    WebKit bug #151933 #16028
    Safari (iOS)

    position:fixed is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari

    WebKit bug #153056 #18859
    Safari (iOS)

    Tapping into an <input> within a position:fixed element scrolls to the top of the page

    WebKit bug #153224, Apple Safari Radar #24235301 #17497
    Safari (iOS)

    <body> with overflow:hidden CSS is scrollable on iOS

    WebKit bug #153852 #14839
    Safari (iOS)

    Scroll gesture in text field in position:fixed element sometimes scrolls <body> instead of scrollable ancestor

    WebKit bug #153856 #14839
    Safari (iOS)

    Tapping from one <input> to another in an overlay can cause shaking/jiggling effect

    WebKit bug #158276 #19927
    Safari (iOS)

    Modal with -webkit-overflow-scrolling: touch doesn’t become scrollable after added text makes it taller

    WebKit bug #158342 #17695
    Safari (iOS)

    Don’t make :hover sticky on touch-friendly webpages

    WebKit bug #158517 #12832
    Safari (iPad Pro)

    Rendering of descendants of position: fixed element gets clipped on iPad Pro in Landscape orientation

    WebKit bug #152637, Apple Safari Radar #24030853 #18738

    Most wanted features

    There are several features specified in Web standards which would allow us to make Bootstrap more robust, elegant, or performant, but aren't yet implemented in certain browsers, thus preventing us from taking advantage of them.

    We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented.

    Browser(s) Summary of feature Upstream issue(s) Bootstrap issue(s)
    Microsoft Edge

    Implement the :dir() pseudo-class from Selectors Level 4

    Edge UserVoice idea #12299532 #19984
    Microsoft Edge

    Implement sticky positioning from CSS Positioned Layout Level 3

    Edge UserVoice idea #6263621 #17021
    Firefox

    Fire a transitioncancel event when a CSS transition is canceled

    Mozilla bug #1264125 Mozilla bug #1182856
    Firefox

    Implement the of <selector-list> clause of the :nth-child() pseudo-class

    Mozilla bug #854148 #20143
    Firefox

    Implement the HTML5 <dialog> element

    Mozilla bug #840640 #20175
    Chrome

    Implement the of <selector-list> clause of the :nth-child() pseudo-class

    Chromium issue #304163 #20143
    Chrome

    Implement the :dir() pseudo-class from Selectors Level 4

    Chromium issue #576815 #19984
    Chrome

    Implement sticky positioning from CSS Positioned Layout Level 3

    Chromium issue #231752 #17021
    Safari

    Implement the :dir() pseudo-class from Selectors Level 4

    WebKit bug #64861 #19984
    Safari

    Implement the HTML5 <dialog> element

    WebKit bug #84635 #20175
    \ No newline at end of file diff --git a/docs/3.3/components/index.html b/docs/3.3/components/index.html index 7fc07a0274..53bc3701c4 100644 --- a/docs/3.3/components/index.html +++ b/docs/3.3/components/index.html @@ -1,4 +1,4 @@ - Components · Bootstrap
    Skip to main content
    Bootstrap 4 is here!

    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">
    +         Components · Bootstrap             
    Skip to main content
    Bootstrap 4 is here!

    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/docs/3.3/css/index.html b/docs/3.3/css/index.html
    index 2394aec06a..dd9960d2cc 100644
    --- a/docs/3.3/css/index.html
    +++ b/docs/3.3/css/index.html
    @@ -1,4 +1,4 @@
    -         CSS · Bootstrap             
    Skip to main content
    Bootstrap 4 is here!

    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>
    +         CSS · Bootstrap             
    Skip to main content
    Bootstrap 4 is here!

    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/docs/3.3/customize/index.html b/docs/3.3/customize/index.html
    index bea92137cd..e31664ce9d 100644
    --- a/docs/3.3/customize/index.html
    +++ b/docs/3.3/customize/index.html
    @@ -1 +1 @@
    -         Customize and download · Bootstrap            
    Skip to main content
    Bootstrap 4 is here!

    Customize and download

    Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.

    Have an existing configuration? Upload your config.json to import it.

    Drag and drop here, or .


    Don't have one? That's okay—just start customizing the fields below.

    Less files

    Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the CSS and Components pages in the docs.

    Common CSS

    Components

    JavaScript components

    jQuery plugins

    Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the JavaScript page in the docs.

    Linked to components

    Magic

    Produces two files

    All checked plugins will be compiled into a readable bootstrap.js and a minified bootstrap.min.js. We recommend you use the minified version in production.

    jQuery required

    All plugins require the latest version of jQuery to be included.

    Less variables

    Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.

    Colors

    Gray and brand colors for use across Bootstrap.

    Scaffolding

    Settings for some of the most global styles.

    Background color for <body>.

    Global text color on <body>.

    Typography

    Font, line-height, and color for body text, headings, and more.

    Default monospace fonts for <code>, <kbd>, and <pre>.

    Unit-less line-height for use in components like buttons.

    Computed "line-height" (font-size * line-height) for use with margin, padding, etc.

    By default, this inherits from the <body>.

    Iconography

    Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.

    Load fonts from this directory.

    File name for all font files.

    Element ID within SVG icon file.

    Components

    Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

    Global color for active items (e.g., navs or dropdowns).

    Global background color for active items (e.g., navs or dropdowns).

    Width of the border for generating carets that indicate dropdowns.

    Carets increase slightly in size for larger components.

    Tables

    Customizes the .table component with basic values, each used across all table variations.

    Padding for <th>s and <td>s.

    Padding for cells in .table-condensed.

    Default background color used for all tables.

    Background color used for .table-striped.

    Background color used for .table-hover.

    Border color for table and cell borders.

    Buttons

    For each of Bootstrap's buttons, define text, background and border color.

    Forms

    <input> background color

    <input disabled> background color

    Text color for <input>s

    <input> border color

    Default .form-control border radius

    Large .form-control border radius

    Small .form-control border radius

    Border color for inputs on focus

    Placeholder text color

    Default .form-control height

    Large .form-control height

    Small .form-control height

    .form-group margin

    Background color for textual input addons

    Border color for textual input addons

    Disabled cursor for form controls and buttons.

    Dropdown menu container and contents.

    Background for the dropdown menu.

    Dropdown menu border-color.

    Dropdown menu border-color for IE8.

    Divider color for between dropdown items.

    Text color for headers within dropdown menus.

    Deprecated @dropdown-caret-color as of v3.1.0

    Media queries breakpoints

    Define the breakpoints at which your layout will change, adapting to different screen sizes.

    Deprecated @screen-xs as of v3.0.1

    Deprecated @screen-xs-min as of v3.2.0

    Deprecated @screen-phone as of v3.0.1

    Deprecated @screen-sm as of v3.0.1

    Deprecated @screen-tablet as of v3.0.1

    Deprecated @screen-md as of v3.0.1

    Deprecated @screen-desktop as of v3.0.1

    Deprecated @screen-lg as of v3.0.1

    Deprecated @screen-lg-desktop as of v3.0.1

    Grid system

    Define your custom responsive grid.

    Number of columns in the grid.

    Padding between columns. Gets divided in half for the left and right.

    Point at which the navbar becomes uncollapsed.

    Point at which the navbar begins collapsing.

    Container sizes

    Define the maximum width of .container for different screen sizes.

    For @screen-sm-min and up.

    For @screen-md-min and up.

    For @screen-lg-min and up.

    Inverted navbar

    Shared nav styles

    Tabs

    Pills

    Pagination

    Pager

    Jumbotron

    Form states and alerts

    Define colors for form feedback states and, by default, alerts.

    Tooltips

    Tooltip max width

    Tooltip text color

    Tooltip background color

    Tooltip arrow width

    Tooltip arrow color

    Popovers

    Popover body background color

    Popover maximum width

    Popover border color

    Popover fallback border color

    Popover title background color

    Popover arrow width

    Popover arrow color

    Popover outer arrow width

    Popover outer arrow color

    Popover outer arrow fallback color

    Labels

    Default label background color

    Primary label background color

    Success label background color

    Info label background color

    Warning label background color

    Danger label background color

    Default label text color

    Modals

    Padding applied to the modal body

    Padding applied to the modal title

    Modal title line-height

    Background color of modal content area

    Modal content border color

    Modal content border color for IE8

    Modal backdrop background color

    Modal backdrop opacity

    Modal header border color

    Alerts

    Define alert colors, border radius, and padding.

    Progress bars

    Background color of the whole progress component

    Progress bar text color

    Variable for setting rounded corners on progress bar.

    Default progress bar color

    Success progress bar color

    Warning progress bar color

    Danger progress bar color

    Info progress bar color

    List group

    Background color on .list-group-item

    .list-group-item border color

    List group border radius

    Background color of single list items on hover

    Text color of active list items

    Background color of active list items

    Border color of active list elements

    Text color for content within active list items

    Text color of disabled list items

    Background color of disabled list items

    Text color for content within disabled list items

    Panels

    Border color for elements within panels

    Thumbnails

    Padding around the thumbnail image

    Thumbnail background color

    Thumbnail border color

    Thumbnail border radius

    Custom text color for thumbnail captions

    Padding around the thumbnail caption

    Wells

    Badges

    Badge text color in active nav link

    Badge background color in active nav link

    Breadcrumb background color

    Breadcrumb text color

    Text color of current page in the breadcrumb

    Textual separator for between breadcrumb elements

    Close

    Code

    Type

    Horizontal offset for forms and lists.

    Text muted color

    Abbreviations and acronyms border color

    Headings small color

    Blockquote small color

    Blockquote font size

    Blockquote border color

    Page header border color

    Width of horizontal description list titles

    Point at which .dl-horizontal becomes horizontal

    Horizontal line color.

    Download

    Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.

    \ No newline at end of file + Customize and download · Bootstrap
    Skip to main content
    Bootstrap 4 is here!

    Customize and download

    Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.

    Have an existing configuration? Upload your config.json to import it.

    Drag and drop here, or .


    Don't have one? That's okay—just start customizing the fields below.

    Less files

    Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the CSS and Components pages in the docs.

    Common CSS

    Components

    JavaScript components

    jQuery plugins

    Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the JavaScript page in the docs.

    Linked to components

    Magic

    Produces two files

    All checked plugins will be compiled into a readable bootstrap.js and a minified bootstrap.min.js. We recommend you use the minified version in production.

    jQuery required

    All plugins require the latest version of jQuery to be included.

    Less variables

    Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.

    Colors

    Gray and brand colors for use across Bootstrap.

    Scaffolding

    Settings for some of the most global styles.

    Background color for <body>.

    Global text color on <body>.

    Typography

    Font, line-height, and color for body text, headings, and more.

    Default monospace fonts for <code>, <kbd>, and <pre>.

    Unit-less line-height for use in components like buttons.

    Computed "line-height" (font-size * line-height) for use with margin, padding, etc.

    By default, this inherits from the <body>.

    Iconography

    Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.

    Load fonts from this directory.

    File name for all font files.

    Element ID within SVG icon file.

    Components

    Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

    Global color for active items (e.g., navs or dropdowns).

    Global background color for active items (e.g., navs or dropdowns).

    Width of the border for generating carets that indicate dropdowns.

    Carets increase slightly in size for larger components.

    Tables

    Customizes the .table component with basic values, each used across all table variations.

    Padding for <th>s and <td>s.

    Padding for cells in .table-condensed.

    Default background color used for all tables.

    Background color used for .table-striped.

    Background color used for .table-hover.

    Border color for table and cell borders.

    Buttons

    For each of Bootstrap's buttons, define text, background and border color.

    Forms

    <input> background color

    <input disabled> background color

    Text color for <input>s

    <input> border color

    Default .form-control border radius

    Large .form-control border radius

    Small .form-control border radius

    Border color for inputs on focus

    Placeholder text color

    Default .form-control height

    Large .form-control height

    Small .form-control height

    .form-group margin

    Background color for textual input addons

    Border color for textual input addons

    Disabled cursor for form controls and buttons.

    Dropdown menu container and contents.

    Background for the dropdown menu.

    Dropdown menu border-color.

    Dropdown menu border-color for IE8.

    Divider color for between dropdown items.

    Text color for headers within dropdown menus.

    Deprecated @dropdown-caret-color as of v3.1.0

    Media queries breakpoints

    Define the breakpoints at which your layout will change, adapting to different screen sizes.

    Deprecated @screen-xs as of v3.0.1

    Deprecated @screen-xs-min as of v3.2.0

    Deprecated @screen-phone as of v3.0.1

    Deprecated @screen-sm as of v3.0.1

    Deprecated @screen-tablet as of v3.0.1

    Deprecated @screen-md as of v3.0.1

    Deprecated @screen-desktop as of v3.0.1

    Deprecated @screen-lg as of v3.0.1

    Deprecated @screen-lg-desktop as of v3.0.1

    Grid system

    Define your custom responsive grid.

    Number of columns in the grid.

    Padding between columns. Gets divided in half for the left and right.

    Point at which the navbar becomes uncollapsed.

    Point at which the navbar begins collapsing.

    Container sizes

    Define the maximum width of .container for different screen sizes.

    For @screen-sm-min and up.

    For @screen-md-min and up.

    For @screen-lg-min and up.

    Inverted navbar

    Shared nav styles

    Tabs

    Pills

    Pagination

    Pager

    Jumbotron

    Form states and alerts

    Define colors for form feedback states and, by default, alerts.

    Tooltips

    Tooltip max width

    Tooltip text color

    Tooltip background color

    Tooltip arrow width

    Tooltip arrow color

    Popovers

    Popover body background color

    Popover maximum width

    Popover border color

    Popover fallback border color

    Popover title background color

    Popover arrow width

    Popover arrow color

    Popover outer arrow width

    Popover outer arrow color

    Popover outer arrow fallback color

    Labels

    Default label background color

    Primary label background color

    Success label background color

    Info label background color

    Warning label background color

    Danger label background color

    Default label text color

    Modals

    Padding applied to the modal body

    Padding applied to the modal title

    Modal title line-height

    Background color of modal content area

    Modal content border color

    Modal content border color for IE8

    Modal backdrop background color

    Modal backdrop opacity

    Modal header border color

    Alerts

    Define alert colors, border radius, and padding.

    Progress bars

    Background color of the whole progress component

    Progress bar text color

    Variable for setting rounded corners on progress bar.

    Default progress bar color

    Success progress bar color

    Warning progress bar color

    Danger progress bar color

    Info progress bar color

    List group

    Background color on .list-group-item

    .list-group-item border color

    List group border radius

    Background color of single list items on hover

    Text color of active list items

    Background color of active list items

    Border color of active list elements

    Text color for content within active list items

    Text color of disabled list items

    Background color of disabled list items

    Text color for content within disabled list items

    Panels

    Border color for elements within panels

    Thumbnails

    Padding around the thumbnail image

    Thumbnail background color

    Thumbnail border color

    Thumbnail border radius

    Custom text color for thumbnail captions

    Padding around the thumbnail caption

    Wells

    Badges

    Badge text color in active nav link

    Badge background color in active nav link

    Breadcrumb background color

    Breadcrumb text color

    Text color of current page in the breadcrumb

    Textual separator for between breadcrumb elements

    Close

    Code

    Type

    Horizontal offset for forms and lists.

    Text muted color

    Abbreviations and acronyms border color

    Headings small color

    Blockquote small color

    Blockquote font size

    Blockquote border color

    Page header border color

    Width of horizontal description list titles

    Point at which .dl-horizontal becomes horizontal

    Horizontal line color.

    Download

    Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.

    \ No newline at end of file diff --git a/docs/3.3/getting-started/index.html b/docs/3.3/getting-started/index.html index 4c3fb8aed2..8b115aa164 100644 --- a/docs/3.3/getting-started/index.html +++ b/docs/3.3/getting-started/index.html @@ -1,4 +1,4 @@ - Getting started · Bootstrap
    Skip to main content
    Bootstrap 4 is here!

    Getting started

    An overview of Bootstrap, how to download and use, basic templates and examples, and more.

    Download

    Bootstrap (currently v3.3.7) 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 -->
    +         Getting started · Bootstrap            
    Skip to main content
    Bootstrap 4 is here!

    Getting started

    An overview of Bootstrap, how to download and use, basic templates and examples, and more.

    Download

    Bootstrap (currently v3.3.7) 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.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     
     <!-- Optional theme -->
    @@ -59,7 +59,7 @@
         <!-- Include all compiled plugins (below), or include individual files as needed -->
         <script src="js/bootstrap.min.js"></script>
       </body>
    -</html>

    Examples

    Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.

    Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the docs/examples/ directory.

    Using the framework

    Starter template example

    Starter template

    Nothing but the basics: compiled CSS and JavaScript along with a container.

    Bootstrap theme example

    Bootstrap theme

    Load the optional Bootstrap theme for a visually enhanced experience.

    Multiple grids example

    Grids

    Multiple examples of grid layouts with all four tiers, nesting, and more.

    Jumbotron example

    Jumbotron

    Build around the jumbotron with a navbar and some basic grid columns.

    Narrow jumbotron example

    Narrow jumbotron

    Build a more custom page by narrowing the default container and jumbotron.

    Navbars in action

    Navbar example

    Navbar

    Super basic template that includes the navbar along with some additional content.

    Static top navbar example

    Static top navbar

    Super basic template with a static top navbar along with some additional content.

    Fixed navbar example

    Fixed navbar

    Super basic template with a fixed top navbar along with some additional content.

    Custom components

    A one-page template example

    Cover

    A one-page template for building simple and beautiful home pages.

    Carousel example

    Carousel

    Customize the navbar and carousel, then add some new components.

    Blog layout example

    Blog

    Simple two-column blog layout with custom navigation, header, and type.

    Dashboard example

    Dashboard

    Basic structure for an admin dashboard with fixed sidebar and navbar.

    Sign-in page example

    Sign-in page

    Custom form layout and design for a simple sign in form.

    Justified nav example

    Justified nav

    Create a custom navbar with justified links. Heads up! Not too Safari friendly.

    Sticky footer example

    Sticky footer

    Attach a footer to the bottom of the viewport when the content is shorter than it.

    Sticky footer with navbar example

    Sticky footer with navbar

    Attach a footer to the bottom of the viewport with a fixed navbar at the top.

    Experiments

    Non-responsive example

    Non-responsive Bootstrap

    Easily disable the responsiveness of Bootstrap per our docs.

    Off-canvas navigation example

    Off-canvas

    Build a toggleable off-canvas navigation menu for use with Bootstrap.

    Tools

    Bootlint

    Bootlint is the official Bootstrap HTML linter tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.

    Community

    Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

    You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.

    Disabling responsiveness

    Bootstrap automatically adapts your pages for various screen sizes. Here's how to disable this feature so your page works like this non-responsive example.

    Steps to disable page responsiveness

    1. Omit the viewport <meta> mentioned in the CSS docs
    2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
    3. If using navbars, remove all navbar collapsing and expanding behavior.
    4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

    You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.

    Bootstrap template with responsiveness disabled

    We've applied these steps to an example. Read its source code to see the specific changes implemented.

    View non-responsive example

    Migrating from v2.x to v3.x

    Looking to migrate from an older version of Bootstrap to v3.x? Check out our migration guide.

    Browser and device support

    Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.

    Supported browsers

    Specifically, we support the latest versions of the following browsers and platforms.

    Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.

    Mobile devices

    Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.

    Chrome Firefox Safari
    Android Supported Supported N/A
    iOS Supported Supported Supported

    Desktop browsers

    Similarly, the latest versions of most desktop browsers are supported.

    Chrome Firefox Internet Explorer Opera Safari
    Mac Supported Supported N/A Supported Supported
    Windows Supported Supported Supported Supported Not supported

    On Windows, we support Internet Explorer 8-11.

    For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support Release (ESR) version of Firefox.

    Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, as well as Microsoft Edge, though they are not officially supported.

    For a list of some of the browser bugs that Bootstrap has to grapple with, see our Wall of browser bugs.

    Internet Explorer 8 and 9

    Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js to enable media query support.

    Feature Internet Explorer 8 Internet Explorer 9
    border-radius Not supported Supported
    box-shadow Not supported Supported
    transform Not supported Supported, with -ms prefix
    transition Not supported
    placeholder Not supported

    Visit Can I use... for details on browser support of CSS3 and HTML5 features.

    Internet Explorer 8 and Respond.js

    Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

    Respond.js and cross-domain CSS

    Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

    Respond.js and file://

    Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.

    Respond.js and @import

    Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

    Internet Explorer 8 and box-sizing

    IE8 does not fully support box-sizing: border-box; when combined with min-width, max-width, min-height, or max-height. For that reason, as of v3.0.1, we no longer use max-width on .containers.

    Internet Explorer 8 and @font-face

    IE8 has some issues with @font-face when combined with :before. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #13863 for details.

    IE Compatibility modes

    Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <meta> tag in your pages:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    Confirm the document mode by opening the debugging tools: press F12 and check the "Document Mode".

    This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.

    See this StackOverflow question for more information.

    Internet Explorer 10 in Windows 8 and Windows Phone 8

    Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

    @-ms-viewport       { width: device-width; }

    However, this doesn't work for devices running Windows Phone 8 versions older than Update 3 (a.k.a. GDR3), as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to include the following CSS and JavaScript to work around the bug.

    @-ms-viewport       { width: device-width; }
    +</html>

    Examples

    Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.

    Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the docs/examples/ directory.

    Using the framework

    Starter template example

    Starter template

    Nothing but the basics: compiled CSS and JavaScript along with a container.

    Bootstrap theme example

    Bootstrap theme

    Load the optional Bootstrap theme for a visually enhanced experience.

    Multiple grids example

    Grids

    Multiple examples of grid layouts with all four tiers, nesting, and more.

    Jumbotron example

    Jumbotron

    Build around the jumbotron with a navbar and some basic grid columns.

    Narrow jumbotron example

    Narrow jumbotron

    Build a more custom page by narrowing the default container and jumbotron.

    Navbars in action

    Navbar example

    Navbar

    Super basic template that includes the navbar along with some additional content.

    Static top navbar example

    Static top navbar

    Super basic template with a static top navbar along with some additional content.

    Fixed navbar example

    Fixed navbar

    Super basic template with a fixed top navbar along with some additional content.

    Custom components

    A one-page template example

    Cover

    A one-page template for building simple and beautiful home pages.

    Carousel example

    Carousel

    Customize the navbar and carousel, then add some new components.

    Blog layout example

    Blog

    Simple two-column blog layout with custom navigation, header, and type.

    Dashboard example

    Dashboard

    Basic structure for an admin dashboard with fixed sidebar and navbar.

    Sign-in page example

    Sign-in page

    Custom form layout and design for a simple sign in form.

    Justified nav example

    Justified nav

    Create a custom navbar with justified links. Heads up! Not too Safari friendly.

    Sticky footer example

    Sticky footer

    Attach a footer to the bottom of the viewport when the content is shorter than it.

    Sticky footer with navbar example

    Sticky footer with navbar

    Attach a footer to the bottom of the viewport with a fixed navbar at the top.

    Experiments

    Non-responsive example

    Non-responsive Bootstrap

    Easily disable the responsiveness of Bootstrap per our docs.

    Off-canvas navigation example

    Off-canvas

    Build a toggleable off-canvas navigation menu for use with Bootstrap.

    Tools

    Bootlint

    Bootlint is the official Bootstrap HTML linter tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.

    Community

    Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

    You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.

    Disabling responsiveness

    Bootstrap automatically adapts your pages for various screen sizes. Here's how to disable this feature so your page works like this non-responsive example.

    Steps to disable page responsiveness

    1. Omit the viewport <meta> mentioned in the CSS docs
    2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
    3. If using navbars, remove all navbar collapsing and expanding behavior.
    4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

    You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.

    Bootstrap template with responsiveness disabled

    We've applied these steps to an example. Read its source code to see the specific changes implemented.

    View non-responsive example

    Migrating from v2.x to v3.x

    Looking to migrate from an older version of Bootstrap to v3.x? Check out our migration guide.

    Browser and device support

    Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.

    Supported browsers

    Specifically, we support the latest versions of the following browsers and platforms.

    Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.

    Mobile devices

    Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.

    Chrome Firefox Safari
    Android Supported Supported N/A
    iOS Supported Supported Supported

    Desktop browsers

    Similarly, the latest versions of most desktop browsers are supported.

    Chrome Firefox Internet Explorer Opera Safari
    Mac Supported Supported N/A Supported Supported
    Windows Supported Supported Supported Supported Not supported

    On Windows, we support Internet Explorer 8-11.

    For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support Release (ESR) version of Firefox.

    Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, as well as Microsoft Edge, though they are not officially supported.

    For a list of some of the browser bugs that Bootstrap has to grapple with, see our Wall of browser bugs.

    Internet Explorer 8 and 9

    Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js to enable media query support.

    Feature Internet Explorer 8 Internet Explorer 9
    border-radius Not supported Supported
    box-shadow Not supported Supported
    transform Not supported Supported, with -ms prefix
    transition Not supported
    placeholder Not supported

    Visit Can I use... for details on browser support of CSS3 and HTML5 features.

    Internet Explorer 8 and Respond.js

    Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

    Respond.js and cross-domain CSS

    Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

    Respond.js and file://

    Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.

    Respond.js and @import

    Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

    Internet Explorer 8 and box-sizing

    IE8 does not fully support box-sizing: border-box; when combined with min-width, max-width, min-height, or max-height. For that reason, as of v3.0.1, we no longer use max-width on .containers.

    Internet Explorer 8 and @font-face

    IE8 has some issues with @font-face when combined with :before. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #13863 for details.

    IE Compatibility modes

    Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <meta> tag in your pages:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    Confirm the document mode by opening the debugging tools: press F12 and check the "Document Mode".

    This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.

    See this StackOverflow question for more information.

    Internet Explorer 10 in Windows 8 and Windows Phone 8

    Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

    @-ms-viewport       { width: device-width; }

    However, this doesn't work for devices running Windows Phone 8 versions older than Update 3 (a.k.a. GDR3), as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to include the following CSS and JavaScript to work around the bug.

    @-ms-viewport       { width: device-width; }
     @-o-viewport        { width: device-width; }
     @viewport           { width: device-width; }
    // Copyright 2014-2015 Twitter, Inc.
     // Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
    diff --git a/docs/3.3/index.html b/docs/3.3/index.html
    index 2ca3d61ebf..8abd3b7b3a 100644
    --- a/docs/3.3/index.html
    +++ b/docs/3.3/index.html
    @@ -46,9 +46,9 @@
               
             
             
           
         
    @@ -91,7 +91,7 @@

    - Browse themes + Browse themes

    Bootstrap Themes @@ -117,7 +117,7 @@

    -

    We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.

    Explore the Expo
    +

    We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.

    Explore the Expo
    diff --git a/docs/3.3/javascript/index.html b/docs/3.3/javascript/index.html index bb01493b28..7a3e207fe0 100644 --- a/docs/3.3/javascript/index.html +++ b/docs/3.3/javascript/index.html @@ -1,4 +1,4 @@ - JavaScript · Bootstrap
    Skip to main content
    Bootstrap 4 is here!

    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
    +         JavaScript · Bootstrap             
    Skip to main content
    Bootstrap 4 is here!

    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/docs/3.3/migration/index.html b/docs/3.3/migration/index.html
    index 6a6951234a..0d350bbbf8 100644
    --- a/docs/3.3/migration/index.html
    +++ b/docs/3.3/migration/index.html
    @@ -1 +1 @@
    -         Migrating to v3.x · Bootstrap            
    Skip to main content
    Bootstrap 4 is here!

    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 + Migrating to v3.x · Bootstrap
    Skip to main content
    Bootstrap 4 is here!

    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 diff --git a/docs/4.0/about/brand/index.html b/docs/4.0/about/brand/index.html index 6db88badcb..b1027997bb 100644 --- a/docs/4.0/about/brand/index.html +++ b/docs/4.0/about/brand/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/about/history/index.html b/docs/4.0/about/history/index.html index 1721ce7a87..5e36cbe4c7 100644 --- a/docs/4.0/about/history/index.html +++ b/docs/4.0/about/history/index.html @@ -95,14 +95,14 @@ Examples
    diff --git a/docs/4.0/about/license/index.html b/docs/4.0/about/license/index.html index d0e429b62a..17a8b6a69f 100644 --- a/docs/4.0/about/license/index.html +++ b/docs/4.0/about/license/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/about/overview/index.html b/docs/4.0/about/overview/index.html index 6dac12918c..00fa3e2c31 100644 --- a/docs/4.0/about/overview/index.html +++ b/docs/4.0/about/overview/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/about/team/index.html b/docs/4.0/about/team/index.html index a56e71809b..20ddc1bee1 100644 --- a/docs/4.0/about/team/index.html +++ b/docs/4.0/about/team/index.html @@ -95,14 +95,14 @@ Examples
    diff --git a/docs/4.0/about/translations/index.html b/docs/4.0/about/translations/index.html index 23dad7e11a..cb98965573 100644 --- a/docs/4.0/about/translations/index.html +++ b/docs/4.0/about/translations/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/browser-bugs/index.html b/docs/4.0/browser-bugs/index.html index 4adb595e8e..ae16ee0644 100644 --- a/docs/4.0/browser-bugs/index.html +++ b/docs/4.0/browser-bugs/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/alerts/index.html b/docs/4.0/components/alerts/index.html index f27765a122..62aa8dcb16 100644 --- a/docs/4.0/components/alerts/index.html +++ b/docs/4.0/components/alerts/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/badge/index.html b/docs/4.0/components/badge/index.html index c87c4501db..b62676eaf1 100644 --- a/docs/4.0/components/badge/index.html +++ b/docs/4.0/components/badge/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/breadcrumb/index.html b/docs/4.0/components/breadcrumb/index.html index 1641eb0eec..027271b37f 100644 --- a/docs/4.0/components/breadcrumb/index.html +++ b/docs/4.0/components/breadcrumb/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/button-group/index.html b/docs/4.0/components/button-group/index.html index 145555c6aa..af80170e00 100644 --- a/docs/4.0/components/button-group/index.html +++ b/docs/4.0/components/button-group/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/buttons/index.html b/docs/4.0/components/buttons/index.html index 03b011fe30..242f252285 100644 --- a/docs/4.0/components/buttons/index.html +++ b/docs/4.0/components/buttons/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/card/index.html b/docs/4.0/components/card/index.html index 6fafaa2d1a..e4590d8e1b 100644 --- a/docs/4.0/components/card/index.html +++ b/docs/4.0/components/card/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/carousel/index.html b/docs/4.0/components/carousel/index.html index c36703b4ac..e945b47a78 100644 --- a/docs/4.0/components/carousel/index.html +++ b/docs/4.0/components/carousel/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/collapse/index.html b/docs/4.0/components/collapse/index.html index 697a379dcf..99c7c4963f 100644 --- a/docs/4.0/components/collapse/index.html +++ b/docs/4.0/components/collapse/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/dropdowns/index.html b/docs/4.0/components/dropdowns/index.html index c77b13058c..081fa636ab 100644 --- a/docs/4.0/components/dropdowns/index.html +++ b/docs/4.0/components/dropdowns/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/forms/index.html b/docs/4.0/components/forms/index.html index cc03d66edd..ddd806a7c0 100644 --- a/docs/4.0/components/forms/index.html +++ b/docs/4.0/components/forms/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/input-group/index.html b/docs/4.0/components/input-group/index.html index ac2f46a707..f22a1c48bd 100644 --- a/docs/4.0/components/input-group/index.html +++ b/docs/4.0/components/input-group/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/jumbotron/index.html b/docs/4.0/components/jumbotron/index.html index 91ec67d59b..acb7e639e8 100644 --- a/docs/4.0/components/jumbotron/index.html +++ b/docs/4.0/components/jumbotron/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/list-group/index.html b/docs/4.0/components/list-group/index.html index 0b631acedd..3c01240728 100644 --- a/docs/4.0/components/list-group/index.html +++ b/docs/4.0/components/list-group/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/modal/index.html b/docs/4.0/components/modal/index.html index ef270f31c5..1b9c3e4901 100644 --- a/docs/4.0/components/modal/index.html +++ b/docs/4.0/components/modal/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/navbar/index.html b/docs/4.0/components/navbar/index.html index a6b2874c02..fb747c6dd3 100644 --- a/docs/4.0/components/navbar/index.html +++ b/docs/4.0/components/navbar/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/navs/index.html b/docs/4.0/components/navs/index.html index a55db3baa7..51e5a50c8e 100644 --- a/docs/4.0/components/navs/index.html +++ b/docs/4.0/components/navs/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/pagination/index.html b/docs/4.0/components/pagination/index.html index b614d50977..b90627dffa 100644 --- a/docs/4.0/components/pagination/index.html +++ b/docs/4.0/components/pagination/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/popovers/index.html b/docs/4.0/components/popovers/index.html index 89eae03d78..5469b5f886 100644 --- a/docs/4.0/components/popovers/index.html +++ b/docs/4.0/components/popovers/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/progress/index.html b/docs/4.0/components/progress/index.html index 3a1b286957..28c4f4824b 100644 --- a/docs/4.0/components/progress/index.html +++ b/docs/4.0/components/progress/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/scrollspy/index.html b/docs/4.0/components/scrollspy/index.html index ccb201d0f0..6dc70f2200 100644 --- a/docs/4.0/components/scrollspy/index.html +++ b/docs/4.0/components/scrollspy/index.html @@ -86,14 +86,14 @@ Examples
    diff --git a/docs/4.0/components/tooltips/index.html b/docs/4.0/components/tooltips/index.html index 4a9d791e4b..73663d80d7 100644 --- a/docs/4.0/components/tooltips/index.html +++ b/docs/4.0/components/tooltips/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/content/code/index.html b/docs/4.0/content/code/index.html index 93588f9aeb..a2cbc18b59 100644 --- a/docs/4.0/content/code/index.html +++ b/docs/4.0/content/code/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/content/figures/index.html b/docs/4.0/content/figures/index.html index 511cb364f9..11d27a5578 100644 --- a/docs/4.0/content/figures/index.html +++ b/docs/4.0/content/figures/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/content/images/index.html b/docs/4.0/content/images/index.html index 3978625afd..7d9a4cc8a6 100644 --- a/docs/4.0/content/images/index.html +++ b/docs/4.0/content/images/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/content/reboot/index.html b/docs/4.0/content/reboot/index.html index cc6bc841b9..6566870e23 100644 --- a/docs/4.0/content/reboot/index.html +++ b/docs/4.0/content/reboot/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/content/tables/index.html b/docs/4.0/content/tables/index.html index a1e1605821..93d424890f 100644 --- a/docs/4.0/content/tables/index.html +++ b/docs/4.0/content/tables/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/content/typography/index.html b/docs/4.0/content/typography/index.html index 6c95660d40..c609d01f8d 100644 --- a/docs/4.0/content/typography/index.html +++ b/docs/4.0/content/typography/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/examples/index.html b/docs/4.0/examples/index.html index b7cf9daa70..567c1ea32e 100644 --- a/docs/4.0/examples/index.html +++ b/docs/4.0/examples/index.html @@ -84,14 +84,14 @@ Examples diff --git a/docs/4.0/extend/approach/index.html b/docs/4.0/extend/approach/index.html index 1ed244cfde..feb384317a 100644 --- a/docs/4.0/extend/approach/index.html +++ b/docs/4.0/extend/approach/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/extend/icons/index.html b/docs/4.0/extend/icons/index.html index 1fcf2aa44c..6e5b456901 100644 --- a/docs/4.0/extend/icons/index.html +++ b/docs/4.0/extend/icons/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/extend/index.html b/docs/4.0/extend/index.html index 206140aeb2..028601f20a 100644 --- a/docs/4.0/extend/index.html +++ b/docs/4.0/extend/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/getting-started/accessibility/index.html b/docs/4.0/getting-started/accessibility/index.html index 214447154f..371c5f4413 100644 --- a/docs/4.0/getting-started/accessibility/index.html +++ b/docs/4.0/getting-started/accessibility/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/getting-started/best-practices/index.html b/docs/4.0/getting-started/best-practices/index.html index 43fe2ef598..c78c9d5ab1 100644 --- a/docs/4.0/getting-started/best-practices/index.html +++ b/docs/4.0/getting-started/best-practices/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/getting-started/browsers-devices/index.html b/docs/4.0/getting-started/browsers-devices/index.html index dc4c06b5a7..b05c59d027 100644 --- a/docs/4.0/getting-started/browsers-devices/index.html +++ b/docs/4.0/getting-started/browsers-devices/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/getting-started/build-tools/index.html b/docs/4.0/getting-started/build-tools/index.html index 6838757ed7..eb0f2da218 100644 --- a/docs/4.0/getting-started/build-tools/index.html +++ b/docs/4.0/getting-started/build-tools/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/getting-started/contents/index.html b/docs/4.0/getting-started/contents/index.html index 46162c45b0..154f355346 100644 --- a/docs/4.0/getting-started/contents/index.html +++ b/docs/4.0/getting-started/contents/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/getting-started/download/index.html b/docs/4.0/getting-started/download/index.html index 2e4bf90c0b..ab756ee68c 100644 --- a/docs/4.0/getting-started/download/index.html +++ b/docs/4.0/getting-started/download/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/getting-started/introduction/index.html b/docs/4.0/getting-started/introduction/index.html index aa12e286d8..03f9c9758b 100644 --- a/docs/4.0/getting-started/introduction/index.html +++ b/docs/4.0/getting-started/introduction/index.html @@ -86,14 +86,14 @@ Examples @@ -519,7 +519,7 @@ diff --git a/docs/4.0/getting-started/theming/index.html b/docs/4.0/getting-started/theming/index.html index b93732ac8f..9e11fbd1e9 100644 --- a/docs/4.0/getting-started/theming/index.html +++ b/docs/4.0/getting-started/theming/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/getting-started/webpack/index.html b/docs/4.0/getting-started/webpack/index.html index 3d84c09c79..be21a048a3 100644 --- a/docs/4.0/getting-started/webpack/index.html +++ b/docs/4.0/getting-started/webpack/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/layout/grid/index.html b/docs/4.0/layout/grid/index.html index 7061d00367..e75480c34a 100644 --- a/docs/4.0/layout/grid/index.html +++ b/docs/4.0/layout/grid/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/layout/media-object/index.html b/docs/4.0/layout/media-object/index.html index 5444d09bb1..2602e9df94 100644 --- a/docs/4.0/layout/media-object/index.html +++ b/docs/4.0/layout/media-object/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/layout/overview/index.html b/docs/4.0/layout/overview/index.html index 976bed0bbe..1169082dcb 100644 --- a/docs/4.0/layout/overview/index.html +++ b/docs/4.0/layout/overview/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/layout/utilities-for-layout/index.html b/docs/4.0/layout/utilities-for-layout/index.html index fda4c4ed3e..999f155c7d 100644 --- a/docs/4.0/layout/utilities-for-layout/index.html +++ b/docs/4.0/layout/utilities-for-layout/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/migration/index.html b/docs/4.0/migration/index.html index c48be80630..d8026a0106 100644 --- a/docs/4.0/migration/index.html +++ b/docs/4.0/migration/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/borders/index.html b/docs/4.0/utilities/borders/index.html index f540c9266a..049719a07f 100644 --- a/docs/4.0/utilities/borders/index.html +++ b/docs/4.0/utilities/borders/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/clearfix/index.html b/docs/4.0/utilities/clearfix/index.html index 88f47706ac..0d0f048a2e 100644 --- a/docs/4.0/utilities/clearfix/index.html +++ b/docs/4.0/utilities/clearfix/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/close-icon/index.html b/docs/4.0/utilities/close-icon/index.html index 4920dd678c..ce1a7d6b55 100644 --- a/docs/4.0/utilities/close-icon/index.html +++ b/docs/4.0/utilities/close-icon/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/colors/index.html b/docs/4.0/utilities/colors/index.html index acc858ef4a..23b6c34610 100644 --- a/docs/4.0/utilities/colors/index.html +++ b/docs/4.0/utilities/colors/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/display/index.html b/docs/4.0/utilities/display/index.html index cf05b0976d..6658a49661 100644 --- a/docs/4.0/utilities/display/index.html +++ b/docs/4.0/utilities/display/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/embed/index.html b/docs/4.0/utilities/embed/index.html index 8d8c9da588..9849984b16 100644 --- a/docs/4.0/utilities/embed/index.html +++ b/docs/4.0/utilities/embed/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/flex/index.html b/docs/4.0/utilities/flex/index.html index f9772e5d48..311fdb82b7 100644 --- a/docs/4.0/utilities/flex/index.html +++ b/docs/4.0/utilities/flex/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/float/index.html b/docs/4.0/utilities/float/index.html index ab55c0a442..ee6819e4e6 100644 --- a/docs/4.0/utilities/float/index.html +++ b/docs/4.0/utilities/float/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/image-replacement/index.html b/docs/4.0/utilities/image-replacement/index.html index 7982b22618..ba34a50b80 100644 --- a/docs/4.0/utilities/image-replacement/index.html +++ b/docs/4.0/utilities/image-replacement/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/position/index.html b/docs/4.0/utilities/position/index.html index 0fec75d5e9..ed0070a2ce 100644 --- a/docs/4.0/utilities/position/index.html +++ b/docs/4.0/utilities/position/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/screenreaders/index.html b/docs/4.0/utilities/screenreaders/index.html index b889b4a5ba..2312a8c44d 100644 --- a/docs/4.0/utilities/screenreaders/index.html +++ b/docs/4.0/utilities/screenreaders/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/sizing/index.html b/docs/4.0/utilities/sizing/index.html index 95d5a4a8b0..ba98368bb0 100644 --- a/docs/4.0/utilities/sizing/index.html +++ b/docs/4.0/utilities/sizing/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/spacing/index.html b/docs/4.0/utilities/spacing/index.html index 6c106b6300..5538e855f2 100644 --- a/docs/4.0/utilities/spacing/index.html +++ b/docs/4.0/utilities/spacing/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/text/index.html b/docs/4.0/utilities/text/index.html index 3eeeaed851..2c61b18b8b 100644 --- a/docs/4.0/utilities/text/index.html +++ b/docs/4.0/utilities/text/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/vertical-align/index.html b/docs/4.0/utilities/vertical-align/index.html index 71819d28f9..449c39471e 100644 --- a/docs/4.0/utilities/vertical-align/index.html +++ b/docs/4.0/utilities/vertical-align/index.html @@ -86,14 +86,14 @@ Examples diff --git a/docs/4.0/utilities/visibility/index.html b/docs/4.0/utilities/visibility/index.html index 938d688aee..02895dbb50 100644 --- a/docs/4.0/utilities/visibility/index.html +++ b/docs/4.0/utilities/visibility/index.html @@ -86,14 +86,14 @@ Examples diff --git a/migration/index.html b/migration/index.html index e59891cc38..8ee1338bcc 100644 --- a/migration/index.html +++ b/migration/index.html @@ -1 +1 @@ - 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 + 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