Anchor.js 1.0.0 drops the need to use anchor.css, so we remove it
from the codebase and move any leftover styles over to docs.css.
Closes#16488 by merging it.
- In general, there are very few instances that would require a jumbotron without a parent or child container.
- Right now we account for that behavior though with some horizontal padding on the .jumbotron class.
- This removes that horizontal padding as it narrows our grid classes unnecessarily and accounts for a super small use case.
- It also improves consistency across breakpoints, in that padding isn't being added and removed.
- In doing so, I also removed the shorthand padding property and went with the specific ones (because yay specificity).
Overall logic for this test appears broken, possibly relating to an
older version of Bootstrap that did not require explicit
`data-toggle="button"` on single toggle buttons?
Fix for problem that emerged from #16226 (`.active` class not actually
being applied) and expansion of the script to also correctly handle
keyboard interaction with checkboxes in `data-toggle="button"` groups
This documents the limitation discussed in https://github.com/twbs/bootstrap/issues/12126:
> When using column reordering and using the affix-plugin on an element positioned with push, the affix plugin doesn't work correctly - the element affected by the affix plugin is positioned to the left even when the element is in a column positioned on the right.
Seems to affect Safari (tested in version 8) only.
That issue has (unfortunately) been closed, so this at least documents the behavior.
I agree with all the comments here.
Rather than dicker with container nesting at this late juncture, near sunset for BS 3.0x, let's just fix and move on. It's docs only.
This PR addresses issue #15100 and eliminates the unnecessary horizontal scrollbar that appears for width for width >=768px and <= 782px.
Tested on three different iOS devices and FireFox/Chrome on OSX and it's fine now.
The only difference is the text in .bs-docs-header is shifted left by 15-pixels, lines are 30 px longer so wrap less in some circumstances in some viewports.
Currently, hovering with mouse or setting focus on a button which is
active has same styling as on a non-active button. This results in
problems for keyboard users, who set focus on a toggle and activate it,
but cannot visually see that their action had any effect. Ditto for
mouse users hovering over a toggle and clicking it. This adds an
explicit additional style for focus/hover on active buttons.
Note that this does not address issues of browser focus remaining on a
button after a mouse click (e.g. #13971), as this will likely require
extra JavaScript to fix.
Currently, auto placement is using the container dimensions (if provided) or the element's parent to determine where to open the tooltip:
```javascript
var $container = this.options.container ? $(this.options.container) : this.$element.parent()
var containerDim = this.getPosition($container)
```
This is quite broken in fact, because the parent element could be just a small div outside the element for example, leading in a totally random placement (placing the tooltip on top even if there's no room). And the container can also be outside of the viewport.
This fix simply uses the viewport instead, that's the purpose of the viewport actually, to position the tooltip.
So the auto placement should use it to find where there's more room.
By default this is body, which is good.
Also, use id rather class name for the navigation, as it's unique and
lets us use correct aria-controls (and without the use of id,
aria-expanded does not get updated correctly by the current dropdown
toggle script)
<a> doesn't support the `[disabled]` attribute,
so `a.btn.disabled` simulates it using `pointer-events: none`.
However, this is unnecessary for <button>s and <input>s, and
also prevents their `[disabled]` cursor from displaying.
[skip sauce]
[skip validator]
To ensure that we don't accidentally use any of the aliases.
This should prevent any future regressions from #12761.
Also updates the test suite since it now can't use these aliases either.
When the first two elements in a scrollspy content block have a document
offset of zero (i.e. they're hard against the top of the page),
Scrollspy would switch between them on every scroll event.
This could happen, for example, in a system of nested sections:
```
<section id="animals">
<section id="dogs">
Content
</section>
</section>
```
This ocurred because Scrollspy's check to see if it's at the end of the
array of sections uses `!arr[index]`. This misses the case where
`arr[index]` does exist and is zero.
This commit explicitly checks the array bounds.
[Fixes#15928] Encourage use of icons with form validation states for colorblind users
Update text per @patrickhlauke's feedback
Update text per @patrickhlauke's feedback.
Fix stupid grammar mistake
Fixed performance bug where a tooltip element is created and then immediately destroyed when tooltip.hide() is called and there is no existing tooltip element
Resolves#15557 by merging it.
Document in the source code that the justified nav is meant for single line list items only. This should help prevent Issues like #15906 in the future.
Bump markdown it to 3.0.7
3.0.7 / 2015-02-22
Match table columns count by header.
Added basic CLI support.
Added \v \f to valid whitespaces.
Use external package for unicode data (punctuation).
Related to #15823, I would be interested in officially recommending a keyword such as `twbs-bootstrap` so that we can more easily showcase plugins and extensions for Bootstrap without requiring additional curation by the admins / collabs of TWBS
specificity
Add additional comment to docs
Fix capitalization
Update tag per @mdo's recommendation
[Fixes#15691] .form-control-static changes height when empty by setting the minimum height to the size it is when text is in the `.form-control-static`
JSFiddle: http://jsfiddle.net/4pdo4yzo/
Compute the minimum height
@line-height-computed = ~20px
@font-size-base = 14px
This should come to approx. 34px
Add min-height to from-group-* per @cvrebert
I had this wrong. The minimum height would depend on the font-size of that specific group, thus we need to declare it once for font-size-small and once also for font-size-large
GitHub considers Bootstrap files to be vendored files, and excludes them from
repository language statistics. This makes sense for most repositories, where
Bootstrap is indeed third-party code. This repository is the exception; it's
first-party code here, so should count toward the language statistics.
Fixes#15653 — Add comment which explains that how a responsive image should be centered
Redo of #15657 which I couldn't get to rebase properly after all the merges were done last night.
[Fix Issue #15683] `readonly` input should not have a `not-allowed` cursor. Instead, this pull request displays a standard cursor and only displays the not-allowed cursor on disabled items.
Revise docs wording to clarify cursor display
Add tabindex="-1" to main #content to work around bug in Chrome (and old
WebKits) and IE
Update advice in accessibility section
Include patch in docs CSS to suppress outline when #content is focused
(particularly as Chrome sets focus as result of mouse click for
tabindex="-1" elements)
data-example-id not need be moved. Only change, because data-example-id="static-dropdown" already exists.
Remove whitespace after h3.
Variation not need capitalize.
Surprisingly those weren't reported by the validator; only in the grunt-contrib-htmlmin branch they were reported, so after digging into it, I saw they were indeed errors...
Fix issue #15597 — Mention dropup variation in dropdown docs
Other pull request was so messed up I sincerely have no clue how to save it. The recommended command doesn't work, can't believe rebasing is so problematic...
If Bootstrap is installed through bower, the woff2 font file may not be
copied over as it's not in the "main" files. The LESS files still
reference the font file which results in errors.
People normally center images using text-align. However, the `.img-responsive`
class changes the display type to block. As a result you can no longer align the
image with text-align. You must instead do it with margin: auto. There was no
note about this on the web page, and no mention about setting the display to
block. Users were left on a frustrating journey to figure out why they can't center
images anymore!
When the screen is shrunk below the md threshold, all the featurette columns stack.
However, since the second featurette is "backwards", when stacked the second featurette
looked awkward as the image came before the heading.
Bootstrap itself has .btn-default.disabled styled. IE8 with angularjs has some weird behaviour if anchor has disabled attribute set, so I use disabled class as a workaround and assume the .disabled class styles the buttons the same as disabled attribute would.
This reverts commit 1b3237629a.
This reverts PR #14189 because it caused major regressions.
Fixes#15168.
We'll try to revisit #14167's feature request in Bootstrap v4.
[skip validator]
Our use of Holder.js in the docs is a mere implementation detail.
Don't want to confuse people into thinking Holder.js
is somehow required by the Thumbnail component.
[skip sauce]
Additional markup for the skip link (to ensure it has the same effective
width as the main content, and to provide an outline around just the
link text) plus some basic styles...make it look a bit more in keeping
with the overall look and feel of the docs.
- actually add the ``min-width`` extra style (and use ``em`` rather than
``px``) to the 0% and 2% example
- remove the unnecessarily redundant sentence in the "With labels"
section
- remove the unnecessary heading/section specifically for low percentage
case, make it flow naturally as part of the "With labels" section
Docs accessibility tweaks: use ``aria-label`` for close ``<button>``, expand advice for ``<abbr>``, form control labels, make sidebar navigation a ``<nav>``
Removed "Separated link" in example where it's not separated. This may confuse people to think that it is separated.
I don't want to sound nitpick, but I've been working with a client maintaining a custom internal Bootstrap installation with customized docs, so I've been getting a lot of feedback from client developers using the docs.
- update distribution file list with relevant files
- add a short reference to CSS source map purpose
- add link to Google Chrome developer network article
Center .icon-prev and .icon-next the same way .glyphicon icon are.
And this is the html markup:
<a class="left carousel-control" href="#carousel-main-menu" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
</a>
Use scrollTop instead of colliderTop which uses the elements
offset().top, as the offset top does not account for padding.
This issue can be replicated by using a navbar-fixed-top and applying
relevant padding to the body. (A navbar-static-top with no padding on
the body does not encounter this issue)
Fixes#15078Closes#15154 by merging it
as discssued in
https://github.com/twbs/bootstrap/issues/15117#issuecomment-63029993
- added ``scope="row"`` to row headers
- made sure row headers are actual ``<th>`` elements
- removed ``scope="col"`` where it was redundant
- simplified table examples with (to me) unnecessary
``rowspan``/``colspan`` (unless you really want complex tables, in which
case we would need full-on ``id`` and ``headers`` attributes to make
sure each table cell has an explicit association with the related header
cells - overkill, in my opinion)
- one table (in typography) left header-less, as it's more or less presentational (though its structure is still important, hence not adding ``role="presentation"``)
Make sample code match live example
Move <label> out of .input-group into .form-group instead
Change field from Email to Username to make it less redundant, slightly more realistic
Add <label> for Username field for consistency
Fixes#15118
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.
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.
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.
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.
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.
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](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
Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
-`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 an issue opened on that browser's own bug tracker.
-`confirmed` - Issues that have been confirmed with a reduced test case and identify 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](https://github.com/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](https://css-tricks.com/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/) and [document them in MDN](https://developer.mozilla.org/en-US/docs/Web).
| 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
- CSS changes must be done in `.less` files first, never just the compiled `.css` 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
- Pull requests should always be against the `master` branch, never against `gh-pages`.
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)
[@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.
[@twbs-savage](https://github.com/twbs-savage) is a Bootstrap bot that automatically runs cross-browser tests (via [Sauce](https://saucelabs.com) and Travis CI) on JavaScript pull requests. Savage will leave a comment on pull requests stating whether cross-browser JS tests passed or failed, with a link to the full Travis build details. If your pull request fails, check the Travis log to see which browser + OS combinations failed. Each browser test in the Travis log includes a link to a Sauce page with details about the test. On those details pages, you can watch a screencast of the test run to see exactly which unit tests failed.
## 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
With v3.1, we're moving from the Apache 2 to the MIT license for the Bootstrap code (not the docs). We're in the process of collecting permissions from all Bootstrap contributors with code still part of the project to make this happen. For details, please see [#2054](https://github.com/twbs/bootstrap/issues/2054).
By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).
By contributing to the documentation, you agree to license your contribution under the [Creative Commons Attribution 3.0 Unported License](docs/LICENSE).
By contributing your code, you agree to dual-license your contribution under the [Apache 2](https://github.com/twbs/bootstrap/blob/master/LICENSE) and [MIT](https://github.com/twbs/bootstrap/blob/master/MIT) licenses.
Prior to v3.1.0, Bootstrap's code 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/orgs/twbs/people) with the massive support and involvement of the community.
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:
Several quick start options are available:
* [Download the latest release](https://github.com/twbs/bootstrap/releases/tag/v3.0.0).
* Clone the repo: `git clone https://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.4.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.com): `npm install bootstrap`.
- Install with [Meteor](https://www.meteor.com): `meteor add twbs:bootstrap`.
- Install with [Composer](https://getcomposer.org): `composer require twbs/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
@@ -24,8 +42,10 @@ Within the download you'll find the following directories and files, logically g
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
@@ -34,19 +54,17 @@ bootstrap/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
```
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.
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/chrome-developer-tools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. 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
@@ -55,10 +73,11 @@ Bootstrap's documentation, included in this repo in the root directory, is built
### 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> in your browser, and voilà.
1. Install [bundler](http://bundler.io/) via `gem install bundle`.
- **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Ruby up and running without problems.
2. Install the Ruby Gems: `bundle install`.
3.From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
4. Open <http://localhost:9001> in your browser, and voilà.
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
@@ -70,96 +89,49 @@ Documentation for v2.3.2 has been made available for the time being at <http://g
## 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. Navigate to the root `/bootstrap` directory, then run `npm install`. npm will look at [package.json](package.json) and automatically install the necessary local dependencies listed there.
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`. **Uses [recess](http://twitter.github.io/recess/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
#### Only compile CSS and JavaScript - `grunt dist`
`grunt dist` creates the `/dist` directory with compiled files. **Uses [recess](http://twitter.github.io/recess/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
#### Tests - `grunt test`
Runs [JSHint](http://jshint.com) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI).
#### 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 [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](https://github.com/twbs/bootstrap/tree/master/js/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>.
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>.
With v3.1, we're moving from the Apache 2 to the MIT license for the Bootstrap code (not the docs). Please see the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md) for more information.
## Community
Keep track of development and community news.
* Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
* Read and subscribe to [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.
Get updates on Bootstrap's development and chat with the project maintainers and community members.
- Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
- Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
- Join [the official Slack room](https://bootstrap-slack.herokuapp.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)).
- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
## 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/>.
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.
## Authors
## Creators
**Mark Otto**
+ <http://twitter.com/mdo>
+ <http://github.com/mdo>
- <https://twitter.com/mdo>
- <https://github.com/mdo>
**Jacob Thornton**
+ <http://twitter.com/fat>
+ <http://github.com/fat>
- <https://twitter.com/fat>
- <https://github.com/fat>
## Copyright and license
Copyright 2013 Twitter, Inc under [the Apache 2.0 license](LICENSE).
Code and documentation copyright 2011-2015 Twitter, Inc. Code released under [the MIT license](https://github.com/twbs/bootstrap/blob/master/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/master/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>
<pclass="lead">Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p>
<p>Bootstrap was created at Twitter in mid-2010 by <ahref="https://twitter.com/mdo">@mdo</a> and <ahref="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <ahref="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
<p>Originally <ahref="https://dev.twitter.com/blog/bootstrap-twitter">released</a> on <ahref="https://twitter.com/mdo/statuses/104620039650557952"><timedatetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've since had over <ahref="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
<pclass="lead">Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
<p>Get involved with Bootstrap development by <ahref="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <ahref="https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</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>Have a question that's not a feature request or bug report? <ahref="http://groups.google.com/group/twitter-bootstrap">Ask on the mailing list.</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>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">Community members have translated Bootstrap's documentation into various langauges. None are officially supported and may not always be up to date.</p>
<li><ahref="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
</ul>
<p>Have another language to add, or perhaps a different or better translation? Let us know by <ahref="https://github.com/twbs/bootstrap/issues/new">opening an issue</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'
<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>
<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>
<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>
<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>
<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>
<h2id="btn-groups-single">Basic example</h2>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including when nesting multiple groups.</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>
<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>
<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>
<h2id="dropdowns-example">Example</h2>
<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>
<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 over 250 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>
<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>
<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>
<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>
<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>
<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>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.</p>
<p>The exact technique to be used (<code><label></code> elements hidden using the <code>.sr-only</code> class, or use of the <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-describedby</code>, <code>title</code> or <code>placeholder</code> attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.</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>
<inputtype="text"class="form-control"aria-label="Amount (to the nearest dollar)">
<spanclass="input-group-addon">.00</span>
</div>
{% endhighlight %}
<h2id="input-groups-sizing">Sizing</h2>
<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>
<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>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>
<h2id="list-group-basic">Basic example</h2>
<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>
<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>
<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 %}
<h2id="list-group-buttons">Button items</h2>
<p>List group items may be buttons 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. <strongclass="text-danger">Don't use the standard <code>.btn</code> classes here.</strong></p>
<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>
<h2id="media-default">Default media</h2>
<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>
<h2id="media-alignment">Media alignment</h2>
<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>
<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>
<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>
<p>Be sure to use a <code><nav></code> element or, if using a more generic element such as a <code><div></code>, add a <code>role="navigation"</code> to every navbar to explicitly identify it as a landmark region for users of assistive technologies.</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>
<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>
</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>
<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>
<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>
<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>
<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>
<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>
<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="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 %}
<h2id="panels-footer">Panel with footer</h2>
<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>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>
<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>
<thscope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<thscope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<thscope="row">3</th>
<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>
<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>
<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>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>
<p>If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as <ahref="http://masonry.desandro.com">Masonry</a>, <ahref="http://isotope.metafizzy.co">Isotope</a>, or <ahref="http://salvattore.com">Salvattore</a>.</p>
<h2id="thumbnails-default">Default example</h2>
<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>
<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>
<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>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>
</div>
<h2id="buttons-options">Options</h2>
<p>Use any of the available button classes to quickly create a styled button.</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>
<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>
<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>
<h2id="grid-intro">Introduction</h2>
<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, e.g. 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>
<h2id="grid-media-queries">Media queries</h2>
<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 %}
<h2id="grid-options">Grid options</h2>
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
<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 %}
<h2id="grid-example-mixed">Example: Mobile and desktop</h2>
<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 fewer (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 %}
<h2id="grid-column-ordering">Column ordering</h2>
<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>
<h3>Variables</h3>
<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 %}
<h3>Mixins</h3>
<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>
<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>
<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>
<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>
<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"data-example-id="caret">
<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>
<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 %}
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.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;
}
.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>, <code>height: auto;</code> and <code>display: block;</code> to the image so that it scales nicely to the parent element.</p>
<p>To center images which use the <code>.img-responsive</code> class, use <code>.center-block</code> instead of <code>.text-center</code>. <ahref="../css/#helper-classes-center">See the helper classes section</a> for more details about <code>.center-block</code> usage.</p>
<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>
<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: darken(#428bca, 6.5%); // #337ab7
@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 typeface, 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 Gallagher</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>
<h2id="overview-doctype">HTML5 doctype</h2>
<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 %}
<h2id="overview-mobile">Mobile first</h2>
<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>
<h2id="overview-type-links">Typography and links</h2>
<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>
<h2id="overview-normalize">Normalize.css</h2>
<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>
<h2id="overview-container">Containers</h2>
<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>
<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>
<thscope="row"><code>lib/</code></th>
<td>Ruby gem code (Sass configuration, Rails and Compass integrations)</td>
</tr>
<tr>
<thscope="row"><code>tasks/</code></th>
<td>Converter scripts (turning upstream Less to Sass)</td>
</tr>
<tr>
<thscope="row"><code>test/</code></th>
<td>Compilation tests</td>
</tr>
<tr>
<thscope="row"><code>templates/</code></th>
<td>Compass package manifest</td>
</tr>
<tr>
<thscope="row"><code>vendor/assets/</code></th>
<td>Sass, JavaScript, and font files</td>
</tr>
<tr>
<thscope="row"><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>
<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>
<p>Responsive tables make use of <code>overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p>
<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>
<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>
<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>
<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>
<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"data-example-id="simple-u">
<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>
<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>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 and to users of assistive technologies.</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>
<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>
<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>
<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>
<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 <arel="license"href="https://github.com/twbs/bootstrap/blob/master/LICENSE"target="_blank">MIT</a>, documentation under <arel="license"href="https://creativecommons.org/licenses/by/3.0/"target="_blank">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>
<h2>Skip navigation</h2>
<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 before the navigation (for a simple explanation, see this <ahref="http://a11yproject.com/posts/skip-nav-links/">A11Y Project article on skip navigation links</a>). Using the <code>.sr-only</code> class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).</p>
<p>Due to long-standing shortcomings/bugs in Chrome (see <ahref="https://code.google.com/p/chromium/issues/detail?id=262171"title="Chromium bug tracker - Issue 262171: Focus should cycle from named anchor">issue 262171 in the Chromium bug tracker</a>) and Internet Explorer (see this article on <ahref="http://accessibleculture.org/articles/2010/05/in-page-links/">in-page links and focus order</a>), you will need to make sure that the target of your skip link is at least programmatically focusable by adding <code>tabindex="-1"</code>.</p>
<p>In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with <code>tabindex="-1"</code> when they are clicked with the mouse) with <code>#content:focus { outline: none; }</code>.</p>
<p>Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.</p>
</div>
{% highlight html %}
<body>
<ahref="#content"class="sr-only sr-only-focusable">Skip to main content</a>
...
<divclass="container"id="content"tabindex="-1">
<!-- The main page content -->
</div>
</body>
{% endhighlight %}
<h2>Nested headings</h2>
<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>
<h2>Color contrast</h2>
<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>
<h2>Additional resources</h2>
<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>
<h2id="support-browsers">Supported browsers</h2>
<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>
<h2id="support-ie8-ie9">Internet Explorer 8 and 9</h2>
<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>
<thclass="col-xs-4">Feature</th>
<thclass="col-xs-4">Internet Explorer 8</th>
<thclass="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>
<h2id="support-ie8-respondjs">Internet Explorer 8 and Respond.js</h2>
<p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
<h3id="respond-js-x-domain">Respond.js and cross-domain CSS</h3>
<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>
<h3id="respond-file-proto">Respond.js and <code>file://</code></h3>
<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>
<h3id="respond-import">Respond.js and <code>@import</code></h3>
<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>
<h2id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h2>
<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>
<h2id="support-ie8-font-face">Internet Explorer 8 and @font-face</h2>
<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>
<h2id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h2>
<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 %}
// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
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>
<h2id="support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</h2>
<h3>Overflow and scrolling</h3>
<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>
<h3>Virtual keyboards</h3>
<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>
<h3>Navbar Dropdowns</h3>
<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 <ahref="https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile">any other element which will fire a click event in iOS</a>).</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>
<h2id="support-sticky-hover-mobile">Sticky <code>:hover</code>/<code>:focus</code> on mobile</h2>
<p>Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make <code>:hover</code> "sticky". In other words, <code>:hover</code> styles start applying after tapping an element and only stop applying after the user taps some other element. This can cause Bootstrap's <code>:hover</code> states to become unwantedly "stuck" on such browsers. Some mobile browsers also make <code>:focus</code> similarly sticky. There is currently no simple workaround for these issues other than removing such styles entirely.</p>
<h2id="support-printing">Printing</h2>
<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>
<h3>Select menus</h3>
<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>
<h2id="support-validators">Validators</h2>
<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/%23bootstrap">##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>Developers should use the keyword <code>bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <ahref="https://www.npmjs.com/browse/keyword/bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</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/getbootstrap">@getbootstrap 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 <ahref="../examples/non-responsive/">this non-responsive example</a>.</p>
<h2>Steps to disable page responsiveness</h2>
<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>
<h2>Bootstrap template with responsiveness disabled</h2>
<p>We've applied these steps to an example. Read its source code to see the specific changes implemented.</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.
XhmikosR
