adding explicit aria-expanded="false" initial state (so they're
correctly announced by AT as being collapsed), and - in the case of
old-school use of <a> - role="button"
- add aria-hidden="true" to avoid SRs unintentionally reading out the
Unicode character (see
http://www.filamentgroup.com/lab/bulletproof_icon_fonts.html)
- callout with advice on accessible icon usage
- replaced sr-only text in examples with (in the case of button) cleaner
aria-label
- additional example of icon used to convey meaning (in a
non-interactive control)
Added support for `aria-expanded` toggling via JavaScript. Added
`aria-controls`, `aria-expanded`, `aria-labelledby` to tabs docs.
Added `aria-expanded` unit test for the tabs plugin.
See also #13554.
Closes#14154 by merging it.
also includes tiny fix/clarification to two existing unit tests for the
.active class, adding data-toggle=“button” explicitly to the tested
buttons
Closes#14819.
Added handling of aria-expanded=true/false to collapse.js, updated
documentation to include advice on making expand/collapse controls
accessible, updated examples and javascript documentation to use
aria-expanded and aria-controls (when targetting single collapsible
element, using ID rather than class selector)
Closes#14147.
Closes#14153.
If opening a modal when a scrollbar is present, closing it, then
resizing the window so the scrollbar disappears, then opening the
modal again, the content would shift. This fixes the problem by
always calculating the scrollbar width every time a modal is opened.
Closes#14357.
Fixes#14038.
Research supporting this choice of approach:
https://gist.github.com/cvrebert/68659d0333a578d75372
Why not <button>?
Even with a `tabindex` attribute, they don't gain focus when clicked upon in:
* Mac OS X Firefox 30.0
* Mac OS X Safari 7.0.5
Simplifies the build tooling a teeny bit.
This data file shouldn't need to be updated for v3 ever again.
This task will also be unnecessary in v4.
[skip sauce] [skip validator]
In Sass, variable must be declared before it is used.
This also removes Miscellaneous section, because horizontal line color
and form / list paddings are Typography.
Works around #13914.
We might give it another go in the future but the stuff this breaks over the time does not justify having it enabled. The gain in size is negligible:
dist/css/bootstrap.min.css: 108.65 kB → 109.5 kB
dist/css/bootstrap-theme.min.css: 18.84 kB → 18.86 kB
docs/assets/css/docs.min.css: 20.44 kB → 20.61 kB
Will hopefully revert this reversion and land a fully-working version of UMD in v3.3.0.
Revert "some changes from #13801 - add strict mode back and =="
This reverts commit 2b302f69ee.
Revert "Fix regression of #10038 introduced by #13772"
This reverts commit e9d6756a1a.
Revert "MD/CommonJS/Globals #12909"
This reverts commit 1c6fa9010d.
Revert "address #13811"
This reverts commit f347d7d955.
Conflicts:
js/carousel.js
js/collapse.js
js/dropdown.js
js/modal.js
js/tab.js
js/tooltip.js
Instead of our homegrown grunt/shrinkwrap.js
Fixes#13483.
New npm-shrinkwrap.json is human-readable but still in a consistent/stable format.
Should aid debugging, produce better diffs, and be less prone to merge conflicts
`@gray-light` darkens from #999 to #777, which puts `.text-muted` at the
threshold for the 4.5:1 WCAG minimum contrast[1]. #777:#fff is 4.48:1.
The “Example” headers in docs become #959595, which is contrast ratio
3:1, the minimum for larger text. Since the headers are less important
than the surrounding text, 3:1 is fine and an improvement on the
previous #bbb:#fff (1.92:1).
Fixes issue #13847.
[1] http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
faster and easier to test/develop js functionality not represented in unit tests, and gives us
a playground for interactions, etc.
It also makes it so developing javascript is now decoupled form jekyll, which should make everything
faster and less painful.
This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70
which broke scrollspy for dropdowns.
Be more consistent across the whole codebase.
Also, make use of JSHint's 2.5.1 `extends` and `qunit` options. This way we set our basis options in js/.jshintrc and override the rest.
https://github.com/twbs/bootstrap/issues/13734
A panel placed inside of a collapsible panel recieve extra top border.
This commit reduces the effect of a selector to apply a border only to
the collapsible panel body itself, not to any panel placed within it.
The validator doesn't choke anymore on this and even though it's not spec compliant, it's needed for some IE versions. So until we move favicon.ico in root, this should do the job.
* register the callback before invoking the toggling
* listen for `hidden` instead of `hide`
* account for the possibility of the associated `show` event being preventDefault-ed
Adds relevant unit tests.
Generates a unique id for tooltip and adds [aria-describedby] to the element
it is called on. Resolves issue #13480
- set up test
- linted the code styles
- passed the tests
- integrated feedback from @cvrebert
Not a Safari bug. It's standards-compliant.
Quoting from http://www.w3.org/TR/css3-ui/#resize :
> ### 8.1. `resize` property
>
> * Applies to: elements with `overflow` other than `visible`
>
> The `resize` property applies to elements whose computed `overflow` value is something other than `visible`.
Original comment was added in commit 648c468927.
commit 81324491f4913d6797c3c9e4df83a1aefd7d9116
Author: Daniel <dano.husar@gmail.com>
Date: Sat May 10 17:37:29 2014 +0100
use opacity mixin
commit 694b0a3fcd196e8cba9e4c23850f903c0804cb44
Author: Daniel Husar <dano.husar@gmail.com>
Date: Fri May 9 13:47:35 2014 +0100
Update button-groups.less
Assuming sr-only is used in the actual live code so that the menu can be
shown open already ... but having sr-only in the highlighted example
code itself is confusing/misleading.
Also, change the text for the button from "Dropdown" to "Dropdown
trigger" for clarity (and it then matches
http://getbootstrap.com/javascript/#dropdowns)
Actually wait for the collapsed item to complete. If complete is called
with other target, instead of simply returning and do nothing, wait again
until the proper target triggers the event (otherwise this leaves collapse
in a broken state).
By definition, XS screens have no minimum size, only a maximum size.
(Symmetrically, LG screens have no maximum size, hence why there's no @screen-lg-max.)
change `@zindex-popover` and `@zindex-tooltip` values to be greater than
those set for `@zindex-modal` allowing tooltips and popovers to be
displayed in front of modals (and all other content).
The Google Analytics account we use cannot currently be upgraded to Universal Analytics. In order to keep using Analytics, we have to stick with Classic for now.
* master:
Replace some images on the Carousel example with some base64 encoded 1x1 gifs
ugh grunt
moar grunt
mo copy
http://www.youtube.com/watch?v=AJWtLf4-WWs
grunt
Copy change
fix grammar in comment in forms.less
Fixes#12759Fixes#12738
replace .visible-{size} with .visible-{size}-{display} ; fixes#8869
Conflicts:
dist/css/bootstrap-theme.css.map
dist/css/bootstrap.css.map
docs/assets/js/customize.min.js
docs/assets/js/raw-files.min.js
docs/dist/css/bootstrap-theme.css.map
docs/dist/css/bootstrap.css.map
less/mixins.less
Ensures proper sizing and alignment of input groups within inline and
navbar forms.
* Uses `inline-table` on the input group
* Nukes the widths to `width: auto`—without this, the parent input
group doesn’t size correctly and functions as `display: table;` or
`block`
* Removes default max-height from .navbar-collapse (so not every navbar
will get a max-height collapse section)
* Scopes regular 340px max-height to fixed top and bottom navbars only
(those are the only ones that really need a max-height to enable
scrolling)
* Adds a landscape media query for phones to cap the max-height at
200px for fixed navbars"
* master:
Fix bad grunt merge and then G R U N T
Reorder the Gruntfile a bit
Fixes#12892: Link to one of the SO articles on Bootstrap modals and YouTube
Remove unneeded quotes.
Rename generateRawFilesJs to generateRawFiles
Remove redundant parens
Conflicts:
docs/assets/js/raw-files.min.js
test-infra/npm-shrinkwrap.canonical.json
Safari renders this fine for one reason or another, but Chrome still renders the media query styles to make tables responsive. This change scopes them to screen devices only, so printing looks boss everywhere.
If you add an "active" class to one of the <li> elements in the top navigation, and style it so that active tabs have a different color, it becomes clear that there is a 1 pixel stray line under the navigation. This style fixes that.
The col-*-push-0 and col-*-pull-0 classes try to reset the positioning using 0% but this prevents the opposite direction positioning to freeze and not being set correctly.
To fix that, these must set the position to auto instead of 0% with means left:auto and right:auto instead of left:0% and right:0%.
Instead of not rendering the element at all with display:none, use opacity:0 and z-index:-1 so the radio element has a defined position on the document and user agents can show the required message in the right place.
* The problem with #12674 is that it reassigns the same variable, but the color values were purposely different.
* This uses Less's color functions to generate the proper darker colors.
* Why darker colors? Because those CSS carets render lighter than their solid border counterparts. Consider it a design hack.
Running "browserstack_runner" task
Using config: /home/travis/build/twbs/bootstrap/browserstack.json
Launching server on port: 8888
Downloading tunnel jar to `/home/travis/build/twbs/bootstrap/node_modules/browserstack-runner/lib/BrowserStackTunnel.jar`
Launching tunnel
Error: Invalid or corrupt jarfile /home/travis/build/twbs/bootstrap/node_modules/browserstack-runner/lib/BrowserStackTunnel.jar
[Runner alert] Tunnel launch timeout
Exiting
Non existent tunnel
Replaces links to holder.js with links to the new docs.min.js.
The uncompressed holder.js file is now in docs/assets/js/vendor,
which is excluded from Jekyll builds. In turn, Holder is now
included in docs.min.js, which is smaller than holder.js,
so this should make everybody happy. :)
Fixed issue in Tabs example where the div had been marked as 'active' but the li had not been. The correct tab of data would be displayed on load, but no tabs would be highlighted. The tabs with fade example does not have this issue. jsFiddle: http://jsfiddle.net/uXV56/
- Remove `.container-fluid` from "removed classes".
- Container isn't fluid by default (`.container`) and `.row` isn't percentage-based, so update docs.
- Replace `*.html`, `docs/assets` and `examples` with `docs` (new directory)
- Instead of `_*`, it's just `_config.yml`, without regex (speeds up bower download a few milliseconds)
This changes the order of component variations throughout the repo (code and docs) to be more consistent.
The order now used everywhere is the one most frequently found in the repo before:
Default, Primary, Success, Info, Warning, Danger
Hey look, I'm contributing to CONTRIBUTING.md!
This anchor must have been overlooked while updating the docs in a previous commit. Expected behavior: scroll the document to a linked section. Experienced behavior: nada.
This proposed file change renames the anchor text from `coding conventions` to `coding guidelines` and changes the anchor link from `#code-conventions` to `#code-guidelines`.
- Implements new format "Copyright 2011-xxxx Twitter, Inc.", which resonates well with our History page and more accurately reflects the copyright status of the repo
- grunt dist to update all the files
- Made more generic. Applies to "> .table" and "> .table-responsive > .table" to support td/tr background colors too and not just .table-striped
- Supports tfoot
* Deprecate .pull-right class for .blockquote-reverse
* Move font-size change to the parent, blockquote, instead of setting on the p element to allow more flexible content
This generates a glyphicons.yml file from the glyphicons.less source,
and then components.html uses that data to generate the Glyphicons docs
by iterating through the data. The _data directory was introduced in
Jekyll 1.3.0, and GitHub Pages is already on [version 1.4.2][1].
Fixes#11862.
[1] https://github.com/github/pages-gem/blob/master/github-pages.gemspec#L16
Tested the customizer, the generated zip had:
css/bootstrap.css:line 6: * Licensed under MIT (<%= _.pluck(pkg.licenses, "url").join(", ") %>)
Revised customizer generates:
css/bootstrap.css:line 4: * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
New stuff:
* Adds `.has-feedback` and `.form-control-feedback` to show icon-based
form feedback to users. Fixes#11836.
* Removes the `width: 1em` on `.glyphicon` because it makes it
impractical to resize the width of all icons, even if they’re not
“empty” (e.g., a simple `.glyphicon { width: 30px; }` wouldn’t work,
nor would a class preceeded by a parent class.
Clean up:
* Sets `width: auto;` on all `.form-control`s within inline forms.
* Removes all the inline `select` menu `width` styles because all
inputs are now `auto`.
* Update form states docs to separate out sections better.
* Fixes#11055: add mention of select menu styling on Android stock
browsers with included optional fix
* Update IDs and docs nav to include bookmark links to each section
* Add callout to navbar docs about fixed position, inputs, and virtual
keyboard
* Floats any `.input-group` within a toolbar
* Simplifies the CSS to remove sibling selectors and instead use a
negative amrgin on the parent with only `margin-left`
See it in action: http://jsbin.com/aGEcUqAT/1/.
* Removes an old pair of selectors that didn’t properly target the
right-aligned navbar alignment of dropdown menus.
* Deprecates the `.pull-right` alignment in favor of a more specific
and unique class name.
* Adds `.dropdown-menu-right` as the new alignment class. This is then
mixin-ed into the `.navbar-right.navbar-nav` dropdown menus for
auto-alignment.
* To override that auto-alignment, use `.dropdown-menu-left` as needed.
* Adds nav link to sidebar for contextual classes
* Refactors to use prefixed classes, like .list-group-item-info, instead of chained classes
* Adds default and linked variations to example in docs
Links are dead now since Google blacklisted the group for massive spam,
which they could be of no help in resolving. We’ll have a new official
forum for discussions soon folks <3.
Dropping an unused variable in the Dropdown function inside the `dropdown.js` code.
There are no new/changed unit tests, as there are no feature/bug changes requiring new test cases.
For the record: I agree to dual-license this contribution under the Apache 2 and MIT licenses.
This slight reworking of the navbar spacing was brought about by a
problem noted in #11530: use of `.navbar-form.navbar-right` leaves an
extra 15px of space on the right.
Here’s what’s new:
* Removed the `padding` on `.navbar-collapse` within static top, fixed
top, and fixed bottom navbars. Meaning, it’s still there for the
default navbar. This was the root cause of the extra 15px padding for
navbar forms.
* As part of this, I also replaced the existing negative margin
overrides for last-child elements with more contextual ones within
their sub-components.
Overall not too different, but should be more effective now and easier
to work with now.
For example of new changes, see http://jsbin.com/odeSiSo/1/.
Removed all the periods. Tested in Chrome and Firefox
(current versions). In Chrome you get a stray newline when
triple-clicking, in Firefox it is clean.
fixes#11550
`navbar-text` should only float when the navbar is expanded on larger
screens, otherwise the element might be (hidden) behind `navbar-nav`.
Fixes#11513.
X-Ref: #8820#8815
Scrollspy target in tab content does not work properly. Calling .parents('.active') will return all parents with an active class (including the tab pane). Changing this line to .parentsUntil(this.options.target, '.active') should resolve the issue. This will scope the query to only search for active elements inside the scrollspy target.
URLs without protocols get "file:" prepended when their document is
loaded as a file. Make sure the docs can always be opened by
specifying a protocol.
Twitter's widget library[1] provides an async snippet to inject the
script tag later. Since widgets.js came before the local JS, if
twitter.com took long to respond it would prevent subsequent
synchronous script tags.
[1] https://dev.twitter.com/docs/tfw-javascript
jQuery.com uses Google Analytics and so sets a cookie when you visit
the site. When you request jquery.js from its CDN, code.jquery.com,
you take a hit from sending your previous GA cookie in the request.
Google Hosted Libraries[1] and googleapis.com never set cookies.
[1] https://developers.google.com/speed/libraries/devguide
As in #7284, it can often be useful to style text like a heading in
places where using the heading tag would be either semantically
incorrect, less accessible, or otherwise invalid.
Support this in .jumbotron as in the rest of the document by allowing
elements with class .h1 to stand in for the h1 element.
Signed-off-by: Kevin Locke <kevin@kevinlocke.name>
Add a variable to allow the well border color to be specified.
The reason I'd like to see this included is that my companies styleguide
requires an explicit border color on well-like constructs. This variable
allows me to easily override the default to use that color.
* Since we removed the z-index of our default navbars in 76baacf2c9, we no longer need this warning.
* A quick test of the new code showed no problems with dropdowns falling behind a sibling navbar, so folks should be good to go.
If elements are hidden using `display: none;` which are targets mapped by scrollspy, the plugin might select an incorrect or no menu item.
Checking if the target is visible solved this.
* Resets the default navbar z-index to auto at a certain breakpoint
* Adds fixed navbar z-index var to fixed bottom navbar (previously only on fixed top navbar)
The check to see if jQuery was defined as incorrect causing the "Bootstrap requires jQuery" message to only be displayed if jQuery is defined and has a value which equates to `false`.
In it's current state Bootstrap always prevents the default action for a click
event on `[data-toggle="modal"]` elements
(see https://github.com/twbs/bootstrap/blob/master/js/modal.js#L233).
Instead this should only happen when the element is a link.
Screen reading applications, including Apple's VoiceOver, improperly pronounce the word "content" in "Skip to content" as an adjective rather than a noun because of insufficient context. "Skip to main content" is pronounced correctly.
See #6 and Guideline #10 at the following site for more information:
http://redish.net/content/papers/interactions.htmlAlter wording of example Skip Nav link to improve pronunciation
Appending stylesheets by iterating the `__less` Hash creates an order
that is not the same as 'bootstrap.less'.
Some stylesheets like 'component-animations.less' and 'modals.less' have
selectors with matching specificity, and so file order decides which
style wins. This causes issue #10030 by putting `.fade.in` after
`.modal-backdrop.in` and gives the backdrop a higher opacity than
intended.
This change uses the Less ordering in 'bootstrap.less' to generate the
final stylesheets in the Customizer to make sure customized file
ordering matches the distribution file order.
Fixes#10030
When thumbnail caption markup is used in combination with a hyperlinked image, the image is not responsive. (non-hyperlinked images are fine, like the example in the docs) Adding a selector to apply responsiveness to hyperlinked images when thumbnail captions are used.
I probably missed a few things and screwed up a few others, but this
takes the place of much of #9910. I haven't added many variables—that
should be reserved for v3.1—but I have rejiggered the layout, added
missing ones, corrected wrong values, etc.
/cc @cvrebert @juthilo @saas786
* Fixes unrelated typo in readme
* Add new Welcome section with history, team, callouts, and community
subsections
* Redesigns callouts to be a bit lighterweight with colored headings
this will extend js interface, to be possible to setup targets for tabs as
var content=$('<div class="tab-pane">',{text: 'content'});
var tab=('<li>',{html: $('<a>',{text: 'Main options'})}).addClass('active').data({target: $main,toggle: 'tab'}).appendTo(tabs);
At the moment to make dynamic top offset calculator on multiple elements, one would write:
``` javascript
$('.my-affix').each(function () {
var $el = $(this);
$el.affix({
offset: {
top: function () { return $el.offset().top; }
}
});
})
```
This patch will allow to:
``` javascript
$('.my-affix').affix({
offset: {
top: function ($el) { return $el.offset().top; }
}
});
```
I've kept only the files I consider relevant to bower installation:
- Files in dist directory;
- Files in js directory;
- Files in less directory;
- bower.json file;
- README.md file;
- LICENSE file.
html overflow-x must be hidden to prevent accidental x-scroll on small screens. This is more apparent with touch screens, where the user often gestures diagonally instead of a true vertical gesture.
Updated text in the jumbotron container to reflect the Bootstrap 3 change from hero unit to jumbotron. (Wasn't sure if it should be 'a Jumbotron' or just 'Jumbotron' though...
Bootstrap break point for tablet portrait 768 keeps the row intact, so it's not appropriate to have off-canvas elements at that width. Custom off-canvas.css should be breakpoint 767px
- Changed some existential constructions (yes, they're really called
existential http://en.wikipedia.org/wiki/Existential_clause). These
aren't innately evil, but rewordings of existential clauses often sound
more direct.
- Changed a "which" to a "that."
* Use absolute positioning instead to remove navbar from flow of
document
* No more negative margin fu
* Flip around padding between container and navbar for proper display
in xs and sm viewports
* Headings, not headers
* Simplifies content compared to #10088 which adds quite a lot
* Uses proper heading elements (`h1` - `h6`) and not `header`
* Collects links at bottom instead of mid-paragraph
Use zopfli with 1000 iterations, pngout /r with various blocksizes and deflopt.
assets/ico/apple-touch-icon-114-precomposed.png | Bin 2939 -> 2931 bytes
assets/ico/apple-touch-icon-144-precomposed.png | Bin 3614 -> 3549 bytes
assets/ico/apple-touch-icon-57-precomposed.png | Bin 1577 -> 1573 bytes
assets/ico/favicon.png | Bin 889 -> 887 bytes
Total difference: -79 bytes.
Hadn't thought about this until fixes#10137, but it makes sense I
think to have margin on the bottom of thumbnails for spacing when
stacking (or using different grid tiers).
* Update styling of justified nav links to be more mobile friendly
(with all four rounded corners and some margin between items)
* Add note to docs to callout bogus WebKit rendering on component and
example
The left control should be positioned from the left, while the right
control should be positioning from the right. Positioning both from the
left results in the right carousel control being incorrectly positioned
(most noticeable with a larger than normal font size).
Changed the wording to reflect the default button's new look since it's no longer grey and doesn't have a gradient. I'd say this new wording isn't ideal and needs something a bit more, well, descriptive.
Removed unnecessary ms-linear-gradient prefix. There was never a stable release of IE that supported -ms- prefixed gradients, those were only in preview versions (stable IE10 supports both prefixed and unprefixed gradients). (source: http://lea.verou.me/2013/04/can-we-get-rid-of-gradient-prefixes/)
When using bower the "main" property is used to specify the files that should be consumed by applications including the package as a dependency.
Without including the fonts in this array the glyphicons do not work correctly as the relative font paths do not work after the "main" files are copied into my projects public dir using tools like https://github.com/yatskevich/grunt-bower-task
For now I have manually copied the fonts dir in the location needed for my project. But by accepting this pull request this will not be necessary for me or for other people that use bower.
Looking to contribute something to Bootstrap? **Here's how you can help.**
Please take a moment to review this document in order to make the contribution
process easy and effective for everyone involved.
Following these guidelines helps to communicate that you respect the time of
the developers managing and developing this open source project. In return,
they should reciprocate that respect in addressing your issue or assessing
patches and features.
## Reporting issues
## Using the issue tracker
We only accept issues that are bug reports or feature requests. Bugs must be isolated and reproducible problems that we can fix within the Bootstrap core. Please read the following guidelines before opening any issue.
The [issue tracker](https://github.com/twbs/bootstrap/issues) is
the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
and [submitting pull requests](#pull-requests), but please respect the following
restrictions:
1.**Search for existing issues.** We get a lot of duplicate issues, and you'd help us out a lot by first checking if someone else has reported the same issue. Moreover, the issue may have already been resolved with a fix available.
2.**Create an isolated and reproducible test case.** Be sure the problem exists in Bootstrap's code with a [reduced test case](http://css-tricks.com/reduced-test-cases/) that should be included in each bug report.
3.**Include a live example.** Make use of jsFiddle or jsBin to share your isolated test cases.
4.**Share as much information as possible.** Include operating system and version, browser and version, version of Bootstrap, customized or vanilla build, etc. where appropriate. Also include steps to reproduce the bug.
* Please **do not** use the issue tracker for personal support requests. Stack
Overflow ([`twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3) tag) or [IRC](https://github.com/twbs/bootstrap/blob/master/README.md#community) are better places to get help.
* Please **do not** derail or troll issues. Keep the discussion on topic and
respect the opinions of others.
* Please **do not** open issues or pull requests regarding the code in
[`Normalize`](https://github.com/necolas/normalize.css) (open them in
their respective repositories).
## Issues and labels
## Key branches
Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
-`master` is the latest, deployed version.
-`gh-pages` is the hosted docs (not to be used for pull requests).
-`*-wip` is the official work in progress branch for the next release.
-`browser bug` - Issues that are reported to us, but actually are the result of a browser-specific bug. These are diagnosed with reduced test cases and result in a issue opened on that browser's own bug tracker.
-`confirmed` - Issues that have been confirmed with a reduced test case and idenfity a bug in Bootstrap.
-`css` - Issues stemming from our compiled CSS or source Less files.
-`customizer` - Issues with our web-based Customizer.
-`docs` - Issues for improving or updating our documentation.
-`examples` - Issues involving the example templates included in our docs.
-`feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).
-`grunt` - Issues with our included JavaScript-based Gruntfile, which is used to run all our tests, concatenate and compile source files, and more.
-`help wanted` - Issues we need or would love help from the community to resolve.
-`js` - Issues stemming from our compiled or source JavaScript files.
-`meta` - Issues with the project itself or our GitHub repository.
For a complete look at our labels, see the [project labels page](/twbs/bootstrap/labels).
## Bug reports
A bug is a _demonstrable problem_ that is caused by the code in the repository.
Good bug reports are extremely helpful, so thanks!
Guidelines for bug reports:
0.**Validate and lint your code** — [validate your HTML](http://html5.validator.nu)
and [lint your HTML](https://github.com/twbs/bootlint) to ensure your
problem isn't caused by a simple error in your own code.
1.**Use the GitHub issue search** — check if the issue has already been
reported.
2.**Check if the issue has been fixed** — try to reproduce it using the
latest `master` or development branch in the repository.
3.**Isolate the problem** — ideally create a [reduced test
case](http://css-tricks.com/6263-reduced-test-cases/) and a live example.
[This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
A good bug report shouldn't leave others needing to chase you up for more
information. Please try to be as detailed as possible in your report. What is
your environment? What steps will reproduce the issue? What browser(s) and OS
experience the problem? Do other browsers show the bug differently? What
would you expect to be the outcome? All these details will help people to fix
any potential bugs.
Example:
> Short and descriptive example bug report title
>
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
>
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
>
> `<url>` - a link to the reduced test case
>
> Any other information you want to share that is relevant to the issue being
> reported. This might include the lines of code that you have identified as
> causing the bug, and potential solutions (and your opinions on their
> merits).
### Reporting upstream browser bugs
Sometimes bugs reported to us are actually caused by bugs in the browser(s) themselves, not bugs in Bootstrap per se.
When feasible, we aim to report such upstream bugs to the relevant browser vendor(s), and then list them on our [Wall of Browser Bugs](http://getbootstrap.com/browser-bugs/).
| Mozilla | Firefox | Gecko | https://bugzilla.mozilla.org/enter_bug.cgi | "Core" is normally the right product option to choose. |
| Apple | Safari | WebKit | https://bugs.webkit.org/enter_bug.cgi?product=WebKit <br> https://bugreport.apple.com | In Apple's bug reporter, choose "Safari" as the product. |
| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://code.google.com/p/chromium/issues/list | Click the "New issue" button. |
| Microsoft | Internet Explorer | Trident | https://connect.microsoft.com/IE/feedback/LoadSubmitFeedbackForm | |
### Issues bots
[@twbs-lmvtfy](https://github.com/twbs-lmvtfy) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks for HTML validation errors in live examples (e.g. jsFiddles, JS Bins, Bootplys, Plunks, CodePens, etc.) posted in issue comments. If it finds any errors, it will post a follow-up comment on the issue and point out the errors. If this happens with an example you've posted, please fix the errors and post an updated live example. If you opened a bug report, please check whether the bug still occurs with your revised, valid live example. If the bug no longer occurs, it was probably due to your invalid HTML rather than something in Bootstrap and we'd appreciate it if you could close out the GitHub issue.
## Feature requests
Feature requests are welcome. But take a moment to find out whether your idea
fits with the scope and aims of the project. It's up to *you* to make a strong
case to convince the project's developers of the merits of this feature. Please
provide as much detail and context as possible.
## Pull requests
- Try to submit pull requests against the latest `*-wip` branch for easier merging
- CSS changes must be done in .less files first, never just the compiled files
- If modifying the .less files, always recompile and commit the compiled files bootstrap.css and bootstrap.min.css
- Try not to pollute your pull request with unintended changes--keep them simple and small
- Try to share which browsers your code has been tested in before submitting a pull request
Good pull requests—patches, improvements, new features—are a fantastic
help. They should remain focused in scope and avoid containing unrelated
commits.
**Please ask first** before embarking on any significant pull request (e.g.
implementing features, refactoring code, porting to a different language),
otherwise you risk spending a lot of time working on something that the
project's developers might not want to merge into the project.
Please adhere to the [coding guidelines](#code-guidelines) used throughout the
project (indentation, accurate comments, etc.) and any other requirements
(such as test coverage).
**Do not edit `bootstrap.css`, `bootstrap-theme.css`, or `bootstrap.js`
directly!** Those files are automatically generated. You should edit the
source files in [`/bootstrap/less/`](https://github.com/twbs/bootstrap/tree/master/less)
feature to tidy up your commits before making them public.
5. Locally merge (or rebase) the upstream development branch into your topic branch:
```bash
git pull [--rebase] upstream master
```
6. Push your topic branch up to your fork:
```bash
git push origin <topic-branch-name>
```
7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
with a clear title and description against the `master` branch.
**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
license your work under the terms of the [MIT License](LICENSE.md).
### Pull request checker bot: Rorschach
[@twbs-rorschach](https://github.com/twbs-rorschach) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks all pull requests for a few simple common mistakes. It's possible that Rorschach might leave a comment on your pull request and then close it. If that happens, simply fix the problem(s) mentioned in the comment (there should be link(s) in the comment explaining the problem(s) in detail) and then either:
* Push the revised version to your pull request's branch and post a comment on the pull request saying that you've fixed the problem(s). One of the Bootstrap Core Team members will then come along and reopen your pull request.
* Or you can just open a new pull request for your revised version.
## Coding standards
## Code guidelines
### HTML
- Two spaces for indentation, never tabs
- Double quotes only, never single quotes
- Always use proper indentation
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags)
[Adhere to the Code Guide.](http://codeguide.co/#html)
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
### CSS
-Adhere to the [Recess CSS property order](http://markdotto.com/2011/11/29/css-property-order/)
- Multiple-line approach (one property and value per line)
- Always a space after a property's colon (.e.g, `display: block;` and not `display:block;`)
- End all lines with a semi-colon
- For multiple, comma-separated selectors, place each selector on its own line
- Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
[Adhere to the Code Guide.](http://codeguide.co/#css)
- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines/) for more details.
### JS
- No semicolons
- Comma first
- No semicolons (in client-side JS)
- 2 spaces (no tabs)
- strict mode
- "Attractive"
### Checking coding style
Run `grunt test` before committing to ensure your changes follow our coding standards.
## License
By contributing your code, you agree to license your contribution under the terms of the APLv2: https://github.com/twbs/bootstrap/blob/master/LICENSE
By contributing your code, you agree to license your contribution under the [MIT license](https://github.com/twbs/bootstrap/blob/master/LICENSE).
Prior to v3.1.0, Bootstrap was released under the Apache License v2.0.
[](https://saucelabs.com/u/bootstrap)
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat).
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thornton](https://twitter.com/fat), and maintained by the [core team](https://github.com/twbs?tab=members) with the massive support and involvement of the community.
To get started, check out [http://getbootstrap.com](http://getbootstrap.com)!
To get started, check out <http://getbootstrap.com>!
## Table of contents
- [Quick start](#quick-start)
- [Bugs and feature requests](#bugs-and-feature-requests)
- [Documentation](#documentation)
- [Contributing](#contributing)
- [Community](#community)
- [Versioning](#versioning)
- [Creators](#creators)
- [Copyright and license](#copyright-and-license)
## Quick start
Three quick start options are available:
Four quick start options are available:
* [Download the latest release](https://github.com/twbs/bootstrap/zipball/3.0.0-wip).
* Clone the repo: `git clone git://github.com/twbs/bootstrap.git`.
* Install with [Bower](http://bower.io): `bower install bootstrap`.
- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.3.1.zip).
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
- Install with [Bower](http://bower.io): `bower install bootstrap`.
- Install with [npm](https://www.npmjs.org): `npm install bootstrap`.
Read the [Getting Started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.
Read the [Getting started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.
### What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
```
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
```
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). Fonts from Glyphicons are included, as is the optional Bootstrap theme.
## Bugs and feature requests
Have a bug or a feature request? [Please open a new issue](https://github.com/twbs/bootstrap/issues). Before opening any issue, please search for existing issues and read the [Issue Guidelines](https://github.com/necolas/issue-guidelines), written by [Nicolas Gallagher](https://github.com/necolas/).
You may use [this JS Bin](http://jsbin.com/aKiCIDO/1/edit) as a template for your bug reports.
Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
## Documentation
Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at [http://getbootstrap.com](http://getbootstrap.com). The docs may also be run locally.
Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://getbootstrap.com>. The docs may also be run locally.
### Running documentation locally
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v1.x).
2. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
- **Windows users:** run `chcp 65001` first to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors.
3.Open [http://localhost:9001](http://localhost:9001) in your browser, and voilà.
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v2.5.x).
- **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
2. Install the Ruby-based syntax highlighter, [Rouge](https://github.com/jneen/rouge), with `gem install rouge`.
3.From the root `/bootstrap` directory, run `jekyll serve` in the command line.
4. Open <http://localhost:9001> in your browser, and voilà.
Learn more about using Jekyll by reading their [documentation](http://jekyllrb.com/docs/home/).
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
### Documentation for previous releases
Documentation for v2.3.2 has been made available for the time being at [http://getbootstrap.com/2.3.2/](http://getbootstrap.com/2.3.2/) while folks transition to Bootstrap 3.
Documentation for v2.3.2 has been made available for the time being at <http://getbootstrap.com/2.3.2/> while folks transition to Bootstrap 3.
[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
## Compiling CSS and JavaScript
Bootstrap uses [Grunt](http://gruntjs.com/) with convenient methods for working with the framework. It's how we compile our code, run tests, and more. To use it, install the required dependencies as directed and then run some Grunt commands.
### Install Grunt
From the command line:
1. Install `grunt-cli` globally with `npm install -g grunt-cli`.
2. Install the [necessary local dependencies](package.json) via `npm install`
When completed, you'll be able to run the various Grunt commands provided from the command line.
**Unfamiliar with `npm`? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.org/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding.
### Available Grunt commands
#### Build - `grunt`
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
#### Only compile CSS and JavaScript - `grunt dist`
`grunt dist` creates the `/dist` directory with compiled files. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
#### Tests - `grunt test`
Runs jshint and qunit tests headlessly in [phantomjs](https://github.com/ariya/phantomjs/) (used for CI). **Requires [phantomjs](https://github.com/ariya/phantomjs/).**
#### Watch - `grunt watch`
This is a convenience method for watching just Less files and automatically building them whenever you save.
### Troubleshooting dependencies
Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
## Contributing
Please read through our guidelines for contributing to Bootstrap. Included are directions for opening issues, coding standards, and notes on development.
Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo).
Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).
Editor preferences are available in the [editor config](.editorconfig) for easy use in common text editors. Read more and download plugins at [http://editorconfig.org](http://editorconfig.org).
Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
@@ -96,46 +97,33 @@ Editor preferences are available in the [editor config](.editorconfig) for easy
Keep track of development and community news.
* Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
* Read and subscribe to the [The Official Bootstrap Blog](http://blog.getbootstrap.com).
* Have a question that's not a feature request or bug report? [Ask on the mailing list.](http://groups.google.com/group/twitter-bootstrap)
* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
- Follow [@twbootstrap on Twitter](https://twitter.com/twbootstrap).
- Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
- Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3)).
## Versioning
For transparency and insight into our release cycle, and for striving to maintain backward compatibility, Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible.
Releases will be numbered with the following format:
`<major>.<minor>.<patch>`
And constructed with the following guidelines:
* Breaking backward compatibility bumps the major (and resets the minor and patch)
* New additions without breaking backward compatibility bumps the minor (and resets the patch)
* Bug fixes and misc changes bumps the patch
For more information on SemVer, please visit [http://semver.org/](http://semver.org/).
For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
Copyright 2012 Twitter, Inc under [the Apache 2.0 license](LICENSE).
Code and documentation copyright 2011-2014 Twitter, Inc. Code released under [the MIT license](LICENSE). Docs released under [Creative Commons](docs/LICENSE).
<p>Designed and built with all the love in the world by <ahref="http://twitter.com/mdo"target="_blank">@mdo</a> and <ahref="http://twitter.com/fat"target="_blank">@fat</a>.</p>
<p>Code licensed under <ahref="http://www.apache.org/licenses/LICENSE-2.0"target="_blank">Apache License v2.0</a>, documentation under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
window.onload=function(){// wait for load in a dumb way because B-0
varcw='/*!\n * Bootstrap v3.0.0\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world @twitter by @mdo and @fat.\n */\n\n'
"undefined"==typeofc.createDocumentFragment||"undefined"==typeofc.createElement}g=b}catch(d){g=j=!0}})();vare={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)returna.createDocumentFragment();
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
<pclass="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
<h2id="alerts-examples">Examples</h2>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
<divclass="bs-callout bs-callout-info">
<h4>No default class</h4>
<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
</div>
<divclass="bs-example">
<divclass="alert alert-success"role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<divclass="alert alert-info"role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<divclass="alert alert-warning"role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<divclass="alert alert-danger"role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
<pclass="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <ahref="../javascript/#buttons">our buttons plugin</a>.</p>
<divclass="bs-callout bs-callout-warning">
<h4>Tooltips & popovers in button groups require special setting</h4>
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Ensure correct <code>role</code> and provide a label</h4>
<p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
<p>One exception are groups which only contain a single control (for instance the <ahref="#btn-groups-justified">justified button groups</a> with <code><button></code> elements) or a dropdown.</p>
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
</div>
<h3id="btn-groups-single">Basic example</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strongclass="text-danger">Split button dropdowns are not supported here.</strong></p>
<p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
<divclass="bs-callout bs-callout-warning">
<h4>Handling borders</h4>
<p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>IE8 and borders</h4>
<p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code><a></code> or <code><button></code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
<p>See <ahref="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
</div>
<h4>With <code><a></code> elements</h4>
<p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
<p>To use justified button groups with <code><button></code> elements, <strongclass="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can work around that.</p>
<pclass="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <ahref="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
<h3id="dropdowns-example">Example</h3>
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
<divclass="bs-callout bs-callout-warning">
<h4>May require additional positioning</h4>
<p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p>
<p>As of v3.1.0, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
<p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <ahref="http://glyphicons.com/">Glyphicons</a> 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 <ahref="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
<p>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.</p>
<divclass="bs-callout bs-callout-danger">
<h4>Don't mix with other components</h4>
<p>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 <code><span></code> and apply the icon classes to the <code><span></code>.</p>
</div>
<divclass="bs-callout bs-callout-danger">
<h4>Only for use on empty elements</h4>
<p>Icon classes should only be used on elements that contain no text content and have no child elements.</p>
</div>
<divclass="bs-callout bs-callout-info">
<h4>Changing the icon font location</h4>
<p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p>
<ul>
<li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li>
<li>Utilize the <ahref="http://lesscss.org/usage/#command-line-usage-relative-urls">relative URLs option</a> provided by the Less compiler.</li>
<li>Change the <code>url()</code> paths in the compiled CSS.</li>
</ul>
<p>Use whatever option best suits your specific development setup.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Accessible icons</h4>
<p>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 <code>aria-hidden="true"</code> attribute.</p>
<p>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 <code>.sr-only</code> class.</p>
<p>If you're creating controls with no other text (such as a <code><button></code> 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 <code>aria-label</code> attribute on the control itself.</p>
<spanclass="glyphicon glyphicon-star"aria-hidden="true"></span> Star
</button>
{% endhighlight %}
<p>An icon used in an <ahref="#alerts">alert</a> to convey that it's an error message, with additional <code>.sr-only</code> text to convey this hint to users of assistive technologies.</p>
<pclass="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code><input></code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a single <code>.form-control</code>.</p>
<divclass="bs-callout bs-callout-danger">
<h4>Textual <code><input></code>s only</h4>
<p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p>
<p>Avoid using <code><textarea></code> elements here as their <code>rows</code> attribute will not be respected in some cases.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Tooltips & popovers in input groups require special setting</h4>
<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Don't mix with other components</h4>
<p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
</div>
<h2id="input-groups-basic">Basic example</h2>
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
<p><strongclass="text-danger">We do not support multiple add-ons on a single side.</strong></p>
<p><strongclass="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
<h2id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
<p>Place any checkbox or radio option within an input group's addon instead of text.</p>
<formclass="bs-example bs-example-form">
<divclass="row">
<divclass="col-lg-6">
<divclass="input-group">
<spanclass="input-group-addon">
<inputtype="checkbox">
</span>
<inputtype="text"class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<divclass="col-lg-6">
<divclass="input-group">
<spanclass="input-group-addon">
<inputtype="radio">
</span>
<inputtype="text"class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
{% highlight html %}
<divclass="row">
<divclass="col-lg-6">
<divclass="input-group">
<spanclass="input-group-addon">
<inputtype="checkbox">
</span>
<inputtype="text"class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<divclass="col-lg-6">
<divclass="input-group">
<spanclass="input-group-addon">
<inputtype="radio">
</span>
<inputtype="text"class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
{% endhighlight %}
<h2id="input-groups-buttons">Button addons</h2>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<p>To make the jumbotron full width, and without rounded corners, place it outside all <code>.container</code>s and instead add a <code>.container</code> within.</p>
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
<divclass="bs-example">
<spanclass="label label-default">Default</span>
<spanclass="label label-primary">Primary</span>
<spanclass="label label-success">Success</span>
<spanclass="label label-info">Info</span>
<spanclass="label label-warning">Warning</span>
<spanclass="label label-danger">Danger</span>
</div>
{% highlight html %}
<spanclass="label label-default">Default</span>
<spanclass="label label-primary">Primary</span>
<spanclass="label label-success">Success</span>
<spanclass="label label-info">Info</span>
<spanclass="label label-warning">Warning</span>
<spanclass="label label-danger">Danger</span>
{% endhighlight %}
<divclass="bs-callout bs-callout-info">
<h4>Have tons of labels?</h4>
<p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <ahref="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
<pclass="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
<h3id="list-group-basic">Basic example</h3>
<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
<divclass="bs-example">
<ulclass="list-group">
<liclass="list-group-item">Cras justo odio</li>
<liclass="list-group-item">Dapibus ac facilisis in</li>
<liclass="list-group-item">Morbi leo risus</li>
<liclass="list-group-item">Porta ac consectetur ac</li>
<liclass="list-group-item">Vestibulum at eros</li>
</ul>
</div>
{% highlight html %}
<ulclass="list-group">
<liclass="list-group-item">Cras justo odio</li>
<liclass="list-group-item">Dapibus ac facilisis in</li>
<liclass="list-group-item">Morbi leo risus</li>
<liclass="list-group-item">Porta ac consectetur ac</li>
<liclass="list-group-item">Vestibulum at eros</li>
</ul>
{% endhighlight %}
<h3id="list-group-badges">Badges</h3>
<p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
<divclass="bs-example">
<ulclass="list-group">
<liclass="list-group-item">
<spanclass="badge">14</span>
Cras justo odio
</li>
<liclass="list-group-item">
<spanclass="badge">2</span>
Dapibus ac facilisis in
</li>
<liclass="list-group-item">
<spanclass="badge">1</span>
Morbi leo risus
</li>
</ul>
</div>
{% highlight html %}
<ulclass="list-group">
<liclass="list-group-item">
<spanclass="badge">14</span>
Cras justo odio
</li>
</ul>
{% endhighlight %}
<h3id="list-group-linked">Linked items</h3>
<p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code><div></code> instead of an <code><ul></code>). No need for individual parents around each element.</p>
<divclass="bs-example">
<divclass="list-group">
<ahref="#"class="list-group-item active">
Cras justo odio
</a>
<ahref="#"class="list-group-item">Dapibus ac facilisis in</a>
<ahref="#"class="list-group-item">Morbi leo risus</a>
<ahref="#"class="list-group-item">Porta ac consectetur ac</a>
<ahref="#"class="list-group-item">Vestibulum at eros</a>
</div>
</div>
{% highlight html %}
<divclass="list-group">
<ahref="#"class="list-group-item active">
Cras justo odio
</a>
<ahref="#"class="list-group-item">Dapibus ac facilisis in</a>
<ahref="#"class="list-group-item">Morbi leo risus</a>
<ahref="#"class="list-group-item">Porta ac consectetur ac</a>
<ahref="#"class="list-group-item">Vestibulum at eros</a>
</div>
{% endhighlight %}
<h3id="list-group-disabled">Disabled items</h3>
<p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p>
<divclass="bs-example">
<divclass="list-group">
<ahref="#"class="list-group-item disabled">
Cras justo odio
</a>
<ahref="#"class="list-group-item">Dapibus ac facilisis in</a>
<ahref="#"class="list-group-item">Morbi leo risus</a>
<ahref="#"class="list-group-item">Porta ac consectetur ac</a>
<ahref="#"class="list-group-item">Vestibulum at eros</a>
</div>
</div>
{% highlight html %}
<divclass="list-group">
<ahref="#"class="list-group-item disabled">
Cras justo odio
</a>
<ahref="#"class="list-group-item">Dapibus ac facilisis in</a>
<ahref="#"class="list-group-item">Morbi leo risus</a>
<ahref="#"class="list-group-item">Porta ac consectetur ac</a>
<ahref="#"class="list-group-item">Vestibulum at eros</a>
<pclass="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
<h3id="media-default">Default media</h3>
<p>The default media displays a media object (images, video, audio) to the left or right of a content block.</p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<h4class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
<divclass="media">
<divclass="media-body">
<h4class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<p>The classes <code>.pull-left</code> and <code>.pull-right</code> also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to <code>.media-left</code> and <code>.media-right</code>, except that <code>.media-right</code> should be placed after the <code>.media-body</code> in the html.</p>
<h3id="media-alignment">Media alignment</h3>
<p>The images or other media can be aligned top, middle, or bottom. The default is top aligned.</p>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
<h4class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<h4class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<h4class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
<p><strongclass="text-danger">Justified navbar nav links are currently not supported.</strong></p>
<p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
<oltype="a">
<li>Reduce the amount or width of navbar items.</li>
<li>Hide certain navbar items at certain screen sizes using <ahref="../css/#responsive-utilities">responsive utility classes</a>.</li>
<li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
</ol>
</div>
<divclass="bs-callout bs-callout-danger">
<h4>Requires JavaScript plugin</h4>
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
<p>The responsive navbar requires the <ahref="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div>
<divclass="bs-callout bs-callout-info">
<h4>Changing the collapsed mobile navbar breakpoint</h4>
<p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Make navbars accessible</h4>
<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
<p>Replace the navbar brand with your own image by swapping the text for an <code><img></code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strongclass="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
<p>There are some caveats regarding using form controls within fixed elements on mobile devices. <ahref="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p>
</div>
<h2id="navbar-buttons">Buttons</h2>
<p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
<p>Like the standard <ahref="../css/#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code><a></code> and <code><input></code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code><a></code> elements within <code>.navbar-nav</code>.</p>
</div>
<h2id="navbar-text">Text</h2>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code><ul></code> with the respective utility class applied.</p>
<p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>
<divclass="bs-callout bs-callout-warning">
<h4>Right aligning multiple components</h4>
<p>Navbars currently have a limitation with multiple <code>.navbar-right</code> classes. To properly space content, we use negative margin on the last <code>.navbar-right</code> element. When there are multiple elements using that class, these margins don't work as intended.</p>
<p>We'll revisit this when we can rewrite that component in v4.</p>
</div>
<h2id="navbar-fixed-top">Fixed to top</h2>
<p>Add <code>.navbar-fixed-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight scss %}
body { padding-top: 70px; }
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>
<h2id="navbar-fixed-bottom">Fixed to bottom</h2>
<p>Add <code>.navbar-fixed-bottom</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight scss %}
body { padding-bottom: 70px; }
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>
<h2id="navbar-static-top">Static top</h2>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<pclass="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
<divclass="bs-callout bs-callout-info">
<h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
<p>For tabs with tabbable areas, you must use the <ahref="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <ahref="../javascript/#tabs-usage">example markup</a> for further details.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Make navs used as navigation accessible</h4>
<p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code><ul></code>, or wrap a <code><nav></code> element around the whole navigation. Do not add the role to the <code><ul></code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
</div>
<h2id="nav-tabs">Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
<p><strongclass="text-danger">Justified navbar nav links are currently not supported.</strong></p>
<divclass="bs-callout bs-callout-warning">
<h4>Safari and responsive justified navs</h4>
<p>As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <ahref="../examples/justified-nav/">justified nav example</a>.</p>
<p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element, as well as most other components (with additional styles).</p>
<divclass="bs-example">
<divclass="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
</div>
{% highlight html %}
<divclass="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
<pclass="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <ahref="#pagination-pager">pager alternative</a>.</p>
<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<p>You can optionally swap out active or disabled anchors for <code><span></code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
<p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
<h3>Default example</h3>
<p>By default, the pager centers links.</p>
<divclass="bs-example">
<nav>
<ulclass="pager">
<li><ahref="#">Previous</a></li>
<li><ahref="#">Next</a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ulclass="pager">
<li><ahref="#">Previous</a></li>
<li><ahref="#">Next</a></li>
</ul>
</nav>
{% endhighlight %}
<h3>Aligned links</h3>
<p>Alternatively, you can align each link to the sides:</p>
<pclass="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
<h3id="panels-basic">Basic example</h3>
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<divclass="bs-example">
<divclass="panel panel-default">
<divclass="panel-body">
Basic panel example
</div>
</div>
</div>
{% highlight html %}
<divclass="panel panel-default">
<divclass="panel-body">
Basic panel example
</div>
</div>
{% endhighlight %}
<h3id="panels-heading">Panel with heading</h3>
<p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code><h1></code>-<code><h6></code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
<p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
<divclass="bs-example">
<divclass="panel panel-default">
<divclass="panel-heading">Panel heading without title</div>
<divclass="panel-body">
Panel content
</div>
</div>
<divclass="panel panel-default">
<divclass="panel-heading">
<h3class="panel-title">Panel title</h3>
</div>
<divclass="panel-body">
Panel content
</div>
</div>
</div>
{% highlight html %}
<divclass="panel panel-default">
<divclass="panel-heading">Panel heading without title</div>
<divclass="panel-body">
Panel content
</div>
</div>
<divclass="panel panel-default">
<divclass="panel-heading">
<h3class="panel-title">Panel title</h3>
</div>
<divclass="panel-body">
Panel content
</div>
</div>
{% endhighlight %}
<h3id="panels-footer">Panel with footer</h3>
<p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
<p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
<divclass="bs-example">
<divclass="panel panel-primary">
<divclass="panel-heading">
<h3class="panel-title">Panel title</h3>
</div>
<divclass="panel-body">
Panel content
</div>
</div>
<divclass="panel panel-success">
<divclass="panel-heading">
<h3class="panel-title">Panel title</h3>
</div>
<divclass="panel-body">
Panel content
</div>
</div>
<divclass="panel panel-info">
<divclass="panel-heading">
<h3class="panel-title">Panel title</h3>
</div>
<divclass="panel-body">
Panel content
</div>
</div>
<divclass="panel panel-warning">
<divclass="panel-heading">
<h3class="panel-title">Panel title</h3>
</div>
<divclass="panel-body">
Panel content
</div>
</div>
<divclass="panel panel-danger">
<divclass="panel-heading">
<h3class="panel-title">Panel title</h3>
</div>
<divclass="panel-body">
Panel content
</div>
</div>
</div>
{% highlight html %}
<divclass="panel panel-primary">...</div>
<divclass="panel panel-success">...</div>
<divclass="panel panel-info">...</div>
<divclass="panel panel-warning">...</div>
<divclass="panel panel-danger">...</div>
{% endhighlight %}
<h3id="panels-tables">With tables</h3>
<p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>
<divclass="bs-example">
<divclass="panel panel-default">
<!-- Default panel contents -->
<divclass="panel-heading">Panel heading</div>
<divclass="panel-body">
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<!-- Table -->
<tableclass="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
{% highlight html %}
<divclass="panel panel-default">
<!-- Default panel contents -->
<divclass="panel-heading">Panel heading</div>
<divclass="panel-body">
<p>...</p>
</div>
<!-- Table -->
<tableclass="table">
...
</table>
</div>
{% endhighlight %}
<p>If there is no panel body, the component moves from panel header to table without interruption.</p>
<divclass="bs-example">
<divclass="panel panel-default">
<!-- Default panel contents -->
<divclass="panel-heading">Panel heading</div>
<!-- Table -->
<tableclass="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
{% highlight html %}
<divclass="panel panel-default">
<!-- Default panel contents -->
<divclass="panel-heading">Panel heading</div>
<!-- Table -->
<tableclass="table">
...
</table>
</div>
{% endhighlight %}
<h3id="panels-list-group">With list groups</h3>
<p>Easily include full-width <ahref="#list-group">list groups</a> within any panel.</p>
<divclass="bs-example">
<divclass="panel panel-default">
<!-- Default panel contents -->
<divclass="panel-heading">Panel heading</div>
<divclass="panel-body">
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<!-- List group -->
<ulclass="list-group">
<liclass="list-group-item">Cras justo odio</li>
<liclass="list-group-item">Dapibus ac facilisis in</li>
<liclass="list-group-item">Morbi leo risus</li>
<liclass="list-group-item">Porta ac consectetur ac</li>
<liclass="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
{% highlight html %}
<divclass="panel panel-default">
<!-- Default panel contents -->
<divclass="panel-heading">Panel heading</div>
<divclass="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ulclass="list-group">
<liclass="list-group-item">Cras justo odio</li>
<liclass="list-group-item">Dapibus ac facilisis in</li>
<liclass="list-group-item">Morbi leo risus</li>
<liclass="list-group-item">Porta ac consectetur ac</li>
<liclass="list-group-item">Vestibulum at eros</li>
<pclass="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
<divclass="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
<p>Remove the <code>.sr-only</code> class from within the progress bar to show a visible percentage. For low percentages, consider adding a <code>min-width</code> to ensure the label's text is fully visible.</p>
<p>Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.</p>
<p>Rules are directly applied to <code><iframe></code>, <code><embed></code>, <code><video></code>, and <code><object></code> elements; optionally use an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
<p><strong>Pro-Tip!</strong> You don't need to include <code>frameborder="0"</code> in your <code><iframe></code>s as we override that for you.</p>
<pclass="lead">Extend Bootstrap's <ahref="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
<h3id="thumbnails-default">Default example</h3>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<h4>Conveying meaning to assistive technologies</h4>
<p>Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
</div>
<h2id="buttons-sizes">Sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the active state programmatically.</p>
<h3>Button element</h3>
<p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
<p>If you add the <code>disabled</code> attribute to a <code><button></code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
</div>
<h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code><a></code> buttons.</p>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
</p>
<divclass="bs-callout bs-callout-warning">
<h4>Link functionality caveat</h4>
<p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Context-specific usage</h4>
<p>While button classes can be used on <code><a></code> and <code><button></code> elements, only <code><button></code> elements are supported within our nav and navbar components.</p>
</div>
<h2id="buttons-tags">Button tags</h2>
<p>Use the button classes on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Cross-browser rendering</h4>
<p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
<p>Among other things, there's <ahref="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox <30</a> that prevents us from setting the <code>line-height</code> of <code><input></code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
<p>Individual form controls automatically receive some global styling. All textual <code><input></code>, <code><textarea></code>, and <code><select></code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
<p>Do not mix form groups directly with <ahref="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
</div>
<h2id="forms-inline">Inline form</h2>
<p>Add <code>.form-inline</code> to your <code><form></code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
<divclass="bs-callout bs-callout-danger">
<h4>Requires custom widths</h4>
<p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
<p>Examples of standard form controls supported in an example form layout.</p>
<h3>Inputs</h3>
<p>Most common form control, text-based input fields. Includes support for all HTML5 types: <code>text</code>, <code>password</code>, <code>datetime</code>, <code>datetime-local</code>, <code>date</code>, <code>month</code>, <code>time</code>, <code>week</code>, <code>number</code>, <code>email</code>, <code>url</code>, <code>search</code>, <code>tel</code>, and <code>color</code>.</p>
<divclass="bs-callout bs-callout-danger">
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
<p>To add integrated text or buttons before and/or after any text-based <code><input></code>, <ahref="../components/#input-groups">check out the input group component</a>.</p>
</div>
<h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<p>Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
<p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code><label></code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code><fieldset></code>.</p>
<h4>Default (stacked)</h4>
<divclass="bs-example">
<formrole="form">
<divclass="checkbox">
<label>
<inputtype="checkbox"value="">
Option one is this and that—be sure to include why it's great
<p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of checkboxes or radios for controls that appear on the same line.</p>
<p>Should you have no text within the <code><label></code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong> Remember to still provide some form of label for assistive technologies (for instance, using <code>aria-label</code>).</p>
<divclass="bs-example">
<formrole="form">
<divclass="checkbox">
<label>
<inputtype="checkbox"id="blankCheckbox"value="option1"aria-label="Checkbox without label text">
</label>
</div>
<divclass="radio">
<label>
<inputtype="radio"name="blankRadio"id="blankRadio1"value="option1"aria-label="Radio button without label text">
<p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
<divclass="bs-example">
<formrole="form">
<selectclass="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<selectmultipleclass="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<selectclass="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<selectmultipleclass="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
{% endhighlight %}
<h2id="forms-controls-static">Static control</h2>
<p>When you need to place plain text next to a form label within a form, use the <code>.form-control-static</code> class on a <code><p></code>.</p>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once.</p>
<divclass="bs-callout bs-callout-warning">
<h4>Caveat about link functionality of <code><a></code></h4>
<p>Our styles use <code>pointer-events: none</code> to try to disable the link functionality of <code><a class="btn btn-*"></code> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.</p>
</div>
<divclass="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the <code>disabled</code> attribute on a <code><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
<divclass="bs-callout bs-callout-warning">
<h4>Conveying validation state to assistive technologies</h4>
<p>Using these validation styles to denote the state of a form control only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.</p>
<p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code><label></code> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using <code>aria-describedby</code> (see the example in the following section). In the case of an error, you could also use the <code>aria-invalid="true"</code> attribute on the form control.</p>
</div>
<divclass="bs-example">
<formrole="form">
<divclass="form-group has-success">
<labelclass="control-label"for="inputSuccess1">Input with success</label>
<p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p>
<p><strongclass="text-danger">Feedback icons only work with textual <code><input class="form-control"></code> elements.</strong></p>
<divclass="bs-callout bs-callout-warning">
<h4>Icons, labels, and input groups</h4>
<p>Manual positioning of feedback icons is required for inputs without a label and for <ahref="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>.sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Conveying the icon's meaning to assistive technologies</h4>
<p>To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the <code>.sr-only</code> class and explicitly associated with the form control it relates to using <code>aria-describedby</code>. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <code><label></code> associated with the form control.</p>
<p>Although the following examples already mention the validation state of their respective form controls in the <code><label></code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
</div>
<divclass="bs-example">
<formrole="form">
<divclass="form-group has-success has-feedback">
<labelclass="control-label"for="inputSuccess2">Input with success</label>
<h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
<p>For form controls with no visible label, add the <code>.sr-only</code> class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.</p>
<p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p>
<p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
</div>
<divclass="bs-example">
<formrole="form">
<divclass="form-group">
<labelfor="inputHelpBlock">Input with help text</label>
<pclass="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <ahref="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <ahref="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h3id="grid-intro">Introduction</h3>
<p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p>
<ul>
<li>Rows must be placed within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width) for proper alignment and padding.</li>
<li>Use rows to create horizontal groups of columns.</li>
<li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
<li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.</li>
<li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li>
<li>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.</li>
<li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
<li>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</li>
<li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</li>
</ul>
<p>Look to the examples for applying these principles to your code.</p>
<h3id="grid-media-queries">Media queries</h3>
<p>We use the following media queries in our Less files to create the key breakpoints in our grid system.</p>
{% highlight scss %}
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
{% endhighlight %}
<p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
{% highlight scss %}
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
{% endhighlight %}
<h3id="grid-options">Grid options</h3>
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
<divclass="table-responsive">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>
Extra small devices
<small>Phones (<768px)</small>
</th>
<th>
Small devices
<small>Tablets (≥768px)</small>
</th>
<th>
Medium devices
<small>Desktops (≥992px)</small>
</th>
<th>
Large devices
<small>Desktops (≥1200px)</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<thclass="text-nowrap">Grid behavior</th>
<td>Horizontal at all times</td>
<tdcolspan="3">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<thclass="text-nowrap">Container width</th>
<td>None (auto)</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr>
<thclass="text-nowrap">Class prefix</th>
<td><code>.col-xs-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
</tr>
<tr>
<thclass="text-nowrap"># of columns</th>
<tdcolspan="4">12</td>
</tr>
<tr>
<thclass="text-nowrap">Column width</th>
<tdclass="text-muted">Auto</td>
<td>~62px</td>
<td>~81px</td>
<td>~97px</td>
</tr>
<tr>
<thclass="text-nowrap">Gutter width</th>
<tdcolspan="4">30px (15px on each side of a column)</td>
<p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p>
<p>Turn any fixed-width grid layout into a full-width layout by changing your outermost <code>.container</code> to <code>.container-fluid</code>.</p>
{% highlight html %}
<divclass="container-fluid">
<divclass="row">
...
</div>
</div>
{% endhighlight %}
<h3id="grid-example-mixed">Example: Mobile and desktop</h3>
<p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code><code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
<p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <ahref="#responsive-utilities">responsive utility classes</a>.</p>
<divclass="bs-docs-grid">
<divclass="row show-grid">
<divclass="col-xs-6 col-sm-3">
.col-xs-6 .col-sm-3
<br>
Resize your viewport or check it out on your phone for an example.
<p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. See this in action in <ahref="../examples/grid/">the grid example</a>.</p>
<p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p>
<divclass="row show-grid">
<divclass="col-sm-9">
Level 1: .col-sm-9
<divclass="row show-grid">
<divclass="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<divclass="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
{% highlight html %}
<divclass="row">
<divclass="col-sm-9">
Level 1: .col-sm-9
<divclass="row">
<divclass="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<divclass="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
{% endhighlight %}
<h3id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
<p>In addition to <ahref="#grid-example-basic">prebuilt grid classes</a> for fast layouts, Bootstrap includes Less variables and mixins for quickly generating your own simple, semantic layouts.</p>
<h4>Variables</h4>
<p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
{% highlight scss %}
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
{% endhighlight %}
<h4>Mixins</h4>
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
{% highlight scss %}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
<p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
<divclass="bs-example">
<pclass="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<pclass="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<pclass="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<pclass="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<pclass="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<pclass="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
{% highlight html %}
<pclass="text-muted">...</p>
<pclass="text-primary">...</p>
<pclass="text-success">...</p>
<pclass="text-info">...</p>
<pclass="text-warning">...</p>
<pclass="text-danger">...</p>
{% endhighlight %}
<divclass="bs-callout bs-callout-info">
<h4>Dealing with specificity</h4>
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Conveying meaning to assistive technologies</h4>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>
<divclass="bs-example bs-example-bg-classes">
<pclass="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<pclass="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<pclass="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<pclass="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<pclass="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
{% highlight html %}
<pclass="bg-primary">...</p>
<pclass="bg-success">...</p>
<pclass="bg-info">...</p>
<pclass="bg-warning">...</p>
<pclass="bg-danger">...</p>
{% endhighlight %}
<divclass="bs-callout bs-callout-info">
<h4>Dealing with specificity</h4>
<p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code><div></code> with the class.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Conveying meaning to assistive technologies</h4>
<p>As with <ahref="#helper-classes-colors">contextual colors</a>, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.</p>
</div>
<h3id="helper-classes-close">Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <ahref="../components/#btn-dropdowns-dropup">dropup menus</a>.</p>
<divclass="bs-example">
<spanclass="caret"></span>
</div>
{% highlight html %}
<spanclass="caret"></span>
{% endhighlight %}
<h3id="helper-classes-floats">Quick floats</h3>
<p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</p>
{% highlight html %}
<divclass="pull-left">...</div>
<divclass="pull-right">...</div>
{% endhighlight %}
{% highlight scss %}
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
{% endhighlight %}
<divclass="bs-callout bs-callout-warning">
<h4>Not for use in navbars</h4>
<p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <ahref="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
<p>Set an element to <code>display: block</code> and center via <code>margin</code>. Available as a mixin and class.</p>
{% highlight html %}
<divclass="center-block">...</div>
{% endhighlight %}
{% highlight scss %}
// Classes
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as mixins
.element {
.center-block();
}
{% endhighlight %}
<h3id="helper-classes-clearfix">Clearfix</h3>
<p>Easily clear <code>float</code>s by adding <code>.clearfix</code><strong>to the parent element</strong>. Utilizes <ahref="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
{% highlight html %}
<!-- Usage as a class -->
<divclass="clearfix">...</div>
{% endhighlight %}
{% highlight scss %}
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a Mixin
.element {
.clearfix();
}
{% endhighlight %}
<h3id="helper-classes-show-hide">Showing and hiding content</h3>
<p>Force an element to be shown or hidden (<strong>including for screen readers</strong>) with the use of <code>.show</code> and <code>.hidden</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <ahref="#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p>
<p><code>.hide</code> is available, but it does not always affect screen readers and is <strong>deprecated</strong> as of v3.0.1. Use <code>.hidden</code> or <code>.sr-only</code> instead.</p>
<p>Furthermore, <code>.invisible</code> can be used to toggle only the visibility of an element, meaning its <code>display</code> is not modified and the element can still affect the flow of the document.</p>
{% highlight html %}
<divclass="show">...</div>
<divclass="hidden">...</div>
{% endhighlight %}
{% highlight scss %}
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
{% endhighlight %}
<h3id="helper-classes-screen-readers">Screen reader and keyboard navigation content</h3>
<p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following <ahref="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as mixins.</p>
{% highlight html %}
<aclass="sr-only sr-only-focusable"href="#content">Skip to main content</a>
<p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
<divclass="bs-callout bs-callout-warning">
<h4>SVG images and IE 8-10</h4>
<p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
<p>Add classes to an <code><img></code> element to easily style images in any project.</p>
<divclass="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
</div>
<divclass="bs-example bs-example-images">
<imgdata-src="holder.js/140x140"class="img-rounded"alt="A generic square placeholder image with rounded corners">
<imgdata-src="holder.js/140x140"class="img-circle"alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
<imgdata-src="holder.js/140x140"class="img-thumbnail"alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
<pclass="lead">Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
<p>Grid variables and mixins are covered <ahref="#grid-less">within the Grid system section</a>.</p>
<h2id="less-bootstrap">Compiling Bootstrap</h2>
<p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <ahref="../getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p>
<p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>
<h2id="less-variables">Variables</h2>
<p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <ahref="../customize/#less-variables-section">the Customizer</a>.</p>
<h3id="less-variables-colors">Colors</h3>
<p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
<divclass="bs-example">
<divclass="color-swatches">
<divclass="color-swatch gray-darker"></div>
<divclass="color-swatch gray-dark"></div>
<divclass="color-swatch gray"></div>
<divclass="color-swatch gray-light"></div>
<divclass="color-swatch gray-lighter"></div>
</div>
</div>
{% highlight scss %}
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
{% endhighlight %}
<divclass="bs-example">
<divclass="color-swatches">
<divclass="color-swatch brand-primary"></div>
<divclass="color-swatch brand-success"></div>
<divclass="color-swatch brand-info"></div>
<divclass="color-swatch brand-warning"></div>
<divclass="color-swatch brand-danger"></div>
</div>
</div>
{% highlight scss %}
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
{% endhighlight %}
<p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>
<p>A handful of variables for quickly customizing key elements of your site's skeleton.</p>
{% highlight scss %}
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
{% endhighlight %}
<h3id="less-variables-links">Links</h3>
<p>Easily style your links with the right color with only one value.</p>
{% highlight scss %}
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}
{% endhighlight %}
<p>Note that the <code>@link-hover-color</code> uses a function, another awesome tool from Less, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>
<h3id="less-variables-typography">Typography</h3>
<p>Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.</p>
<p>Two quick variables for customizing the location and filename of your icons.</p>
{% highlight scss %}
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
{% endhighlight %}
<h3id="less-variables-components">Components</h3>
<p>Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.</p>
{% highlight scss %}
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
{% endhighlight %}
<h2id="less-mixins-vendor">Vendor mixins</h2>
<p>Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixes in your compiled CSS.</p>
<h3id="less-mixins-box-sizing">Box-sizing</h3>
<p>Reset your components' box model with a single mixin. For context, see this <ahref="https://developer.mozilla.org/en-US/docs/CSS/box-sizing"target="_blank">helpful article from Mozilla</a>.</p>
<p>The mixin is <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
<p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
<p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the <strong>deprecated</strong> mixin to pick up the required <code>-webkit</code> prefix.</p>
<p>The mixin is <strong>deprecated</strong> as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
<p>Be sure to use <code>rgba()</code> colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
<p>Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
<p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
<p>Rotate, scale, translate (move), or skew any object.</p>
<p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
{% highlight scss %}
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
{% endhighlight %}
<h3id="less-mixins-animations">Animations</h3>
<p>A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.</p>
<p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
<p>Provide context for form controls within each field.</p>
{% highlight scss %}
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
{% endhighlight %}
<h3id="less-mixins-columns">Columns</h3>
<p>Generate columns via CSS within a single element.</p>
{% highlight scss %}
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
{% endhighlight %}
<h3id="less-mixins-gradients">Gradients</h3>
<p>Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.</p>
{% highlight scss %}
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
{% endhighlight %}
<p>You can also specify the angle of a standard two-color, linear gradient:</p>
{% highlight scss %}
#gradient > .directional(#333; #000; 45deg);
{% endhighlight %}
<p>If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.</p>
{% highlight scss %}
#gradient > .striped(#333; 45deg);
{% endhighlight %}
<p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:</p>
<p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using the <code>.reset-filter()</code> mixin alongside <code>background-image: none;</code>.</p>
<h2id="less-mixins-utility">Utility mixins</h2>
<p>Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.</p>
<h3id="less-mixins-clearfix">Clearfix</h3>
<p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <ahref="http://nicolasgallagher.com/micro-clearfix-hack/"target="_blank">micro clearfix</a> from <ahref="https://twitter.com/necolas"target="_blank">Nicolas Gallager</a>.</p>
<p>Easily truncate text with an ellipsis with a single mixin. <strong>Requires element to be <code>block</code> or <code>inline-block</code> level.</strong></p>
<p>Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>
<pclass="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<h3id="overview-doctype">HTML5 doctype</h3>
<p>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.</p>
{% highlight html %}
<!DOCTYPE html>
<htmllang="en">
...
</html>
{% endhighlight %}
<h3id="overview-mobile">Mobile first</h3>
<p>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, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
<p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p>
<p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> 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!</p>
<h3id="overview-type-links">Typography and links</h3>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<ul>
<li>Set <code>background-color: #fff;</code> on the <code>body</code></li>
<li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
<li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
</ul>
<p>These styles can be found within <code>scaffolding.less</code>.</p>
<h3id="overview-normalize">Normalize.css</h3>
<p>For improved cross-browser rendering, we use <ahref="http://necolas.github.io/normalize.css/"target="_blank">Normalize.css</a>, a project by <ahref="https://twitter.com/necolas"target="_blank">Nicolas Gallagher</a> and <ahref="https://twitter.com/jon_neal"target="_blank">Jonathan Neal</a>.</p>
<h3id="overview-container">Containers</h3>
<p>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 <code>padding</code> and more, neither container is nestable.</p>
<p>Use <code>.container</code> for a responsive fixed width container.</p>
{% highlight html %}
<divclass="container">
...
</div>
{% endhighlight %}
<p>Use <code>.container-fluid</code> for a full width container, spanning the entire width of your viewport.</p>
<pclass="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
<p>As of v3.2.0, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
<divclass="table-responsive">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<th>Group of classes</th>
<th>CSS <code>display</code></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.visible-*-block</code></td>
<td><code>display: block;</code></td>
</tr>
<tr>
<td><code>.visible-*-inline</code></td>
<td><code>display: inline;</code></td>
</tr>
<tr>
<td><code>.visible-*-inline-block</code></td>
<td><code>display: inline-block;</code></td>
</tr>
</tbody>
</table>
</div>
<p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
<p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2.0</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code><table></code>-related elements.</p>
<p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.2.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code><table></code>-related elements.</p>
<pclass="lead">While Bootstrap is built on Less, it also has an <ahref="{{ site.sass_repo }}">official Sass port</a>. We maintain it in a separate GitHub repository and handle updates with a conversion script.</p>
<h2id="sass-contents">What's included</h2>
<p>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.</p>
<divclass="table-responsive">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<th>Path</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>lib/</code></th>
<td>Ruby gem code (Sass configuration, Rails and Compass integrations)</td>
</tr>
<tr>
<th><code>tasks/</code></th>
<td>Converter scripts (turning upstream Less to Sass)</td>
</tr>
<tr>
<th><code>test/</code></th>
<td>Compilation tests</td>
</tr>
<tr>
<th><code>templates/</code></th>
<td>Compass package manifest</td>
</tr>
<tr>
<th><code>vendor/assets/</code></th>
<td>Sass, JavaScript, and font files</td>
</tr>
<tr>
<th><code>Rakefile</code></th>
<td>Internal tasks, such as rake and convert</td>
</tr>
</tbody>
</table>
</div>
<p>Visit the <ahref="{{ site.sass_repo }}">Sass port's GitHub repository</a> to see these files in action.</p>
<h2id="sass-installation">Installation</h2>
<p>For information on how to install and use Bootstrap for Sass, consult the <ahref="{{ site.sass_repo }}">GitHub repository readme</a>. It's the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.</p>
<p>
<aclass="btn btn-lg btn-outline"href="{{ site.sass_repo }}">Bootstrap for Sass</a>
<p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
<divclass="bs-example">
<tableclass="table">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
{% highlight html %}
<tableclass="table">
...
</table>
{% endhighlight %}
<h2id="tables-striped">Striped rows</h2>
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>.</p>
<divclass="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
</div>
<divclass="bs-example">
<tableclass="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
{% highlight html %}
<tableclass="table table-striped">
...
</table>
{% endhighlight %}
<h2id="tables-bordered">Bordered table</h2>
<p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
<divclass="bs-example">
<tableclass="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<tdrowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<tdcolspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
{% highlight html %}
<tableclass="table table-bordered">
...
</table>
{% endhighlight %}
<h2id="tables-hover-rows">Hover rows</h2>
<p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code><tbody></code>.</p>
<divclass="bs-example">
<tableclass="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<tdcolspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
{% highlight html %}
<tableclass="table table-hover">
...
</table>
{% endhighlight %}
<h2id="tables-condensed">Condensed table</h2>
<p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
<p>Use contextual classes to color table rows or individual cells.</p>
<divclass="table-responsive">
<tableclass="table table-bordered table-striped">
<colgroup>
<colclass="col-xs-1">
<colclass="col-xs-7">
</colgroup>
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.active</code>
</td>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<td>
<code>.success</code>
</td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td>
<code>.info</code>
</td>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<td>
<code>.warning</code>
</td>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<td>
<code>.danger</code>
</td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
<divclass="bs-example">
<tableclass="table">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<trclass="active">
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<trclass="success">
<td>3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<trclass="info">
<td>5</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>6</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<trclass="warning">
<td>7</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>8</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<trclass="danger">
<td>9</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
{% highlight html %}
<!-- On rows -->
<trclass="active">...</tr>
<trclass="success">...</tr>
<trclass="warning">...</tr>
<trclass="danger">...</tr>
<trclass="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<tdclass="active">...</td>
<tdclass="success">...</td>
<tdclass="warning">...</td>
<tdclass="danger">...</td>
<tdclass="info">...</td>
</tr>
{% endhighlight %}
<divclass="bs-callout bs-callout-warning">
<h4>Conveying meaning to assistive technologies</h4>
<p>Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
</div>
<h2id="tables-responsive">Responsive tables</h2>
<p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
<divclass="bs-callout bs-callout-warning">
<h4>Firefox and fieldsets</h4>
<p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
{% highlight css %}
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
{% endhighlight %}
<p>For more information, read <ahref="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
<p>All HTML headings, <code><h1></code> through <code><h6></code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.</p>
<divclass="bs-example bs-example-type">
<tableclass="table">
<tbody>
<tr>
<td><h1>h1. Bootstrap heading</h1></td>
<tdclass="type-info">Semibold 36px</td>
</tr>
<tr>
<td><h2>h2. Bootstrap heading</h2></td>
<tdclass="type-info">Semibold 30px</td>
</tr>
<tr>
<td><h3>h3. Bootstrap heading</h3></td>
<tdclass="type-info">Semibold 24px</td>
</tr>
<tr>
<td><h4>h4. Bootstrap heading</h4></td>
<tdclass="type-info">Semibold 18px</td>
</tr>
<tr>
<td><h5>h5. Bootstrap heading</h5></td>
<tdclass="type-info">Semibold 14px</td>
</tr>
<tr>
<td><h6>h6. Bootstrap heading</h6></td>
<tdclass="type-info">Semibold 12px</td>
</tr>
</tbody>
</table>
</div>
{% highlight html %}
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
{% endhighlight %}
<p>Create lighter, secondary text in any heading with a generic <code><small></code> tag or the <code>.small</code> class.</p>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.428</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p>
<divclass="bs-example">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
{% highlight html %}
<p>...</p>
{% endhighlight %}
<!-- Body copy .lead -->
<h3>Lead body copy</h3>
<p>Make a paragraph stand out by adding <code>.lead</code>.</p>
<divclass="bs-example">
<pclass="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</div>
{% highlight html %}
<pclass="lead">...</p>
{% endhighlight %}
<!-- Using Less -->
<h3>Built with Less</h3>
<p>The typographic scale is based on two Less variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
<!-- Inline text elements -->
<h2id="type-inline-text">Inline text elements</h2>
<h3>Marked text</h3>
<p>For highlighting a run of text due to its relevance in another context, use the <code><mark></code> tag.</p>
<divclass="bs-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
</div>
{% highlight html %}
You can use the mark tag to <mark>highlight</mark> text.
{% endhighlight %}
<h3>Deleted text</h3>
<p>For indicating blocks of text that have been deleted use the <code><del></code> tag.</p>
<divclass="bs-example">
<p><del>This line of text is meant to be treated as deleted text.</del></p>
</div>
{% highlight html %}
<del>This line of text is meant to be treated as deleted text.</del>
{% endhighlight %}
<h3>Strikethrough text</h3>
<p>For indicating blocks of text that are no longer relevant use the <code><s></code> tag.</p>
<divclass="bs-example">
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
</div>
{% highlight html %}
<s>This line of text is meant to be treated as no longer accurate.</s>
{% endhighlight %}
<h3>Inserted text</h3>
<p>For indicating additions to the document use the <code><ins></code> tag.</p>
<divclass="bs-example">
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
</div>
{% highlight html %}
<ins>This line of text is meant to be treated as an addition to the document.</ins>
{% endhighlight %}
<h3>Underlined text</h3>
<p>To underline text use the <code><u></code> tag.</p>
<divclass="bs-example">
<p><u>This line of text will render as underlined</u></p>
</div>
{% highlight html %}
<u>This line of text will render as underlined</u>
{% endhighlight %}
<p>Make use of HTML's default emphasis tags with lightweight styles.</p>
<h3>Small text</h3>
<p>For de-emphasizing inline or blocks of text, use the <code><small></code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code><small></code> elements.</p>
<p>You may alternatively use an inline element with <code>.small</code> in place of any <code><small></code>.</p>
<divclass="bs-example">
<p><small>This line of text is meant to be treated as fine print.</small></p>
</div>
{% highlight html %}
<small>This line of text is meant to be treated as fine print.</small>
{% endhighlight %}
<h3>Bold</h3>
<p>For emphasizing a snippet of text with a heavier font-weight.</p>
<divclass="bs-example">
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
</div>
{% highlight html %}
<strong>rendered as bold text</strong>
{% endhighlight %}
<h3>Italics</h3>
<p>For emphasizing a snippet of text with italics.</p>
<divclass="bs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div>
{% highlight html %}
<em>rendered as italicized text</em>
{% endhighlight %}
<divclass="bs-callout bs-callout-info">
<h4>Alternate elements</h4>
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
</div>
<h2id="type-alignment">Alignment classes</h2>
<p>Easily realign text to components with text alignment classes.</p>
<p>Transform text in components with text capitalization classes.</p>
<divclass="bs-example">
<pclass="text-lowercase">Lowercased text.</p>
<pclass="text-uppercase">Uppercased text.</p>
<pclass="text-capitalize">Capitalized text.</p>
</div>
{% highlight html %}
<pclass="text-lowercase">Lowercased text.</p>
<pclass="text-uppercase">Uppercased text.</p>
<pclass="text-capitalize">Capitalized text.</p>
{% endhighlight %}
<!-- Abbreviations -->
<h2id="type-abbreviations">Abbreviations</h2>
<p>Stylized implementation of HTML's <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
<h3>Basic abbreviation</h3>
<p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code><abbr></code> element.</p>
<divclass="bs-example">
<p>An abbreviation of the word attribute is <abbrtitle="attribute">attr</abbr>.</p>
</div>
{% highlight html %}
<abbrtitle="attribute">attr</abbr>
{% endhighlight %}
<h3>Initialism</h3>
<p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
<divclass="bs-example">
<p><abbrtitle="HyperText Markup Language"class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
<p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code><br></code>.</p>
<divclass="bs-example">
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbrtitle="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<ahref="mailto:#">first.last@example.com</a>
</address>
</div>
{% highlight html %}
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbrtitle="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<ahref="mailto:#">first.last@example.com</a>
</address>
{% endhighlight %}
<!-- Blockquotes -->
<h2id="type-blockquotes">Blockquotes</h2>
<p>For quoting blocks of content from another source within your document.</p>
<h3>Default blockquote</h3>
<p>Wrap <code><blockquote></code> around any <abbrtitle="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a <code><p></code>.</p>
<divclass="bs-example">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
</div>
{% highlight html %}
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
{% endhighlight %}
<h3>Blockquote options</h3>
<p>Style and content changes for simple variations on a standard <code><blockquote></code>.</p>
<h4>Naming a source</h4>
<p>Add a <code><footer></code> for identifying the source. Wrap the name of the source work in <code><cite></code>.</p>
<divclass="bs-example">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
</div>
{% highlight html %}
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
{% endhighlight %}
<h4>Alternate displays</h4>
<p>Add <code>.blockquote-reverse</code> for a blockquote with right-aligned content.</p>
<divclass="bs-example"style="overflow: hidden;">
<blockquoteclass="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
</div>
{% highlight html %}
<blockquoteclass="blockquote-reverse">
...
</blockquote>
{% endhighlight %}
<!-- Lists -->
<h2id="type-lists">Lists</h2>
<h3>Unordered</h3>
<p>A list of items in which the order does <em>not</em> explicitly matter.</p>
<divclass="bs-example">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
{% highlight html %}
<ul>
<li>...</li>
</ul>
{% endhighlight %}
<h3>Ordered</h3>
<p>A list of items in which the order <em>does</em> explicitly matter.</p>
<divclass="bs-example">
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
{% highlight html %}
<ol>
<li>...</li>
</ol>
{% endhighlight %}
<h3>Unstyled</h3>
<p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
<divclass="bs-example">
<ulclass="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
{% highlight html %}
<ulclass="list-unstyled">
<li>...</li>
</ul>
{% endhighlight %}
<h3>Inline</h3>
<p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p>
<divclass="bs-example">
<ulclass="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
</div>
{% highlight html %}
<ulclass="list-inline">
<li>...</li>
</ul>
{% endhighlight %}
<h3>Description</h3>
<p>A list of terms with their associated descriptions.</p>
<divclass="bs-example">
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
{% highlight html %}
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
{% endhighlight %}
<h4>Horizontal description</h4>
<p>Make terms and descriptions in <code><dl></code> line up side-by-side. Starts off stacked like default <code><dl></code>s, but when the navbar expands, so do these.</p>
<divclass="bs-example">
<dlclass="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
</div>
{% highlight html %}
<dlclass="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
{% endhighlight %}
<divclass="bs-callout bs-callout-info">
<h4>Auto-truncating</h4>
<p>Horizontal description lists will truncate terms that are too long to fit in the left column with <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.</p>
<p>Designed and built with all the love in the world by <ahref="https://twitter.com/mdo"target="_blank">@mdo</a> and <ahref="https://twitter.com/fat"target="_blank">@fat</a>.</p>
<p>Maintained by the <ahref="https://github.com/orgs/twbs/people">core team</a> with the help of <ahref="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p>Code licensed under <ahref="https://github.com/twbs/bootstrap/blob/master/LICENSE"target="_blank">MIT</a>, documentation under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<pclass="lead">Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using <abbrtitle="Assistive Technology"class="initialism">AT</abbr>.</p>
<h3>Skip navigation</h3>
<p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link immediately after your opening <code><body></code> tag. <ahref="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
{% highlight html %}
<body>
<ahref="#content"class="sr-only sr-only-focusable">Skip to main content</a>
<divclass="container"id="content">
The main page content.
</div>
</body>
{% endhighlight %}
<h3>Nested headings</h3>
<p>When nesting headings (<code><h1></code> - <code><h6></code>), your primary document header should be an <code><h1></code>. Subsequent headings should make logical use of <code><h2></code> - <code><h6></code> such that screen readers can construct a table of contents for your pages.</p>
<p>Learn more at <ahref="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <ahref="http://accessibility.psu.edu/headings">Penn State's AccessAbility</a>.</p>
<h3>Color contrast</h3>
<p>Currently, some of the default color combinations available in Bootstrap (such as the various <ahref="../css/#buttons">styled button</a> classes, some of the code highlighting colors used for <ahref="../css/#code-block">basic code blocks</a>, the <code>.bg-primary</code><ahref="..css/#helper-classes-backgrounds">contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <ahref="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p>
<h3>Additional resources</h3>
<ul>
<li><ahref="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
<h1id="support"class="page-header">Browser and device support</h1>
<pclass="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>
<h3id="support-browsers">Supported browsers</h3>
<p>Specifically, we support the <strong>latest versions</strong> of the following browsers and platforms. On Windows, <strong>we support Internet Explorer 8-11</strong>. More specific support information is provided below.</p>
<tdclass="text-danger"><spanclass="glyphicon glyphicon-remove"aria-hidden="true"></span> Not Supported</td>
</tr>
</tbody>
</table>
</div>
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.</p>
<p>For a list of some of the browser bugs that Bootstrap has to grapple with, see our <ahref="../browser-bugs/">Wall of browser bugs</a>.</p>
<h3id="support-ie8-ie9">Internet Explorer 8 and 9</h3>
<p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <ahref="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
<divclass="table-responsive">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thscope="col"class="col-xs-4">Feature</th>
<thscope="col"class="col-xs-4">Internet Explorer 8</th>
<thscope="col"class="col-xs-4">Internet Explorer 9</th>
</tr>
</thead>
<tbody>
<tr>
<thscope="row"><code>border-radius</code></th>
<tdclass="text-danger"><spanclass="glyphicon glyphicon-remove"aria-hidden="true"></span> Not supported</td>
<tdclass="text-danger"><spanclass="glyphicon glyphicon-remove"aria-hidden="true"></span> Not supported</td>
<tdclass="text-success"><spanclass="glyphicon glyphicon-ok"aria-hidden="true"></span> Supported, with <code>-ms</code> prefix</td>
</tr>
<tr>
<thscope="row"><code>transition</code></th>
<tdcolspan="2"class="text-danger"><spanclass="glyphicon glyphicon-remove"aria-hidden="true"></span> Not supported</td>
</tr>
<tr>
<thscope="row"><code>placeholder</code></th>
<tdcolspan="2"class="text-danger"><spanclass="glyphicon glyphicon-remove"aria-hidden="true"></span> Not supported</td>
</tr>
</tbody>
</table>
</div>
<p>Visit <ahref="http://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
<h3id="support-ie8-respondjs">Internet Explorer 8 and Respond.js</h3>
<p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
<h4id="respond-js-x-domain">Respond.js and cross-domain CSS</h4>
<p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <ahref="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p>
<h4id="respond-file-proto">Respond.js and <code>file://</code></h4>
<p>Due to browser security rules, Respond.js doesn't work with pages viewed via the <code>file://</code> protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). <ahref="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
<h4id="respond-import">Respond.js and <code>@import</code></h4>
<p>Respond.js doesn't work with CSS that's referenced via <code>@import</code>. In particular, some Drupal configurations are known to use <code>@import</code>. <ahref="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
<h3id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3>
<p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
<h3id="support-ie8-font-face">Internet Explorer 8 and @font-face</h3>
<p>IE8 has some issues with <code>@font-face</code> when combined with <code>:before</code>. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. <ahref="https://github.com/twbs/bootstrap/issues/13863">See issue #13863</a> for details.</p>
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code><meta></code> tag in your pages:</p>
<p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p>
<p>This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
<p>See <ahref="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
<h3id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
<p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
{% highlight scss %}
@-ms-viewport { width: device-width; }
{% endhighlight %}
<p>However, this doesn't work for devices running Windows Phone 8 versions older than <ahref="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Update 3 (a.k.a. GDR3)</a>, as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug</strong>.</p>
{% highlight scss %}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
{% endhighlight %}
{% highlight js %}
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
<p>For more information and usage guidelines, read <ahref="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
<p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p>
<p>The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:</p>
<ul>
<li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
<li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
</ul>
<p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
<h3id="support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</h3>
<h4>Overflow and scrolling</h4>
<p>Support for <code>overflow: hidden</code> on the <code><body></code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code><body></code> content will begin to scroll.</p>
<h4>Virtual keyboards</h4>
<p>Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
<h4>Navbar Dropdowns</h4>
<p>The <code>.dropdown-backdrop</code> element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).</p>
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
<h3id="support-printing">Printing</h3>
<p>Even in some modern browsers, printing can be quirky.</p>
<p>In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <ahref="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p>
<ul>
<li>Embrace the extra-small grid and make sure your page looks acceptable under it.</li>
<li>Customize the values of the <code>@screen-*</code> Less variables so that your printer paper is considered larger than extra-small.</li>
<li>Add custom media queries to change the grid size breakpoints for print media only.</li>
</ul>
<p>Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <ahref="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:</p>
<p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
<h4>Select menus</h4>
<p>On <code><select></code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. (See <ahref="http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code><select></code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
<p>Want to see an example? <ahref="http://jsbin.com/kuvoz/1">Check out this JS Bin demo.</a></p>
<h3id="support-validators">Validators</h3>
<p>In order to provide the best possible experience to old and buggy browsers, Bootstrap uses <ahref="http://browserhacks.com">CSS browser hacks</a> in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.</p>
<p>These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.</p>
<p>Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for <ahref="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">a certain Firefox bug</a>.</p>
<pclass="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
<ul>
<li>Read and subscribe to <ahref="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
<li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <ahref="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
<li>For help using Bootstrap, ask on <ahref="http://stackoverflow.com/questions/tagged/twitter-bootstrap-3">StackOverflow using the tag <code>twitter-bootstrap-3</code></a>.</li>
<li>Find inspiring examples of people building with Bootstrap at the <ahref="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
</ul>
<p>You can also follow <ahref="https://twitter.com/twbootstrap">@twbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
<pclass="lead">Bootstrap automatically adapts your pages for various screen sizes.
Here's how to disable this feature so your page works like in <ahref="../examples/non-responsive/">this non-responsive example</a>.</p>
<h3>Steps to disable page responsiveness</h3>
<ol>
<li>Omit the viewport <code><meta></code> mentioned in <ahref="../css/#overview-mobile">the CSS docs</a></li>
<li>Override the <code>width</code> on the <code>.container</code> for each grid tier with a single width, for example <code>width: 970px !important;</code> Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li>
<li>If using navbars, remove all navbar collapsing and expanding behavior.</li>
<li>For grid layouts, use <code>.col-xs-*</code> classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.</li>
</ol>
<p>You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed).
This disables the "mobile site" aspects of Bootstrap.</p>
<h3>Bootstrap template with responsiveness disabled</h3>
<p>We've applied these steps to an example. Read its source code to see the specific changes implemented.</p>
<pclass="lead">Bootstrap (currently v{{ site.current_version }}) 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.</p>
<divclass="row bs-downloads">
<divclass="col-sm-4">
<h3id="download-bootstrap">Bootstrap</h3>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<p>The folks over at <ahref="http://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <ahref="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p>
Alguns arquivos não foram exibidos porque demasiados arquivos foram alterados neste diff
Mostrar Mais
Referência em uma Nova Issue
Bloquear um usuário
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Mark Otto
