Commit 65dee490 authored by Boris Kocherov's avatar Boris Kocherov

remove bootstrap docs

parent bfa88f81
This diff is collapsed.
-
browser: >
Microsoft Edge
summary: >
Native browser tooltip for `title` shows on first keyboard focus (in addition to custom tooltip component)
upstream_bug: >
Edge#6793560
origin: >
Bootstrap#18692
-
browser: >
Microsoft Edge
summary: >
Hovered element still remains in `:hover` state after scrolling away.
upstream_bug: >
Edge#5381673
origin: >
Bootstrap#14211
-
browser: >
Microsoft Edge
summary: >
When hovering over a `<select>` menu item, the cursor for the element underneath the menu is displayed.
upstream_bug: >
Edge#817822
origin: >
Bootstrap#14528
-
browser: >
Microsoft Edge
summary: >
CSS `border-radius` sometimes causes lines of bleed-through of the `background-color` of the parent element.
upstream_bug: >
Edge#3342037
origin: >
Bootstrap#16671
-
browser: >
Microsoft Edge
summary: >
`background` of `<tr>` is only applied to first child cell instead of all cells in the row
upstream_bug: >
Edge#5865620
origin: >
Bootstrap#18504
-
browser: >
Microsoft Edge
summary: >
`@-ms-viewport{width: device-width;}` has side-effect of making scrollbars auto-hide
upstream_bug: >
Edge#7165383
origin: >
Bootstrap#18543
-
browser: >
Microsoft Edge
summary: >
Background color from lower layer bleeds through transparent border in some cases
upstream_bug: >
Edge#6274505
origin: >
Bootstrap#18228
-
browser: >
Microsoft Edge
summary: >
Hovering over descendant SVG element fires `mouseleave` event at ancestor
upstream_bug: >
Edge#7787318
origin: >
Bootstrap#19670
-
browser: >
Firefox
summary: >
`.table-bordered` with an empty `<tbody>` is missing borders.
upstream_bug: >
Mozilla#1023761
origin: >
Bootstrap#13453
-
browser: >
Firefox
summary: >
If the disabled state of a form control is changed via JavaScript, the normal state doesn't return after refreshing the page.
upstream_bug: >
Mozilla#654072
origin: >
Bootstrap#793
-
browser: >
Firefox
summary: >
`focus` events should not be fired at the `document` object
upstream_bug: >
Mozilla#1228802
origin: >
Bootstrap#18365
-
browser: >
Firefox
summary: >
Wide floated table doesn't wrap onto new line
upstream_bug: >
Mozilla#1277782
origin: >
Bootstrap#19839
-
browser: >
Firefox
summary: >
Mouse sometimes not within element for purposes of `mouseenter`/`mouseleave` when it's within SVG elements
upstream_bug: >
Mozilla#577785
origin: >
Bootstrap#19670
-
browser: >
Firefox
summary: >
`position: absolute` element that's wider than its column renders differently than other browsers
upstream_bug: >
Mozilla#1282363
origin: >
Bootstrap#20161
-
browser: >
Firefox (Windows)
summary: >
Right border of `<select>` menu is sometimes missing when screen is set to uncommon resolution
upstream_bug: >
Mozilla#545685
origin: >
Bootstrap#15990
-
browser: >
Firefox (OS X & Linux)
summary: >
Badge widget causes bottom border of Tabs widget to unexpectedly not overlap
upstream_bug: >
Mozilla#1259972
origin: >
Bootstrap#19626
-
browser: >
Chrome (Android)
summary: >
Tapping on an `<input>` in a scrollable overlay doesn't scroll the `<input>` into view
upstream_bug: >
Chromium#595210
origin: >
Bootstrap#17338
-
browser: >
Chrome (OS X)
summary: >
Clicking above `<input type="number">` increment button flashes the decrement button.
upstream_bug: >
Chromium#419108
origin: >
Offshoot of Bootstrap#8350 & Chromium#337668
-
browser: >
Chrome
summary: >
CSS infinite linear animation with alpha transparency leaks memory.
upstream_bug: >
Chromium#429375
origin: >
Bootstrap#14409
-
browser: >
Chrome
summary: >
`:focus` `outline` style causes cursor to not be displayed when toggling a `readonly` `<input>` to read-write.
upstream_bug: >
Chromium#465274
origin: >
Bootstrap#16022
-
browser: >
Chrome
summary: >
`table-cell` borders not overlapping despite `margin-right: -1px`
upstream_bug: >
Chromium#534750
origin: >
Bootstrap#17438, Bootstrap#14237
-
browser: >
Chrome
summary: >
Clicking scrollbar in `<select multiple>` with overflowed options will select nearby `<option>`
upstream_bug: >
Chromium#597642
origin: >
Bootstrap#19810
-
browser: >
Chrome
summary: >
Don't make `:hover` sticky on touch-friendly webpages
upstream_bug: >
Chromium#370155
origin: >
Bootstrap#12832
-
browser: >
Chrome (Windows & Linux)
summary: >
Animation glitch when returning to inactive tab after animations occurred while tab was hidden.
upstream_bug: >
Chromium#449180
origin: >
Bootstrap#15298
-
browser: >
Safari
summary: >
Safari
summary: >
`rem` units in media queries should be calculated using `font-size: initial`, not the root element's `font-size`
upstream_bug: >
WebKit#156684
origin: >
Bootstrap#17403
-
browser: >
Safari (OS X)
summary: >
`px`, `em`, and `rem` should all behave the same in media queries when page zoom is applied
upstream_bug: >
WebKit#156687
origin: >
Bootstrap#17403
-
browser: >
Safari (OS X)
summary: >
Weird button behavior with some `<input type="number">` elements.
upstream_bug: >
WebKit#137269, Safari#18834768
origin: >
Bootstrap#8350,
Normalize#283,
Chromium#337668
-
browser: >
Safari (OS X)
summary: >
Small font size when printing webpage with fixed-width `.container`.
upstream_bug: >
WebKit#138192, Safari#19435018
origin: >
Bootstrap#14868
-
browser: >
Safari (iPad)
summary: >
`<select>` menu on iPad causes shifting of hit-testing areas
upstream_bug: >
WebKit#150079, Safari#23082521
origin: >
Bootstrap#14975
-
browser: >
Safari (iOS)
summary: >
`transform: translate3d(0,0,0);` rendering bug.
upstream_bug: >
WebKit#138162, Safari#18804973
origin: >
Bootstrap#14603
-
browser: >
Safari (iOS)
summary: >
Text input's cursor doesn't move while scrolling the page.
upstream_bug: >
WebKit#138201, Safari#18819624
origin: >
Bootstrap#14708
-
browser: >
Safari (iOS)
summary: >
Can't move cursor to start of text after entering long string of text into `<input type="text">`
upstream_bug: >
WebKit#148061, Safari#22299624
origin: >
Bootstrap#16988
-
browser: >
Safari (iOS)
summary: >
`display: block` causes text of temporal `<input>`s to become vertically misaligned
upstream_bug: >
WebKit#139848, Safari#19434878
origin: >
Bootstrap#11266, Bootstrap#13098
-
browser: >
Safari (iOS)
summary: >
Tapping on `<body>` doesn't fire `click` events
upstream_bug: >
WebKit#151933
origin: >
Bootstrap#16028
-
browser: >
Safari (iOS)
summary: >
`position:fixed` is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari
upstream_bug: >
WebKit#153056
origin: >
Bootstrap#18859
-
browser: >
Safari (iOS)
summary: >
Tapping into an `<input>` within a `position:fixed` element scrolls to the top of the page
upstream_bug: >
WebKit#153224, Safari#24235301
origin: >
Bootstrap#17497
-
browser: >
Safari (iOS)
summary: >
`<body>` with `overflow:hidden` CSS is scrollable on iOS
upstream_bug: >
WebKit#153852
origin: >
Bootstrap#14839
-
browser: >
Safari (iOS)
summary: >
Scroll gesture in text field in `position:fixed` element sometimes scrolls `<body>` instead of scrollable ancestor
upstream_bug: >
WebKit#153856
origin: >
Bootstrap#14839
-
browser: >
Safari (iOS)
summary: >
Tapping from one `<input>` to another in an overlay can cause shaking/jiggling effect
upstream_bug: >
WebKit#158276
origin: >
Bootstrap#19927
-
browser: >
Safari (iOS)
summary: >
Modal with `-webkit-overflow-scrolling: touch` doesn't become scrollable after added text makes it taller
upstream_bug: >
WebKit#158342
origin: >
Bootstrap#17695
-
browser: >
Safari (iOS)
summary: >
Don't make `:hover` sticky on touch-friendly webpages
upstream_bug: >
WebKit#158517
origin: >
Bootstrap#12832
-
browser: >
Safari (iPad Pro)
summary: >
Rendering of descendants of `position: fixed` element gets clipped on iPad Pro in Landscape orientation
upstream_bug: >
WebKit#152637, Safari#24030853
origin: >
Bootstrap#18738
-
browser: >
Microsoft Edge
summary: >
Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
upstream_bug: >
UserVoice#12299532
origin: >
Bootstrap#19984
-
browser: >
Microsoft Edge
summary: >
Implement [sticky positioning](http://html5please.com/#position:sticky) from CSS Positioned Layout Level 3
upstream_bug: >
UserVoice#6263621
origin: >
Bootstrap#17021
-
browser: >
Firefox
summary: >
Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
upstream_bug: >
Mozilla#1264125
origin: >
Mozilla#1182856
-
browser: >
Firefox
summary: >
Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
upstream_bug: >
Mozilla#854148
origin: >
Bootstrap#20143
-
browser: >
Firefox
summary: >
Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
upstream_bug: >
Mozilla#840640
origin: >
Bootstrap#20175
-
browser: >
Chrome
summary: >
Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
upstream_bug: >
Chromium#304163
origin: >
Bootstrap#20143
-
browser: >
Chrome
summary: >
Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
upstream_bug: >
Chromium#576815
origin: >
Bootstrap#19984
-
browser: >
Chrome
summary: >
Implement [sticky positioning](http://html5please.com/#position:sticky) from CSS Positioned Layout Level 3
upstream_bug: >
Chromium#231752
origin: >
Bootstrap#17021
-
browser: >
Safari
summary: >
Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
upstream_bug: >
WebKit#64861
origin: >
Bootstrap#19984
-
browser: >
Safari
summary: >
Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
upstream_bug: >
WebKit#84635
origin: >
Bootstrap#20175
- name: Mark Otto
user: mdo
gravatar: bc4ab438f7a4ce1c406aadc688427f2c
- name: Jacob Thornton
user: fat
gravatar: a98244cbdacaf1c0b55499466002f7a8
- name: Chris Rebert
user: cvrebert
gravatar: edec428c425453955f770095a7d26c50
- name: Julian Thilo
user: juthilo
gravatar: 0f7dd3ce58a416be5685ea6194f82b11
- name: XhmikosR
user: xhmikosr
gravatar: e37759b1ea0125d4e97b1e00b5eed26f
- name: Heinrich Fenkart
user: hnrch02
gravatar: 0d53f5d3d3d28bd470f394d98f7ef48f
- name: Patrick H. Lauke
user: patrickhlauke
gravatar: 357f279672db832fc41a5a2f36559fcb
# This file is generated via Grunt task. **Do not edit directly.**
# See the 'build-glyphicons-data' task in Gruntfile.js.
- glyphicon-asterisk
- glyphicon-plus
- glyphicon-euro
- glyphicon-eur
- glyphicon-minus
- glyphicon-cloud
- glyphicon-envelope
- glyphicon-pencil
- glyphicon-glass
- glyphicon-music
- glyphicon-search
- glyphicon-heart
- glyphicon-star
- glyphicon-star-empty
- glyphicon-user
- glyphicon-film
- glyphicon-th-large
- glyphicon-th
- glyphicon-th-list
- glyphicon-ok
- glyphicon-remove
- glyphicon-zoom-in
- glyphicon-zoom-out
- glyphicon-off
- glyphicon-signal
- glyphicon-cog
- glyphicon-trash
- glyphicon-home
- glyphicon-file
- glyphicon-time
- glyphicon-road
- glyphicon-download-alt
- glyphicon-download
- glyphicon-upload
- glyphicon-inbox
- glyphicon-play-circle
- glyphicon-repeat
- glyphicon-refresh
- glyphicon-list-alt
- glyphicon-lock
- glyphicon-flag
- glyphicon-headphones
- glyphicon-volume-off
- glyphicon-volume-down
- glyphicon-volume-up
- glyphicon-qrcode
- glyphicon-barcode
- glyphicon-tag
- glyphicon-tags
- glyphicon-book
- glyphicon-bookmark
- glyphicon-print
- glyphicon-camera
- glyphicon-font
- glyphicon-bold
- glyphicon-italic
- glyphicon-text-height
- glyphicon-text-width
- glyphicon-align-left
- glyphicon-align-center
- glyphicon-align-right
- glyphicon-align-justify
- glyphicon-list
- glyphicon-indent-left
- glyphicon-indent-right
- glyphicon-facetime-video
- glyphicon-picture
- glyphicon-map-marker
- glyphicon-adjust
- glyphicon-tint
- glyphicon-edit
- glyphicon-share
- glyphicon-check
- glyphicon-move
- glyphicon-step-backward
- glyphicon-fast-backward
- glyphicon-backward
- glyphicon-play
- glyphicon-pause
- glyphicon-stop
- glyphicon-forward
- glyphicon-fast-forward
- glyphicon-step-forward
- glyphicon-eject
- glyphicon-chevron-left
- glyphicon-chevron-right
- glyphicon-plus-sign
- glyphicon-minus-sign
- glyphicon-remove-sign
- glyphicon-ok-sign
- glyphicon-question-sign
- glyphicon-info-sign
- glyphicon-screenshot
- glyphicon-remove-circle
- glyphicon-ok-circle
- glyphicon-ban-circle
- glyphicon-arrow-left
- glyphicon-arrow-right
- glyphicon-arrow-up
- glyphicon-arrow-down
- glyphicon-share-alt
- glyphicon-resize-full
- glyphicon-resize-small
- glyphicon-exclamation-sign
- glyphicon-gift
- glyphicon-leaf
- glyphicon-fire
- glyphicon-eye-open
- glyphicon-eye-close
- glyphicon-warning-sign
- glyphicon-plane
- glyphicon-calendar
- glyphicon-random
- glyphicon-comment
- glyphicon-magnet
- glyphicon-chevron-up
- glyphicon-chevron-down
- glyphicon-retweet
- glyphicon-shopping-cart
- glyphicon-folder-close
- glyphicon-folder-open
- glyphicon-resize-vertical
- glyphicon-resize-horizontal
- glyphicon-hdd
- glyphicon-bullhorn
- glyphicon-bell
- glyphicon-certificate
- glyphicon-thumbs-up
- glyphicon-thumbs-down
- glyphicon-hand-right
- glyphicon-hand-left
- glyphicon-hand-up
- glyphicon-hand-down
- glyphicon-circle-arrow-right
- glyphicon-circle-arrow-left
- glyphicon-circle-arrow-up
- glyphicon-circle-arrow-down
- glyphicon-globe
- glyphicon-wrench
- glyphicon-tasks
- glyphicon-filter
- glyphicon-briefcase
- glyphicon-fullscreen
- glyphicon-dashboard
- glyphicon-paperclip
- glyphicon-heart-empty
- glyphicon-link
- glyphicon-phone
- glyphicon-pushpin
- glyphicon-usd
- glyphicon-gbp
- glyphicon-sort
- glyphicon-sort-by-alphabet
- glyphicon-sort-by-alphabet-alt
- glyphicon-sort-by-order
- glyphicon-sort-by-order-alt
- glyphicon-sort-by-attributes
- glyphicon-sort-by-attributes-alt
- glyphicon-unchecked
- glyphicon-expand
- glyphicon-collapse-down
- glyphicon-collapse-up
- glyphicon-log-in
- glyphicon-flash
- glyphicon-log-out
- glyphicon-new-window
- glyphicon-record
- glyphicon-save
- glyphicon-open
- glyphicon-saved
- glyphicon-import
- glyphicon-export
- glyphicon-send
- glyphicon-floppy-disk
- glyphicon-floppy-saved
- glyphicon-floppy-remove
- glyphicon-floppy-save
- glyphicon-floppy-open
- glyphicon-credit-card
- glyphicon-transfer
- glyphicon-cutlery
- glyphicon-header
- glyphicon-compressed
- glyphicon-earphone
- glyphicon-phone-alt
- glyphicon-tower
- glyphicon-stats
- glyphicon-sd-video
- glyphicon-hd-video
- glyphicon-subtitles
- glyphicon-sound-stereo
- glyphicon-sound-dolby
- glyphicon-sound-5-1
- glyphicon-sound-6-1
- glyphicon-sound-7-1
- glyphicon-copyright-mark
- glyphicon-registration-mark
- glyphicon-cloud-download
- glyphicon-cloud-upload
- glyphicon-tree-conifer
- glyphicon-tree-deciduous
- glyphicon-cd
- glyphicon-save-file
- glyphicon-open-file
- glyphicon-level-up
- glyphicon-copy
- glyphicon-paste
- glyphicon-alert
- glyphicon-equalizer
- glyphicon-king
- glyphicon-queen
- glyphicon-pawn
- glyphicon-bishop
- glyphicon-knight
- glyphicon-baby-formula
- glyphicon-tent
- glyphicon-blackboard
- glyphicon-bed
- glyphicon-apple
- glyphicon-erase
- glyphicon-hourglass
- glyphicon-lamp
- glyphicon-duplicate
- glyphicon-piggy-bank
- glyphicon-scissors
- glyphicon-bitcoin
- glyphicon-btc
- glyphicon-xbt
- glyphicon-yen
- glyphicon-jpy
- glyphicon-ruble
- glyphicon-rub
- glyphicon-scale
- glyphicon-ice-lolly
- glyphicon-ice-lolly-tasted
- glyphicon-education
- glyphicon-option-horizontal
- glyphicon-option-vertical
- glyphicon-menu-hamburger
- glyphicon-modal-window
- glyphicon-oil
- glyphicon-grain
- glyphicon-sunglasses
- glyphicon-text-size
- glyphicon-text-color
- glyphicon-text-background
- glyphicon-object-align-top
- glyphicon-object-align-bottom
- glyphicon-object-align-horizontal
- glyphicon-object-align-left
- glyphicon-object-align-vertical
- glyphicon-object-align-right
- glyphicon-triangle-right
- glyphicon-triangle-left
- glyphicon-triangle-bottom
- glyphicon-triangle-top
- glyphicon-console
- glyphicon-superscript
- glyphicon-subscript
- glyphicon-menu-left
- glyphicon-menu-right
- glyphicon-menu-down
- glyphicon-menu-up
- name: Thomas McDonald
user: thomas-mcdonald
gravatar: 24cd55ab1a62ffb113ab8c02f64c9301
- name: Gleb Mazovetskiy
user: glebm
gravatar: 729f685b8e8d7e9feed18c177c82e59b
- name: Lyft
url: https://www.lyft.com
expo_url: http://expo.getbootstrap.com/2014/10/29/lyft/
img: lyft
- name: Vogue
url: http://www.vogue.com
expo_url: http://expo.getbootstrap.com/2014/09/30/vogue/
img: vogue
- name: Riot Design
url: http://riotdesign.eu/en/
expo_url: http://expo.getbootstrap.com/2014/03/13/riot-design/
img: riot
- name: Newsweek
url: http://www.newsweek.com/
expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
img: newsweek
- name: Chinese
code: zh
description: Bootstrap 中文文档
url: http://v3.bootcss.com/
- name: Chinese (Traditional)
code: zh-TW
description: Bootstrap 3 中文手冊
url: https://kkbruce.tw/bs3/
- name: Danish
code: da
description: Bootstrap på Dansk
url: http://getbootstrap.dk/
- name: French
code: fr
description: Bootstrap en Français
url: http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/
- name: German
code: de
description: Bootstrap auf Deutsch
url: http://holdirbootstrap.de/
- name: Italian
code: it
description: Bootstrap in Italiano
url: http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/
- name: Korean
code: ko
description: Bootstrap 한국어
url: http://bootstrapk.com/
- name: Brazilian Portuguese
code: pt-BR
description: Bootstrap em Português do Brasil
url: http://bootstrapbrasil.github.io/
- name: Russian
code: ru
description: Bootstrap по-русски
url: http://www.oneskyapp.com/ru/docs/bootstrap/
- name: Spanish
code: es
description: Bootstrap en Español
url: http://www.oneskyapp.com/es/docs/bootstrap/
- name: Turkish
code: tr
description: Türkçe Bootstrap
url: http://www.trbootstrap.com
- name: Ukrainian
code: uk
description: Bootstrap українською
url: http://twbs.docs.org.ua
- name: Vietnamese
code: vi
description: Bootstrap bằng tiếng Việt
url: http://getbootstrap.com.vn
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
<div class="bs-docs-section">
<h1 id="alerts" class="page-header">Alerts</h1>
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
<h2 id="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>
<div class="bs-callout bs-callout-info" id="callout-alerts-no-default">
<h4>No default class</h4>
<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
</div>
<div class="bs-example" data-example-id="simple-alerts">
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</div>
{% highlight html %}
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
{% endhighlight %}
<h2 id="alerts-dismissible">Dismissible alerts</h2>
<p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
<div class="bs-callout bs-callout-info" id="callout-alerts-dismiss-plugin">
<h4>Requires JavaScript alert plugin</h4>
<p>For fully functioning, dismissible alerts, you must use the <a href="../javascript/#alerts">alerts JavaScript plugin</a>.</p>
</div>
<div class="bs-example" data-example-id="dismissible-alert-css">
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</div>
{% highlight html %}
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-warning" id="callout-alerts-dismiss-use-button">
<h4>Ensure proper behavior across all devices</h4>
<p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
</div>
<h2 id="alerts-links">Links in alerts</h2>
<p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
<div class="bs-example" data-example-id="alerts-with-links">
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
</div>
{% highlight html %}
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="badges" class="page-header">Badges</h1>
<p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
<div class="bs-example" data-example-id="simple-badges">
<a href="#">Inbox <span class="badge">42</span></a>
<br><br>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
</div>
{% highlight html %}
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
{% endhighlight %}
<h4>Self collapsing</h4>
<p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
<div class="bs-callout bs-callout-danger" id="callout-badges-ie8-empty">
<h4>Cross-browser compatibility</h4>
<p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
</div>
<h4>Adapts to active nav states</h4>
<p>Built-in styles are included for placing badges in active states in pill navigations.</p>
<div class="bs-example" data-example-id="badges-in-pills">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="breadcrumbs" class="page-header">Breadcrumbs</h1>
<p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
<p>Separators are automatically added in CSS through <code>:before</code> and <code>content</code>.</p>
<div class="bs-example" data-example-id="simple-breadcrumbs">
<ol class="breadcrumb">
<li class="active">Home</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li class="active">Library</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
</div>
{% highlight html %}
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="dropdowns" class="page-header">Dropdowns</h1>
<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
<h2 id="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>
<div class="bs-example" data-example-id="static-dropdown">
<div class="dropdown clearfix">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
{% endhighlight %}
<p>Dropdown menus can be changed to expand upwards (instead of downwards) by adding <code>.dropup</code> to the parent.</p>
<div class="bs-example" data-example-id="static-dropup">
<div class="dropup clearfix">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
{% endhighlight %}
<h2 id="dropdowns-alignment">Alignment</h2>
<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>
<div class="bs-callout bs-callout-warning" id="callout-dropdown-positioning">
<h4>May require additional positioning</h4>
<p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p>
</div>
<div class="bs-callout bs-callout-warning" id="callout-dropdown-pull-right">
<h4>Deprecated <code>.pull-right</code> alignment</h4>
<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>
</div>
{% highlight html %}
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
{% endhighlight %}
<h2 id="dropdowns-headers">Headers</h2>
<p>Add a header to label sections of actions in any dropdown menu.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li class="dropdown-header">Dropdown header</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
{% endhighlight %}
<h2 id="dropdowns-divider">Divider</h2>
<p>Add a divider to separate series of links in a dropdown menu.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
{% endhighlight %}
<h2 id="dropdowns-disabled">Disabled menu items</h2>
<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="glyphicons" class="page-header">Glyphicons</h1>
<h2 id="glyphicons-glyphs">Available glyphs</h2>
<p>Includes over 250 glyphs in font format from the Glyphicon Halflings set. <a href="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 <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
<div class="bs-glyphicons">
<ul class="bs-glyphicons-list">
{% for iconClassName in site.data.glyphicons %}
<li>
<span class="glyphicon {{ iconClassName }}" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon {{ iconClassName }}</span>
</li>
{% endfor %}
</ul>
</div>
<h2 id="glyphicons-how-to-use">How to use</h2>
<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>
<div class="bs-callout bs-callout-danger" id="callout-glyphicons-dont-mix">
<h4>Don't mix with other components</h4>
<p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code>&lt;span&gt;</code> and apply the icon classes to the <code>&lt;span&gt;</code>.</p>
</div>
<div class="bs-callout bs-callout-danger" id="callout-glyphicons-empty-only">
<h4>Only for use on empty elements</h4>
<p>Icon classes should only be used on elements that contain no text content and have no child elements.</p>
</div>
<div class="bs-callout bs-callout-info" id="callout-glyphicons-location">
<h4>Changing the icon font location</h4>
<p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p>
<ul>
<li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li>
<li>Utilize the <a href="http://lesscss.org/usage/#command-line-usage-relative-urls">relative URLs option</a> provided by the Less compiler.</li>
<li>Change the <code>url()</code> paths in the compiled CSS.</li>
</ul>
<p>Use whatever option best suits your specific development setup.</p>
</div>
<div class="bs-callout bs-callout-warning" id="callout-glyphicons-accessibility">
<h4>Accessible icons</h4>
<p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p>
<p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p>
<p>If you're creating controls with no other text (such as a <code>&lt;button&gt;</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>
</div>
{% highlight html %}
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
{% endhighlight %}
<h2 id="glyphicons-examples">Examples</h2>
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
<div class="bs-example" data-example-id="glyphicons-general">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default" aria-label="Justify"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
</div>
</div>
<div class="btn-toolbar" role="toolbar">
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
<button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
</div>
</div>
{% highlight html %}
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
{% endhighlight %}
<p>An icon used in an <a href="#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>
<div class="bs-example" data-example-id="glyphicons-accessibility">
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
</div>
{% highlight html %}
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="jumbotron" class="page-header">Jumbotron</h1>
<p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.</p>
<div class="bs-example" data-example-id="simple-jumbotron">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
{% highlight html %}
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
{% endhighlight %}
<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>
{% highlight html %}
<div class="jumbotron">
<div class="container">
...
</div>
</div>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="labels" class="page-header">Labels</h1>
<h2>Example</h2>
<div class="bs-example" data-example-id="labels-in-headings">
<h1>Example heading <span class="label label-default">New</span></h1>
<h2>Example heading <span class="label label-default">New</span></h2>
<h3>Example heading <span class="label label-default">New</span></h3>
<h4>Example heading <span class="label label-default">New</span></h4>
<h5>Example heading <span class="label label-default">New</span></h5>
<h6>Example heading <span class="label label-default">New</span></h6>
</div>
{% highlight html %}
<h3>Example heading <span class="label label-default">New</span></h3>
{% endhighlight %}
<h2>Available variations</h2>
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
<div class="bs-example" data-example-id="label-variants">
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</div>
{% highlight html %}
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
{% endhighlight %}
<div class="bs-callout bs-callout-info" id="callout-labels-inline-block">
<h4>Have tons of labels?</h4>
<p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
</div>
</div>
<div class="bs-docs-section">
<h1 id="list-group" class="page-header">List group</h1>
<p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
<h2 id="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>
<div class="bs-example" data-example-id="simple-list-group">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
{% highlight html %}
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
{% endhighlight %}
<h2 id="list-group-badges">Badges</h2>
<p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
<div class="bs-example" data-example-id="list-group-badges">
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="badge">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="badge">1</span>
Morbi leo risus
</li>
</ul>
</div>
{% highlight html %}
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
{% endhighlight %}
<h2 id="list-group-linked">Linked items</h2>
<p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p>
<div class="bs-example" data-example-id="list-group-anchors">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
{% highlight html %}
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
{% endhighlight %}
<h2 id="list-group-buttons">Button items</h2>
<p>List group items may be buttons instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element. <strong class="text-danger">Don't use the standard <code>.btn</code> classes here.</strong></p>
<div class="bs-example" data-example-id="list-group-btns">
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
</div>
{% highlight html %}
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
{% endhighlight %}
<h2 id="list-group-disabled">Disabled items</h2>
<p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p>
<div class="bs-example" data-example-id="list-group-disabled">
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
{% highlight html %}
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
{% endhighlight %}
<h2 id="list-group-contextual-classes">Contextual classes</h2>
<p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p>
<div class="bs-example" data-example-id="list-group-variants">
<div class="row">
<div class="col-sm-6">
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
</div>
<div class="col-sm-6">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
</div>
</div>
</div>
{% highlight html %}
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
{% endhighlight %}
<h2 id="list-group-custom-content">Custom content</h2>
<p>Add nearly any HTML within, even for linked list groups like the one below.</p>
<div class="bs-example" data-example-id="list-group-custom-content">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
</div>
{% highlight html %}
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="media" class="page-header">Media object</h1>
<p class="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>
<h2 id="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>
<div class="bs-example" data-example-id="default-media">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="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>
<div class="media">
<div class="media-body">
<h4 class="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.
</div>
<div class="media-right">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="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.
</div>
<div class="media-right">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
</div>
</div><!-- /.bs-example -->
{% highlight html %}
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
{% endhighlight %}
<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>
<h2 id="media-alignment">Media alignment</h2>
<p>The images or other media can be aligned top, middle, or bottom. The default is top aligned.</p>
<div class="bs-example" data-example-id="media-alignment">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Top aligned media</h4>
<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>
</div>
</div>
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
<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>
</div>
</div>
<div class="media">
<div class="media-left media-bottom">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Bottom aligned media</h4>
<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>
</div>
</div>
</div>
{% highlight html %}
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
{% endhighlight %}
<h2 id="media-list">Media list</h2>
<p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
<div class="bs-example" data-example-id="media-list">
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<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>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="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.
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="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.
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="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.
</div>
</div>
</div>
</li>
</ul>
</div>
{% highlight html %}
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
{% endhighlight %}
</div>
This diff is collapsed.
<div class="bs-docs-section">
<h1 id="nav" class="page-header">Navs</h1>
<p class="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>
<div class="bs-callout bs-callout-info" id="callout-navs-tabs-plugin">
<h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p>
</div>
<div class="bs-callout bs-callout-warning" id="callout-navs-accessibility">
<h4>Make navs used as navigation accessible</h4>
<p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code>&lt;ul&gt;</code>, or wrap a <code>&lt;nav&gt;</code> element around the whole navigation. Do not add the role to the <code>&lt;ul&gt;</code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
</div>
<h2 id="nav-tabs">Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<div class="bs-example" data-example-id="simple-nav-tabs">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
{% endhighlight %}
<h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-example" data-example-id="simple-nav-pills">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
{% endhighlight %}
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-example" data-example-id="simple-nav-stacked">
<ul class="nav nav-pills nav-stacked nav-pills-stacked-example">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills nav-stacked">
...
</ul>
{% endhighlight %}
<h2 id="nav-justified">Justified</h2>
<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><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
<div class="bs-callout bs-callout-warning" id="callout-navs-justified-safari">
<h4>Safari and responsive justified navs</h4>
<p>As of v9.1.2, 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 <a href="../examples/justified-nav/">justified nav example</a>.</p>
</div>
<div class="bs-example" data-example-id="simple-nav-justified">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<br>
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
{% endhighlight %}
<h2 id="nav-disabled-links">Disabled links</h2>
<p>For any nav component (tabs or pills), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
<div class="bs-callout bs-callout-warning" id="callout-navs-anchor-disabled">
<h4>Link functionality not impacted</h4>
<p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
</div>
<div class="bs-example" data-example-id="disabled-nav-link">
<ul class="nav nav-pills">
<li role="presentation"><a href="#">Clickable link</a></li>
<li role="presentation"><a href="#">Clickable link</a></li>
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
{% endhighlight %}
<h2 id="nav-dropdowns">Using dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>
<div class="bs-example" data-example-id="nav-tabs-with-dropdown">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
{% endhighlight %}
<h3>Pills with dropdowns</h3>
<div class="bs-example" data-example-id="nav-pills-with-dropdown">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /example -->
{% highlight html %}
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="page-header" class="page-header">Page header</h1>
<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>
<div class="bs-example" data-example-id="simple-page-header">
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
</div>
{% highlight html %}
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="pagination" class="page-header">Pagination</h1>
<p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="#pagination-pager">pager alternative</a>.</p>
<h2 id="pagination-default">Default pagination</h2>
<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>
<div class="bs-example" data-example-id="simple-pagination">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
</div>
{% highlight html %}
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
{% endhighlight %}
<div class="bs-callout bs-callout-info" id="callout-pagination-label">
<h4>Labelling the pagination component</h4>
<p>The pagination component should be wrapped in a <code>&lt;nav&gt;</code> element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive <code>aria-label</code> for the <code>&lt;nav&gt;</code> which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code>aria-label="Search results pages"</code>.</p>
</div>
<h3>Disabled and active states</h3>
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<div class="bs-example" data-example-id="disabled-active-pagination">
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
{% endhighlight %}
<p>We recommend that you swap out active or disabled anchors for <code>&lt;span&gt;</code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
{% highlight html %}
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">&laquo;</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
{% endhighlight %}
<h3>Sizing</h3>
<p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
<div class="bs-example" data-example-id="pagination-sizing">
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
{% endhighlight %}
<h2 id="pagination-pager">Pager</h2>
<p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
<h3>Default example</h3>
<p>By default, the pager centers links.</p>
<div class="bs-example" data-example-id="simple-pager">
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
{% endhighlight %}
<h3>Aligned links</h3>
<p>Alternatively, you can align each link to the sides:</p>
<div class="bs-example" data-example-id="aligned-pager-links">
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
{% endhighlight %}
<h3>Optional disabled state</h3>
<p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
<div class="bs-example" data-example-id="disabled-pager">
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="panels" class="page-header">Panels</h1>
<p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
<h2 id="panels-basic">Basic example</h2>
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<div class="bs-example" data-example-id="simple-panel">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
{% highlight html %}
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
{% endhighlight %}
<h2 id="panels-heading">Panel with heading</h2>
<p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading. However, the font sizes of <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> are overridden by <code>.panel-heading</code>.</p>
<p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
<div class="bs-example" data-example-id="panel-with-heading">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
{% highlight html %}
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
{% endhighlight %}
<h2 id="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>
<div class="bs-example" data-example-id="panel-with-footer">
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
{% highlight html %}
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
{% endhighlight %}
<h2 id="panels-alternatives">Contextual alternatives</h2>
<p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
<div class="bs-example" data-example-id="contextual-panels">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
{% highlight html %}
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
{% endhighlight %}
<h2 id="panels-tables">With tables</h2>
<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>
<div class="bs-example" data-example-id="table-within-panel">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<!-- Table -->
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
{% highlight html %}
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
{% endhighlight %}
<p>If there is no panel body, the component moves from panel header to table without interruption.</p>
<div class="bs-example" data-example-id="panel-without-body-with-table">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
{% highlight html %}
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
{% endhighlight %}
<h2 id="panels-list-group">With list groups</h2>
<p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
<div class="bs-example" data-example-id="panel-with-list-group">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
{% highlight html %}
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="responsive-embed" class="page-header">Responsive embed</h1>
<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>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code>, <code>&lt;video&gt;</code>, and <code>&lt;object&gt;</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>&lt;iframe&gt;</code>s as we override that for you.</p>
<div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
</div>
{% highlight html %}
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="thumbnails" class="page-header">Thumbnails</h1>
<p class="lead">Extend Bootstrap's <a href="../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 <a href="http://masonry.desandro.com">Masonry</a>, <a href="http://isotope.metafizzy.co">Isotope</a>, or <a href="http://salvattore.com">Salvattore</a>.</p>
<h2 id="thumbnails-default">Default example</h2>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<div class="bs-example" data-example-id="simple-thumbnails">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
</a>
</div>
</div>
</div><!-- /.bs-example -->
{% highlight html %}
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
{% endhighlight %}
<h2 id="thumbnails-custom-content">Custom content</h2>
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<div class="bs-example" data-example-id="thumbnails-with-custom-content">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
<div class="caption">
<h3>Thumbnail label</h3>
<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><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
<div class="caption">
<h3>Thumbnail label</h3>
<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><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
<div class="caption">
<h3>Thumbnail label</h3>
<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><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
</div><!-- /.bs-example -->
{% highlight html %}
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="wells" class="page-header">Wells</h1>
<h2>Default well</h2>
<p>Use the well as a simple effect on an element to give it an inset effect.</p>
<div class="bs-example" data-example-id="default-well">
<div class="well">
Look, I'm in a well!
</div>
</div>
{% highlight html %}
<div class="well">...</div>
{% endhighlight %}
<h2>Optional classes</h2>
<p>Control padding and rounded corners with two optional modifier classes.</p>
<div class="bs-example" data-example-id="large-well">
<div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
{% highlight html %}
<div class="well well-lg">...</div>
{% endhighlight %}
<div class="bs-example" data-example-id="small-well">
<div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
{% highlight html %}
<div class="well well-sm">...</div>
{% endhighlight %}
</div>
This diff is collapsed.
<div class="bs-docs-section">
<h1 id="code" class="page-header">Code</h1>
<h2 id="code-inline">Inline</h2>
<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<div class="bs-example" data-example-id="inline-code">
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
{% highlight html %}
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2 id="code-user-input">User input</h2>
<p>Use the <code>&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p>
<div class="bs-example" data-example-id="simple-kbd">
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</div>
{% highlight html %}
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
{% endhighlight %}
<h2 id="code-block">Basic block</h2>
<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<div class="bs-example" data-example-id="simple-pre">
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
</div>
{% highlight html %}
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
{% endhighlight %}
<p>You may optionally add the <code>.pre-scrollable</code> class, which will set a max-height of 350px and provide a y-axis scrollbar.</p>
<h2 id="code-variables">Variables</h2>
<p>For indicating variables use the <code>&lt;var&gt;</code> tag.</p>
<div class="bs-example" data-example-id="simple-var">
<p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
</div>
{% highlight html %}
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
{% endhighlight %}
<h2 id="code-sample-output">Sample output</h2>
<p>For indicating blocks sample output from a program use the <code>&lt;samp&gt;</code> tag.</p>
<div class="bs-example" data-example-id="simple-samp">
<p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>
</div>
{% highlight html %}
<samp>This text is meant to be treated as sample output from a computer program.</samp>
{% endhighlight %}
</div>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<div class="bs-docs-section">
<h1 id="images" class="page-header">Images</h1>
<h2 id="images-responsive">Responsive images</h2>
<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>. <a href="../css/#helper-classes-center">See the helper classes section</a> for more details about <code>.center-block</code> usage.</p>
<div class="bs-callout bs-callout-warning" id="callout-images-ie-svg">
<h4>SVG images and IE 8-10</h4>
<p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
</div>
{% highlight html %}
<img src="..." class="img-responsive" alt="Responsive image">
{% endhighlight %}
<h2 id="images-shapes">Image shapes</h2>
<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
<div class="bs-callout bs-callout-danger" id="callout-images-ie-rounded-corners">
<h4>Cross-browser compatibility</h4>
<p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
</div>
<div class="bs-example bs-example-images" data-example-id="image-shapes">
<img data-src="holder.js/140x140" class="img-rounded" alt="A generic square placeholder image with rounded corners">
<img data-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">
<img data-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">
</div>
{% highlight html %}
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
{% endhighlight %}
</div>
This diff is collapsed.
<div class="bs-docs-section">
<h1 id="overview" class="page-header">Overview</h1>
<p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<h2 id="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>
<html lang="en">
...
</html>
{% endhighlight %}
<h2 id="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>&lt;head&gt;</code>.</p>
{% highlight html %}
<meta name="viewport" content="width=device-width, initial-scale=1">
{% endhighlight %}
<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>
{% highlight html %}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
{% endhighlight %}
<h2 id="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>
<h2 id="overview-normalize">Normalize.css</h2>
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="https://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
<h2 id="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 %}
<div class="container">
...
</div>
{% endhighlight %}
<p>Use <code>.container-fluid</code> for a full width container, spanning the entire width of your viewport.</p>
{% highlight html %}
<div class="container-fluid">
...
</div>
{% endhighlight %}
</div>
<div class="bs-docs-section">
<h1 id="sass" class="page-header">Using Sass</h1>
<p class="lead">While Bootstrap is built on Less, it also has an <a href="{{ site.sass_repo }}">official Sass port</a>. We maintain it in a separate GitHub repository and handle updates with a conversion script.</p>
<h2 id="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>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Path</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><code>lib/</code></th>
<td>Ruby gem code (Sass configuration, Rails and Compass integrations)</td>
</tr>
<tr>
<th scope="row"><code>tasks/</code></th>
<td>Converter scripts (turning upstream Less to Sass)</td>
</tr>
<tr>
<th scope="row"><code>test/</code></th>
<td>Compilation tests</td>
</tr>
<tr>
<th scope="row"><code>templates/</code></th>
<td>Compass package manifest</td>
</tr>
<tr>
<th scope="row"><code>vendor/assets/</code></th>
<td>Sass, JavaScript, and font files</td>
</tr>
<tr>
<th scope="row"><code>Rakefile</code></th>
<td>Internal tasks, such as rake and convert</td>
</tr>
</tbody>
</table>
</div>
<p>Visit the <a href="{{ site.sass_repo }}">Sass port's GitHub repository</a> to see these files in action.</p>
<h2 id="sass-installation">Installation</h2>
<p>For information on how to install and use Bootstrap for Sass, consult the <a href="{{ 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>
<a class="btn btn-lg btn-outline" href="{{ site.sass_repo }}">Bootstrap for Sass</a>
</p>
</div>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<div class="bs-docs-section">
<h1 id="accessibility" class="page-header">Accessibility</h1>
<p class="lead">Bootstrap follows common web standards and&mdash;with minimal extra effort&mdash;can be used to create sites that are accessible to those using <abbr title="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 <a href="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>
<div class="bs-callout bs-callout-danger" id="callout-skiplinks">
<p>Due to long-standing shortcomings/bugs in Chrome (see <a href="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 <a href="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>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
...
<div class="container" id="content" tabindex="-1">
<!-- The main page content -->
</div>
</body>
{% endhighlight %}
<h2>Nested headings</h2>
<p>When nesting headings (<code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code>), your primary document header should be an <code>&lt;h1&gt;</code>. Subsequent headings should make logical use of <code>&lt;h2&gt;</code> - <code>&lt;h6&gt;</code> such that screen readers can construct a table of contents for your pages.</p>
<p>Learn more at <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="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 <a href="../css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="../css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="../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 <a href="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><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
<li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome's Accessibility Developer Tools extension</a></li>
<li><a href="http://www.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a></li>
<li><a href="http://a11yproject.com/">The A11Y Project</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
</ul>
</div>
<div class="bs-docs-section">
<h1 id="community" class="page-header">Community</h1>
<p class="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 <a href="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 <a href="irc://irc.freenode.net/%23bootstrap">##bootstrap channel</a>.</li>
<li>For help using Bootstrap, ask on <a href="https://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 <a href="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 <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
</ul>
<p>You can also follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
</div>
<div class="bs-docs-section">
<h1 id="tools" class="page-header">Tools</h1>
<h2 id="tools-bootlint">Bootlint</h2>
<p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> is the official Bootstrap HTML <a href="http://en.wikipedia.org/wiki/Lint_(software)">linter</a> tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.</p>
</div>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<li>
<a href="#history">History</a>
</li>
<li>
<a href="#team">Team</a>
</li>
<li>
<a href="#brand">Brand guidelines</a>
</li>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment