About
Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.
diff --git a/docs/3.3/about/index.html b/docs/3.3/about/index.html index 1c3a5365b3..54ea846ea2 100644 --- a/docs/3.3/about/index.html +++ b/docs/3.3/about/index.html @@ -1 +1 @@ -
Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.
Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
Originally released on , we've since had over twenty releases, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
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.
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.
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.
Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
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.
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.
Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
Originally released on , we've since had over twenty releases, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
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.
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.
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.
Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
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.
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.
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 | Edge issue #6793560 | #18692 |
Microsoft Edge | Hovered element still remains in | Edge issue #5381673 | #14211 |
Microsoft Edge | When hovering over a | Edge issue #817822 | #14528 |
Microsoft Edge | CSS | Edge issue #3342037 | #16671 |
Microsoft Edge |
| Edge issue #5865620 | #18504 |
Microsoft Edge |
| 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 | Edge issue #7787318 | #19670 |
Firefox |
| 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 |
| 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 | Mozilla bug #577785 | #19670 |
Firefox |
| Mozilla bug #1282363 | #20161 |
Firefox (Windows) | Right border of | 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 | Chromium issue #595210 | #17338 |
Chrome (OS X) | Clicking above | Chromium issue #419108 | Offshoot of #8350 & Chromium issue #337668 |
Chrome | CSS infinite linear animation with alpha transparency leaks memory. | Chromium issue #429375 | #14409 |
Chrome |
| Chromium issue #465274 | #16022 |
Chrome |
| Chromium issue #534750 | #17438, #14237 |
Chrome | Clicking scrollbar in | Chromium issue #597642 | #19810 |
Chrome | Don’t make | 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 |
| WebKit bug #156684 | #17403 |
Safari (OS X) |
| WebKit bug #156687 | #17403 |
Safari (OS X) | Weird button behavior with some | 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 | WebKit bug #138192, Apple Safari Radar #19435018 | #14868 |
Safari (iPad) |
| WebKit bug #150079, Apple Safari Radar #23082521 | #14975 |
Safari (iOS) |
| 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 | WebKit bug #148061, Apple Safari Radar #22299624 | #16988 |
Safari (iOS) |
| WebKit bug #139848, Apple Safari Radar #19434878 | #11266, #13098 |
Safari (iOS) | Tapping on | WebKit bug #151933 | #16028 |
Safari (iOS) |
| WebKit bug #153056 | #18859 |
Safari (iOS) | Tapping into an | WebKit bug #153224, Apple Safari Radar #24235301 | #17497 |
Safari (iOS) |
| WebKit bug #153852 | #14839 |
Safari (iOS) | Scroll gesture in text field in | WebKit bug #153856 | #14839 |
Safari (iOS) | Tapping from one | WebKit bug #158276 | #19927 |
Safari (iOS) | Modal with | WebKit bug #158342 | #17695 |
Safari (iOS) | Don’t make | WebKit bug #158517 | #12832 |
Safari (iPad Pro) | Rendering of descendants of | WebKit bug #152637, Apple Safari Radar #24030853 | #18738 |
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 | Edge UserVoice idea #12299532 | #19984 |
Microsoft Edge | Implement sticky positioning from CSS Positioned Layout Level 3 | Edge UserVoice idea #6263621 | #17021 |
Firefox | Fire a | Mozilla bug #1264125 | Mozilla bug #1182856 |
Firefox | Implement the | Mozilla bug #854148 | #20143 |
Firefox | Implement the HTML5 | Mozilla bug #840640 | #20175 |
Chrome | Implement the | Chromium issue #304163 | #20143 |
Chrome | Implement the | Chromium issue #576815 | #19984 |
Chrome | Implement sticky positioning from CSS Positioned Layout Level 3 | Chromium issue #231752 | #17021 |
Safari | Implement the | WebKit bug #64861 | #19984 |
Safari | Implement the HTML5 | WebKit bug #84635 | #20175 |
A list of the browser bugs that Bootstrap is currently grappling with.
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 | Edge issue #6793560 | #18692 |
Microsoft Edge | Hovered element still remains in | Edge issue #5381673 | #14211 |
Microsoft Edge | When hovering over a | Edge issue #817822 | #14528 |
Microsoft Edge | CSS | Edge issue #3342037 | #16671 |
Microsoft Edge |
| Edge issue #5865620 | #18504 |
Microsoft Edge |
| 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 | Edge issue #7787318 | #19670 |
Firefox |
| 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 |
| 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 | Mozilla bug #577785 | #19670 |
Firefox |
| Mozilla bug #1282363 | #20161 |
Firefox (Windows) | Right border of | 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 | Chromium issue #595210 | #17338 |
Chrome (OS X) | Clicking above | Chromium issue #419108 | Offshoot of #8350 & Chromium issue #337668 |
Chrome | CSS infinite linear animation with alpha transparency leaks memory. | Chromium issue #429375 | #14409 |
Chrome |
| Chromium issue #465274 | #16022 |
Chrome |
| Chromium issue #534750 | #17438, #14237 |
Chrome | Clicking scrollbar in | Chromium issue #597642 | #19810 |
Chrome | Don’t make | 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 |
| WebKit bug #156684 | #17403 |
Safari (OS X) |
| WebKit bug #156687 | #17403 |
Safari (OS X) | Weird button behavior with some | 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 | WebKit bug #138192, Apple Safari Radar #19435018 | #14868 |
Safari (iPad) |
| WebKit bug #150079, Apple Safari Radar #23082521 | #14975 |
Safari (iOS) |
| 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 | WebKit bug #148061, Apple Safari Radar #22299624 | #16988 |
Safari (iOS) |
| WebKit bug #139848, Apple Safari Radar #19434878 | #11266, #13098 |
Safari (iOS) | Tapping on | WebKit bug #151933 | #16028 |
Safari (iOS) |
| WebKit bug #153056 | #18859 |
Safari (iOS) | Tapping into an | WebKit bug #153224, Apple Safari Radar #24235301 | #17497 |
Safari (iOS) |
| WebKit bug #153852 | #14839 |
Safari (iOS) | Scroll gesture in text field in | WebKit bug #153856 | #14839 |
Safari (iOS) | Tapping from one | WebKit bug #158276 | #19927 |
Safari (iOS) | Modal with | WebKit bug #158342 | #17695 |
Safari (iOS) | Don’t make | WebKit bug #158517 | #12832 |
Safari (iPad Pro) | Rendering of descendants of | WebKit bug #152637, Apple Safari Radar #24030853 | #18738 |
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 | Edge UserVoice idea #12299532 | #19984 |
Microsoft Edge | Implement sticky positioning from CSS Positioned Layout Level 3 | Edge UserVoice idea #6263621 | #17021 |
Firefox | Fire a | Mozilla bug #1264125 | Mozilla bug #1182856 |
Firefox | Implement the | Mozilla bug #854148 | #20143 |
Firefox | Implement the HTML5 | Mozilla bug #840640 | #20175 |
Chrome | Implement the | Chromium issue #304163 | #20143 |
Chrome | Implement the | Chromium issue #576815 | #19984 |
Chrome | Implement sticky positioning from CSS Positioned Layout Level 3 | Chromium issue #231752 | #17021 |
Safari | Implement the | WebKit bug #64861 | #19984 |
Safari | Implement the HTML5 | WebKit bug #84635 | #20175 |
Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
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.
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.
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>
.
Icon classes should only be used on elements that contain no text content and have no child elements.
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:
@icon-font-path
and/or @icon-font-name
variables in the source Less files.url()
paths in the compiled CSS.Use whatever option best suits your specific development setup.
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.
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 The first Bootstrap 4 beta 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.
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 08d49eaf94..7e1c1a060f 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 Aww yeah, Bootstrap 4 is coming! CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
Overview
Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.
HTML5 doctype
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!DOCTYPE html>
+ CSS · Bootstrap Skip to main content The first Bootstrap 4 beta 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.
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!
Typography and links
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.
Using Sass
While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.
What's included
Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.
Path Description lib/
Ruby gem code (Sass configuration, Rails and Compass integrations) tasks/
Converter scripts (turning upstream Less to Sass) test/
Compilation tests templates/
Compass package manifest vendor/assets/
Sass, JavaScript, and font files Rakefile
Internal tasks, such as rake and convert
Visit the Sass port's GitHub repository to see these files in action.
Installation
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.
\ No newline at end of file
+}
Using Sass
While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.
What's included
Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.
Path Description lib/
Ruby gem code (Sass configuration, Rails and Compass integrations) tasks/
Converter scripts (turning upstream Less to Sass) test/
Compilation tests templates/
Compass package manifest vendor/assets/
Sass, JavaScript, and font files Rakefile
Internal tasks, such as rake and convert
Visit the Sass port's GitHub repository to see these files in action.
Installation
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.
diff --git a/docs/3.3/customize/index.html b/docs/3.3/customize/index.html
index 359bec3b67..c3f618324c 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 Aww yeah, Bootstrap 4 is coming! Customize and download
Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
Heads up! The default value for @brand-primary
has changed in the latest release to improve contrast and accessibility. Please double check your compiled CSS when upgrading. 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.
\ No newline at end of file
+ Customize and download · Bootstrap Skip to main content The first Bootstrap 4 beta is here! Customize and download
Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
Heads up! The default value for @brand-primary
has changed in the latest release to improve contrast and accessibility. Please double check your compiled CSS when upgrading. 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.
\ 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 d9bf628459..f471993740 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 Aww yeah, Bootstrap 4 is coming! 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.
Source code
Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.
Sass
Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.
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 The first Bootstrap 4 beta 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.
Source code
Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.
Sass
Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.
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 -->
diff --git a/docs/3.3/index.html b/docs/3.3/index.html
index ff043b5bee..51bbc1022d 100644
--- a/docs/3.3/index.html
+++ b/docs/3.3/index.html
@@ -27,7 +27,7 @@
Skip to main content
- Aww yeah, Bootstrap 4 is coming!
+ The first Bootstrap 4 beta is here!