Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.
History
Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
Originally released on Friday, August 19, 2011, we've since had over twenty releases, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
Team
Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.
The official Sass port of Bootstrap was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass contributing guidelines for information on how the Sass port is developed.
Brand guidelines
Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's Brand Assets.
Mark and logo
Use either the Bootstrap mark (a capital B) or the standard logo (just Bootstrap). It should always appear in Helvetica Neue Bold. Do not use the Twitter bird in association with Bootstrap.
B
B
Bootstrap
Bootstrap
Download mark
Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
Name
The project and framework should always be referred to as Bootstrap. No Twitter before it, no capital s, and no abbreviations except for one, a capital B.
Bootstrap
(correct)
BootStrap
(incorrect)
Twitter Bootstrap
(incorrect)
Colors
Our docs and branding use a handful of primary colors to differentiate what is Bootstrap from what is in Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.
History
Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
Originally released on Friday, August 19, 2011, we've since had over twenty releases, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
Team
Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.
The official Sass port of Bootstrap was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass contributing guidelines for information on how the Sass port is developed.
Brand guidelines
Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's Brand Assets.
Mark and logo
Use either the Bootstrap mark (a capital B) or the standard logo (just Bootstrap). It should always appear in Helvetica Neue Bold. Do not use the Twitter bird in association with Bootstrap.
B
B
Bootstrap
Bootstrap
Download mark
Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
Name
The project and framework should always be referred to as Bootstrap. No Twitter before it, no capital s, and no abbreviations except for one, a capital B.
Bootstrap
(correct)
BootStrap
(incorrect)
Twitter Bootstrap
(incorrect)
Colors
Our docs and branding use a handful of primary colors to differentiate what is Bootstrap from what is in Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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><htmllang="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>.
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!
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.
This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.
@@ -457,7 +448,6 @@
Oh snap! Change a few things up and try submitting again.
-
Progress bars
@@ -485,7 +475,6 @@
10% Complete (danger)
-
List groups
@@ -528,7 +517,6 @@
-
Panels
@@ -589,7 +577,6 @@
-
Wells
@@ -597,7 +584,6 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.
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.
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.
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
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.
varbootstrapButton=$.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.
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.
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).
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
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.
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).
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/3.4/about/index.html b/docs/3.4/about/index.html
index bd066b5a6c..faa448ec94 100755
--- a/docs/3.4/about/index.html
+++ b/docs/3.4/about/index.html
@@ -15,13 +15,8 @@
-
-
-
-
-
@@ -61,7 +56,6 @@
Bootstrap 3 has reached end of life. Upgrade to the latest or consider Never-Ending Support for your project
Originally released on , we've since had over twenty releases, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
-
@@ -221,7 +213,6 @@
The official Sass port of Bootstrap was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass contributing guidelines for information on how the Sass port is developed.
@@ -804,19 +797,11 @@
-
-
-
-
-
-
-
-
diff --git a/docs/3.4/components/index.html b/docs/3.4/components/index.html
index 02de75646e..5efbcc600f 100755
--- a/docs/3.4/components/index.html
+++ b/docs/3.4/components/index.html
@@ -15,18 +15,12 @@
-
-
-
-
-
-
@@ -66,7 +60,6 @@
Bootstrap 3 has reached end of life. Upgrade to the latest or consider Never-Ending Support for your project
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.
Replace the navbar brand with your own image by swapping the text for an <img>. Since the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.
@@ -2933,7 +2918,6 @@
</div></nav>
-
Forms
Place form content within .navbar-form for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.
As a heads up, .navbar-form shares much of its code with .form-inline via mixin. Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.
@@ -2977,7 +2961,6 @@
Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute. If none of these is present, screen readers may resort to using the placeholder attribute, if present, but note that use of placeholder as a replacement for other labelling methods is not advised.
-
Buttons
Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar.
@@ -3027,7 +3010,6 @@
<pclass="navbar-text">Signed in as Mark Otto</p>
-
Non-nav links
For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.
@@ -3050,7 +3032,6 @@
<pclass="navbar-text navbar-right">Signed in as <ahref="#"class="navbar-link">Mark Otto</a></p>
-
Component alignment
Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.
These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.
@@ -3060,7 +3041,6 @@
We'll revisit this when we can rewrite that component in v4.
-
Fixed to top
Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.
@@ -3100,7 +3080,6 @@
Make sure to include this after the core Bootstrap CSS.
-
Fixed to bottom
Add .navbar-fixed-bottom and include a .container or .container-fluid to center and pad navbar content.
@@ -3140,7 +3119,6 @@
Make sure to include this after the core Bootstrap CSS.
-
Static top
Create a full-width navbar that scrolls away with the page by adding .navbar-static-top and include a .container or .container-fluid to center and pad navbar content.
Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.
@@ -3175,7 +3153,6 @@
</div></nav>
-
Inverted navbar
Modify the look of the navbar by adding .navbar-inverse.
@@ -3324,7 +3301,6 @@
</ul></nav>
-
Sizing
Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.
Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).
@@ -839,7 +828,6 @@
You can use the mark tag to <mark>highlight</mark> text.
-
Deleted text
For indicating blocks of text that have been deleted use the <del> tag.
@@ -878,7 +866,6 @@
<small>This line of text is meant to be treated as fine print.</small>
-
Bold
For emphasizing a snippet of text with a heavier font-weight.
For quoting blocks of content from another source within your document.
@@ -1013,7 +998,6 @@
...
</blockquote>
-
Lists
@@ -1227,7 +1211,6 @@ To edit settings, press <kbd><kbd>ctrl</table>
-
Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
@@ -1270,7 +1253,6 @@ To edit settings, press <kbd><kbd>ctrl</table>
-
Bordered table
Add .table-bordered for borders on all sides of the table and cells.
@@ -1309,7 +1291,6 @@ To edit settings, press <kbd><kbd>ctrl</table>
-
Hover rows
Add .table-hover to enable a hover state on table rows within a <tbody>.
@@ -1348,7 +1329,6 @@ To edit settings, press <kbd><kbd>ctrl</table>
-
Condensed table
Add .table-condensed to make tables more compact by cutting cell padding in half.
@@ -1386,7 +1366,6 @@ To edit settings, press <kbd><kbd>ctrl</table>
-
Contextual classes
Use contextual classes to color table rows or individual cells.
@@ -1691,7 +1670,6 @@ To edit settings, press <kbd><kbd>ctrlDo not mix form groups directly with input groups. Instead, nest the input group inside of the form group.
-
Inline form
Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
@@ -1849,7 +1827,6 @@ To edit settings, press <kbd><kbd>ctrl</div></form>
-
Supported controls
Examples of standard form controls supported in an example form layout.
@@ -2067,7 +2044,6 @@ To edit settings, press <kbd><kbd>ctrl<option>5</option></select>
-
Static control
When you need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.
@@ -2137,7 +2113,6 @@ To edit settings, press <kbd><kbd>ctrlThe above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.
-
Disabled state
Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.
@@ -2203,7 +2178,6 @@ To edit settings, press <kbd><kbd>ctrl</fieldset></form>
-
Readonly state
Add the readonly boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
@@ -2213,7 +2187,6 @@ To edit settings, press <kbd><kbd>ctrl
@@ -2235,7 +2208,6 @@ To edit settings, press <kbd><kbd>ctrl<spanid="helpBlock"class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
-
Validation states
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.
@@ -2518,7 +2490,6 @@ To edit settings, press <kbd><kbd>ctrl<spanid="inputGroupSuccess4Status"class="sr-only">(success)</span></div>
-
Control sizing
Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.
@@ -2584,7 +2555,6 @@ To edit settings, press <kbd><kbd>ctrl</div></form>
-
Column sizing
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
@@ -2730,7 +2700,6 @@ To edit settings, press <kbd><kbd>ctrl
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.
@@ -2752,7 +2721,6 @@ To edit settings, press <kbd><kbd>ctrl
Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.
@@ -2882,7 +2849,6 @@ To edit settings, press <kbd><kbd>ctrl
<spanclass="caret"></span>
-
Quick floats
Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.
<divclass="pull-left">...</div>
@@ -2908,7 +2874,6 @@ To edit settings, press <kbd><kbd>ctrlTo align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.
-
Center content blocks
Set an element to display: block and center via margin. Available as a mixin and class.
<divclass="center-block">...</div>
@@ -2924,7 +2889,6 @@ To edit settings, press <kbd><kbd>ctrl.center-block();}
-
Clearfix
Easily clear floats by adding .clearfixto the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.
<!-- Usage as a class -->
@@ -2946,7 +2910,6 @@ To edit settings, press <kbd><kbd>ctrl.clearfix();}
-
Showing and hiding content
Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.
.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.
@@ -2972,7 +2935,6 @@ To edit settings, press <kbd><kbd>ctrl.hidden();}
-
Screen reader and keyboard navigation content
Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.
<aclass="sr-only sr-only-focusable"href="#content">Skip to main content</a>
@@ -2982,7 +2944,6 @@ To edit settings, press <kbd><kbd>ctrl.sr-only-focusable();}
-
Image replacement
Utilize the .text-hide class or mixin to help replace an element's text content with a background image.
<h1class="text-hide">Custom heading</h1>
@@ -2998,7 +2959,6 @@ To edit settings, press <kbd><kbd>ctrlFor faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
-
Available classes
Use a single or combination of the available classes for toggling content across viewport breakpoints.
@@ -3146,7 +3106,6 @@ To edit settings, press <kbd><kbd>ctrl
The class .visible-print also exists but is deprecated as of v3.2.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.
-
Test cases
Resize your browser or load on different devices to test the responsive utility classes.
@@ -3258,7 +3217,6 @@ To edit settings, press <kbd><kbd>ctrlGrid variables and mixins are covered within the Grid system section.
-
Compiling Bootstrap
Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, consult the Getting Started section for how to setup your development environment to run the necessary commands.
Third party compilation tools may work with Bootstrap, but they are not supported by our core team.
@@ -3392,11 +3350,9 @@ To edit settings, press <kbd><kbd>ctrl@caret-width-base:4px;@caret-width-large:5px;
-
Vendor mixins
Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixes in your compiled CSS.
The mixin is deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.
@@ -3596,7 +3552,6 @@ To edit settings, press <kbd><kbd>ctrl#gradient>.horizontal-three-colors(#777;#333;25%;#000);
Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using the .reset-filter() mixin alongside background-image: none;.
-
Utility mixins
Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.
@@ -3742,7 +3697,6 @@ To edit settings, press <kbd><kbd>ctrl
For information on how to install and use Bootstrap for Sass, consult the GitHub repository readme. It's the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.
@@ -3750,7 +3704,6 @@ To edit settings, press <kbd><kbd>ctrl
This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.
@@ -457,7 +448,6 @@
Oh snap! Change a few things up and try submitting again.
-
Progress bars
@@ -485,7 +475,6 @@
10% Complete (danger)
-
List groups
@@ -528,7 +517,6 @@
-
Panels
@@ -589,7 +577,6 @@
-
Wells
@@ -597,7 +584,6 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.
-
diff --git a/docs/3.4/getting-started/index.html b/docs/3.4/getting-started/index.html
index 37f64f8ac0..4489a3c8f7 100755
--- a/docs/3.4/getting-started/index.html
+++ b/docs/3.4/getting-started/index.html
@@ -15,13 +15,8 @@
-
-
-
-
-
@@ -61,7 +56,6 @@
Bootstrap 3 has reached end of life. Upgrade to the latest or consider Never-Ending Support for your project
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.
On mobile devices, opening a dropdown adds a .dropdown-backdrop as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.
@@ -1026,7 +1017,6 @@
-
Usage
@@ -1064,7 +1054,6 @@
After adding position: relative; in your CSS, call the scrollspy via JavaScript:
$('body').scrollspy({target:'#navbar-example'})
-
Methods
.scrollspy('refresh')
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
@@ -1672,7 +1659,6 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
<atabindex="0"class="btn btn-lg btn-danger"role="button"data-toggle="popover"data-trigger="focus"title="Dismissible popover"data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
-
Usage
Enable popovers via JavaScript:
$('#example').popover(options)
@@ -1892,7 +1878,6 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
-
Usage
Just add data-dismiss="alert" to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.
@@ -1911,7 +1896,6 @@ sagittis lacus vel augue laoreet rutrum faucibus.">$().alert('close')
Closes an alert by removing it from the DOM. If the .fade and .in classes are present on the element, the alert will fade out before it is removed.
-
Events
Bootstrap's alert plugin exposes a few events for hooking into alert functionality.
@@ -2545,7 +2529,6 @@ sagittis lacus vel augue laoreet rutrum faucibus.">.carousel('pause')
Stops the carousel from cycling through items.
-
.carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an array).
@@ -2628,7 +2611,6 @@ sagittis lacus vel augue laoreet rutrum faucibus.">}})
-
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".
@@ -2712,7 +2694,6 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
-
@@ -2849,7 +2830,6 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
-
Back to top
@@ -2890,19 +2870,11 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
-
-
-
-
-
-
-
-
diff --git a/docs/3.4/migration/index.html b/docs/3.4/migration/index.html
index 75a1203fac..02f6717ffd 100755
--- a/docs/3.4/migration/index.html
+++ b/docs/3.4/migration/index.html
@@ -15,13 +15,8 @@
-
-
-
-
-
@@ -61,7 +56,6 @@
Bootstrap 3 has reached end of life. Upgrade to the latest or consider Never-Ending Support for your project
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
@@ -631,7 +624,6 @@
Dapibus ac facilisis in
-
A simple primary list group item
A simple secondary list group item
A simple success list group item
@@ -645,7 +637,6 @@
<ulclass="list-group"><liclass="list-group-item">Dapibus ac facilisis in</li>
-
<liclass="list-group-item list-group-item-primary">A simple primary list group item</li><liclass="list-group-item list-group-item-secondary">A simple secondary list group item</li><liclass="list-group-item list-group-item-success">A simple success list group item</li>
@@ -662,7 +653,6 @@
<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
<ahref="#"class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
@@ -967,7 +956,6 @@
e.relatedTarget// previous active tab})
Documentation and examples for Bootstrapâs powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to themâall via classes.
Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
Mark Otto @mdo 
Jacob Thornton @fat 
Chris Rebert @cvrebert 
Julian Thilo @juthilo 
XhmikosR @xhmikosr 
Heinrich Fenkart @hnrch02 
Patrick H. Lauke @patrickhlauke 
Thomas McDonald @thomas-mcdonald 
Gleb Mazovetskiy @glebm 
diff --git a/docs/3.3/javascript/index.html b/docs/3.3/javascript/index.html
index 66f13f6261..89352843f2 100644
--- a/docs/3.3/javascript/index.html
+++ b/docs/3.3/javascript/index.html
@@ -1,4 +1,4 @@
- 