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 @@ - About · Bootstrap
Skip to main content
Aww yeah, Bootstrap 4 is coming!

About

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

History

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

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

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

Team

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

Core team

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

Sass team

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

Brand guidelines

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

Mark and logo

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

B
B

Bootstrap

Bootstrap

Download mark

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

Bootstrap
Bootstrap
Bootstrap

Name

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

Bootstrap

(correct)

BootStrap

(incorrect)

Twitter Bootstrap

(incorrect)

Colors

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

\ No newline at end of file + About · Bootstrap
Skip to main content
The first Bootstrap 4 beta is here!

About

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

History

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

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

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

Team

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

Core team

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

Sass team

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

Brand guidelines

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

Mark and logo

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

B
B

Bootstrap

Bootstrap

Download mark

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

Bootstrap
Bootstrap
Bootstrap

Name

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

Bootstrap

(correct)

BootStrap

(incorrect)

Twitter Bootstrap

(incorrect)

Colors

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

\ No newline at end of file diff --git a/docs/3.3/browser-bugs/index.html b/docs/3.3/browser-bugs/index.html index 06fa631781..7709843e76 100644 --- a/docs/3.3/browser-bugs/index.html +++ b/docs/3.3/browser-bugs/index.html @@ -1 +1 @@ - Wall of browser bugs · Bootstrap
Skip to main content
Aww yeah, Bootstrap 4 is coming!

Wall of browser bugs

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

Browser bugs

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

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

See also:

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

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

Edge issue #6793560 #18692
Microsoft Edge

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

Edge issue #5381673 #14211
Microsoft Edge

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

Edge issue #817822 #14528
Microsoft Edge

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

Edge issue #3342037 #16671
Microsoft Edge

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

Edge issue #5865620 #18504
Microsoft Edge

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

Edge issue #7165383 #18543
Microsoft Edge

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

Edge issue #6274505 #18228
Microsoft Edge

Hovering over descendant SVG element fires mouseleave event at ancestor

Edge issue #7787318 #19670
Firefox

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

Mozilla bug #1023761 #13453
Firefox

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

Mozilla bug #654072 #793
Firefox

focus events should not be fired at the document object

Mozilla bug #1228802 #18365
Firefox

Wide floated table doesn’t wrap onto new line

Mozilla bug #1277782 #19839
Firefox

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

Mozilla bug #577785 #19670
Firefox

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

Mozilla bug #1282363 #20161
Firefox (Windows)

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

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

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

Mozilla bug #1259972 #19626
Chrome (Android)

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

Chromium issue #595210 #17338
Chrome (OS X)

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

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

CSS infinite linear animation with alpha transparency leaks memory.

Chromium issue #429375 #14409
Chrome

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

Chromium issue #465274 #16022
Chrome

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

Chromium issue #534750 #17438, #14237
Chrome

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

Chromium issue #597642 #19810
Chrome

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

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

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

Chromium issue #449180 #15298
Safari

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

WebKit bug #156684 #17403
Safari (OS X)

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

WebKit bug #156687 #17403
Safari (OS X)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tapping on <body> doesn’t fire click events

WebKit bug #151933 #16028
Safari (iOS)

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

WebKit bug #153056 #18859
Safari (iOS)

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

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

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

WebKit bug #153852 #14839
Safari (iOS)

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

WebKit bug #153856 #14839
Safari (iOS)

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

WebKit bug #158276 #19927
Safari (iOS)

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

WebKit bug #158342 #17695
Safari (iOS)

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

WebKit bug #158517 #12832
Safari (iPad Pro)

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

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

Most wanted features

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

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

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

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

Edge UserVoice idea #12299532 #19984
Microsoft Edge

Implement sticky positioning from CSS Positioned Layout Level 3

Edge UserVoice idea #6263621 #17021
Firefox

Fire a transitioncancel event when a CSS transition is canceled

Mozilla bug #1264125 Mozilla bug #1182856
Firefox

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

Mozilla bug #854148 #20143
Firefox

Implement the HTML5 <dialog> element

Mozilla bug #840640 #20175
Chrome

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

Chromium issue #304163 #20143
Chrome

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

Chromium issue #576815 #19984
Chrome

Implement sticky positioning from CSS Positioned Layout Level 3

Chromium issue #231752 #17021
Safari

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

WebKit bug #64861 #19984
Safari

Implement the HTML5 <dialog> element

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

Wall of browser bugs

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

Browser bugs

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

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

See also:

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

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

Edge issue #6793560 #18692
Microsoft Edge

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

Edge issue #5381673 #14211
Microsoft Edge

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

Edge issue #817822 #14528
Microsoft Edge

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

Edge issue #3342037 #16671
Microsoft Edge

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

Edge issue #5865620 #18504
Microsoft Edge

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

Edge issue #7165383 #18543
Microsoft Edge

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

Edge issue #6274505 #18228
Microsoft Edge

Hovering over descendant SVG element fires mouseleave event at ancestor

Edge issue #7787318 #19670
Firefox

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

Mozilla bug #1023761 #13453
Firefox

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

Mozilla bug #654072 #793
Firefox

focus events should not be fired at the document object

Mozilla bug #1228802 #18365
Firefox

Wide floated table doesn’t wrap onto new line

Mozilla bug #1277782 #19839
Firefox

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

Mozilla bug #577785 #19670
Firefox

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

Mozilla bug #1282363 #20161
Firefox (Windows)

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

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

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

Mozilla bug #1259972 #19626
Chrome (Android)

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

Chromium issue #595210 #17338
Chrome (OS X)

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

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

CSS infinite linear animation with alpha transparency leaks memory.

Chromium issue #429375 #14409
Chrome

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

Chromium issue #465274 #16022
Chrome

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

Chromium issue #534750 #17438, #14237
Chrome

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

Chromium issue #597642 #19810
Chrome

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

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

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

Chromium issue #449180 #15298
Safari

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

WebKit bug #156684 #17403
Safari (OS X)

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

WebKit bug #156687 #17403
Safari (OS X)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tapping on <body> doesn’t fire click events

WebKit bug #151933 #16028
Safari (iOS)

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

WebKit bug #153056 #18859
Safari (iOS)

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

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

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

WebKit bug #153852 #14839
Safari (iOS)

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

WebKit bug #153856 #14839
Safari (iOS)

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

WebKit bug #158276 #19927
Safari (iOS)

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

WebKit bug #158342 #17695
Safari (iOS)

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

WebKit bug #158517 #12832
Safari (iPad Pro)

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

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

Most wanted features

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

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

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

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

Edge UserVoice idea #12299532 #19984
Microsoft Edge

Implement sticky positioning from CSS Positioned Layout Level 3

Edge UserVoice idea #6263621 #17021
Firefox

Fire a transitioncancel event when a CSS transition is canceled

Mozilla bug #1264125 Mozilla bug #1182856
Firefox

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

Mozilla bug #854148 #20143
Firefox

Implement the HTML5 <dialog> element

Mozilla bug #840640 #20175
Chrome

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

Chromium issue #304163 #20143
Chrome

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

Chromium issue #576815 #19984
Chrome

Implement sticky positioning from CSS Positioned Layout Level 3

Chromium issue #231752 #17021
Safari

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

WebKit bug #64861 #19984
Safari

Implement the HTML5 <dialog> element

WebKit bug #84635 #20175
\ No newline at end of file diff --git a/docs/3.3/components/index.html b/docs/3.3/components/index.html index d03072cae3..c5a7a0e77c 100644 --- a/docs/3.3/components/index.html +++ b/docs/3.3/components/index.html @@ -1,4 +1,4 @@ - Components · Bootstrap
Skip to main content
Aww yeah, Bootstrap 4 is coming!

Components

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

Glyphicons

Available glyphs

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

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

How to use

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

Don't mix with other components

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

Only for use on empty elements

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

Changing the icon font location

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

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

Use whatever option best suits your specific development setup.

Accessible icons

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

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

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

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

Examples

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

<button type="button" class="btn btn-default" aria-label="Left Align">
+         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.

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

Examples

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

<button type="button" class="btn btn-default" aria-label="Left Align">
   <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
 </button>
 
diff --git a/docs/3.3/css/index.html b/docs/3.3/css/index.html
index 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.

<!DOCTYPE html>
 <html lang="en">
   ...
 </html>

Mobile first

With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bootstrap sets basic global display, typography, and link styles. Specifically, we:

  • Set background-color: #fff; on the body
  • Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base
  • Set the global link color via @link-color and apply link underlines only on :hover

These styles can be found within scaffolding.less.

Normalize.css

For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal.

Containers

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

<div class="container">
@@ -1104,4 +1104,4 @@ To edit settings, press <kbd><kbd>ctrl// Usage
 .jumbotron {
   .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
-}

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.

Bootstrap for Sass

\ 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.

Bootstrap for Sass

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.

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

Drag and drop here, or .


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

Less files

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

Common CSS

Components

JavaScript components

jQuery plugins

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

Linked to components

Magic

Produces two files

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

jQuery required

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

Less variables

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

Colors

Gray and brand colors for use across Bootstrap.

Scaffolding

Settings for some of the most global styles.

Background color for <body>.

Global text color on <body>.

Typography

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

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

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

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

By default, this inherits from the <body>.

Iconography

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

Load fonts from this directory.

File name for all font files.

Element ID within SVG icon file.

Components

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

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

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

Width of the border for generating carets that indicate dropdowns.

Carets increase slightly in size for larger components.

Tables

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

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

Padding for cells in .table-condensed.

Default background color used for all tables.

Background color used for .table-striped.

Background color used for .table-hover.

Border color for table and cell borders.

Buttons

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

Forms

<input> background color

<input disabled> background color

Text color for <input>s

<input> border color

Default .form-control border radius

Large .form-control border radius

Small .form-control border radius

Border color for inputs on focus

Placeholder text color

Default .form-control height

Large .form-control height

Small .form-control height

.form-group margin

Background color for textual input addons

Border color for textual input addons

Disabled cursor for form controls and buttons.

Dropdown menu container and contents.

Background for the dropdown menu.

Dropdown menu border-color.

Dropdown menu border-color for IE8.

Divider color for between dropdown items.

Text color for headers within dropdown menus.

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

Media queries breakpoints

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

Deprecated @screen-xs as of v3.0.1

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

Deprecated @screen-phone as of v3.0.1

Deprecated @screen-sm as of v3.0.1

Deprecated @screen-tablet as of v3.0.1

Deprecated @screen-md as of v3.0.1

Deprecated @screen-desktop as of v3.0.1

Deprecated @screen-lg as of v3.0.1

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

Grid system

Define your custom responsive grid.

Number of columns in the grid.

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

Point at which the navbar becomes uncollapsed.

Point at which the navbar begins collapsing.

Container sizes

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

For @screen-sm-min and up.

For @screen-md-min and up.

For @screen-lg-min and up.

Inverted navbar

Shared nav styles

Tabs

Pills

Pagination

Pager

Jumbotron

Form states and alerts

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

Tooltips

Tooltip max width

Tooltip text color

Tooltip background color

Tooltip arrow width

Tooltip arrow color

Popovers

Popover body background color

Popover maximum width

Popover border color

Popover fallback border color

Popover title background color

Popover arrow width

Popover arrow color

Popover outer arrow width

Popover outer arrow color

Popover outer arrow fallback color

Labels

Default label background color

Primary label background color

Success label background color

Info label background color

Warning label background color

Danger label background color

Default label text color

Modals

Padding applied to the modal body

Padding applied to the modal title

Modal title line-height

Background color of modal content area

Modal content border color

Modal content border color for IE8

Modal backdrop background color

Modal backdrop opacity

Modal header border color

Alerts

Define alert colors, border radius, and padding.

Progress bars

Background color of the whole progress component

Progress bar text color

Variable for setting rounded corners on progress bar.

Default progress bar color

Success progress bar color

Warning progress bar color

Danger progress bar color

Info progress bar color

List group

Background color on .list-group-item

.list-group-item border color

List group border radius

Background color of single list items on hover

Text color of active list items

Background color of active list items

Border color of active list elements

Text color for content within active list items

Text color of disabled list items

Background color of disabled list items

Text color for content within disabled list items

Panels

Border color for elements within panels

Thumbnails

Padding around the thumbnail image

Thumbnail background color

Thumbnail border color

Thumbnail border radius

Custom text color for thumbnail captions

Padding around the thumbnail caption

Wells

Badges

Badge text color in active nav link

Badge background color in active nav link

Breadcrumb background color

Breadcrumb text color

Text color of current page in the breadcrumb

Textual separator for between breadcrumb elements

Close

Code

Type

Horizontal offset for forms and lists.

Text muted color

Abbreviations and acronyms border color

Headings small color

Blockquote small color

Blockquote font size

Blockquote border color

Page header border color

Width of horizontal description list titles

Point at which .dl-horizontal becomes horizontal

Horizontal line color.

Download

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

\ No newline at end of file + Customize and download · Bootstrap
Skip to main content
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.

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

Drag and drop here, or .


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

Less files

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

Common CSS

Components

JavaScript components

jQuery plugins

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

Linked to components

Magic

Produces two files

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

jQuery required

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

Less variables

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

Colors

Gray and brand colors for use across Bootstrap.

Scaffolding

Settings for some of the most global styles.

Background color for <body>.

Global text color on <body>.

Typography

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

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

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

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

By default, this inherits from the <body>.

Iconography

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

Load fonts from this directory.

File name for all font files.

Element ID within SVG icon file.

Components

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

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

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

Width of the border for generating carets that indicate dropdowns.

Carets increase slightly in size for larger components.

Tables

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

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

Padding for cells in .table-condensed.

Default background color used for all tables.

Background color used for .table-striped.

Background color used for .table-hover.

Border color for table and cell borders.

Buttons

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

Forms

<input> background color

<input disabled> background color

Text color for <input>s

<input> border color

Default .form-control border radius

Large .form-control border radius

Small .form-control border radius

Border color for inputs on focus

Placeholder text color

Default .form-control height

Large .form-control height

Small .form-control height

.form-group margin

Background color for textual input addons

Border color for textual input addons

Disabled cursor for form controls and buttons.

Dropdown menu container and contents.

Background for the dropdown menu.

Dropdown menu border-color.

Dropdown menu border-color for IE8.

Divider color for between dropdown items.

Text color for headers within dropdown menus.

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

Media queries breakpoints

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

Deprecated @screen-xs as of v3.0.1

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

Deprecated @screen-phone as of v3.0.1

Deprecated @screen-sm as of v3.0.1

Deprecated @screen-tablet as of v3.0.1

Deprecated @screen-md as of v3.0.1

Deprecated @screen-desktop as of v3.0.1

Deprecated @screen-lg as of v3.0.1

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

Grid system

Define your custom responsive grid.

Number of columns in the grid.

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

Point at which the navbar becomes uncollapsed.

Point at which the navbar begins collapsing.

Container sizes

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

For @screen-sm-min and up.

For @screen-md-min and up.

For @screen-lg-min and up.

Inverted navbar

Shared nav styles

Tabs

Pills

Pagination

Pager

Jumbotron

Form states and alerts

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

Tooltips

Tooltip max width

Tooltip text color

Tooltip background color

Tooltip arrow width

Tooltip arrow color

Popovers

Popover body background color

Popover maximum width

Popover border color

Popover fallback border color

Popover title background color

Popover arrow width

Popover arrow color

Popover outer arrow width

Popover outer arrow color

Popover outer arrow fallback color

Labels

Default label background color

Primary label background color

Success label background color

Info label background color

Warning label background color

Danger label background color

Default label text color

Modals

Padding applied to the modal body

Padding applied to the modal title

Modal title line-height

Background color of modal content area

Modal content border color

Modal content border color for IE8

Modal backdrop background color

Modal backdrop opacity

Modal header border color

Alerts

Define alert colors, border radius, and padding.

Progress bars

Background color of the whole progress component

Progress bar text color

Variable for setting rounded corners on progress bar.

Default progress bar color

Success progress bar color

Warning progress bar color

Danger progress bar color

Info progress bar color

List group

Background color on .list-group-item

.list-group-item border color

List group border radius

Background color of single list items on hover

Text color of active list items

Background color of active list items

Border color of active list elements

Text color for content within active list items

Text color of disabled list items

Background color of disabled list items

Text color for content within disabled list items

Panels

Border color for elements within panels

Thumbnails

Padding around the thumbnail image

Thumbnail background color

Thumbnail border color

Thumbnail border radius

Custom text color for thumbnail captions

Padding around the thumbnail caption

Wells

Badges

Badge text color in active nav link

Badge background color in active nav link

Breadcrumb background color

Breadcrumb text color

Text color of current page in the breadcrumb

Textual separator for between breadcrumb elements

Close

Code

Type

Horizontal offset for forms and lists.

Text muted color

Abbreviations and acronyms border color

Headings small color

Blockquote small color

Blockquote font size

Blockquote border color

Page header border color

Width of horizontal description list titles

Point at which .dl-horizontal becomes horizontal

Horizontal line color.

Download

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

\ No newline at end of file diff --git a/docs/3.3/getting-started/index.html b/docs/3.3/getting-started/index.html index 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.

Download Bootstrap

Source code

Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.

Download source

Sass

Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.

Download Sass

Bootstrap CDN

The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links.

<!-- Latest compiled and minified CSS -->
+         Getting started · Bootstrap            
Skip to main content
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.

Download Bootstrap

Source code

Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.

Download source

Sass

Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.

Download Sass

Bootstrap CDN

The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links.

<!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
 <!-- Optional theme -->
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!