// Docs task.
grunt.registerTask('docs-css', ['autoprefixer:docs', 'autoprefixer:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
- grunt.registerTask('lint-docs-css', ['csslint:docs', 'csslint:examples']);
- grunt.registerTask('docs-js', ['uglify:docsJs', 'uglify:customize']);
- grunt.registerTask('lint-docs-js', ['jshint:assets', 'jscs:assets']);
- grunt.registerTask('docs', ['docs-css', 'lint-docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs', 'build-glyphicons-data', 'build-customizer']);
+ grunt.registerTask('docs-js', ['uglify:docsJs']);
+ grunt.registerTask('lint-docs-js', ['jscs:assets']);
+ grunt.registerTask('docs', ['docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);
- grunt.registerTask('docs-github', ['jekyll:github']);
+ grunt.registerTask('prep-release', ['dist', 'docs', 'jekyll:github', 'htmlmin', 'compress']);
// Task for updating the cached npm packages used by the Travis build (which are controlled by test-infra/npm-shrinkwrap.json).
// This task should be run and the updated file should be committed whenever Bootstrap's dependencies change.
# [Bootstrap](http://getbootstrap.com)
- 
- [](https://www.npmjs.com/package/bootstrap)
- [](https://rubygems.org/gems/bootstrap)
- [](https://travis-ci.org/twbs/bootstrap)
- [](https://david-dm.org/twbs/bootstrap#info=devDependencies)
++
+ [](https://bootstrap-slack.herokuapp.com)
+ 
+ [](https://www.npmjs.com/package/bootstrap)
++[](https://rubygems.org/gems/bootstrap)
+ [](https://travis-ci.org/twbs/bootstrap)
+ [](https://david-dm.org/twbs/bootstrap#info=devDependencies)
[](https://saucelabs.com/u/bootstrap)
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thornton](https://twitter.com/fat), and maintained by the [core team](https://github.com/orgs/twbs/people) with the massive support and involvement of the community.
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
-│ ├── bootstrap.min.css
-│ ├── bootstrap-theme.css
-│ ├── bootstrap-theme.css.map
-│ └── bootstrap-theme.min.css
-├── js/
-│ ├── bootstrap.js
-│ └── bootstrap.min.js
-└── fonts/
- ├── glyphicons-halflings-regular.eot
- ├── glyphicons-halflings-regular.svg
- ├── glyphicons-halflings-regular.ttf
- ├── glyphicons-halflings-regular.woff
- └── glyphicons-halflings-regular.woff2
+│ └── bootstrap.min.css
+└── js/
+ ├── bootstrap.js
+ └── bootstrap.min.js
```
- We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/chrome-developer-tools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
-We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.
--
++We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
## Bugs and feature requests
--- /dev/null
--- /dev/null
++@mixin reset-text {
++ font-family: $font-family-base;
++ // We deliberately do NOT reset font-size.
++ font-style: normal;
++ font-weight: normal;
++ letter-spacing: normal;
++ line-break: auto;
++ line-height: $line-height-base;
++ text-align: left; // Fallback for where `start` is not supported
++ text-align: start;
++ text-decoration: none;
++ text-shadow: none;
++ text-transform: none;
++ white-space: normal;
++ word-break: normal;
++ word-spacing: normal;
++ word-wrap: normal;
++}
"web"
],
"homepage": "http://getbootstrap.com",
+ "license": "MIT",
+ "moduleType": "globals",
"main": [
- "less/bootstrap.less",
+ "scss/bootstrap.scss",
- "dist/css/bootstrap.css",
"dist/js/bootstrap.js"
],
"ignore": [
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
{% if site.github %}
- <script src="../dist/js/bootstrap.min.js"></script>
+ <script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
{% else %}
- <script src="../dist/js/bootstrap.js"></script>
+ <script src="{{ site.baseurl }}/dist/js/bootstrap.js"></script>
{% endif %}
{% if site.github %}
-<div class="bs-docs-social">
- <ul class="bs-docs-social-buttons">
+<div class="bd-social">
+ <ul class="bd-social-buttons">
<li>
- <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" width="100" height="20" title="Star on GitHub"></iframe>
+ <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" width="100" height="20" title="Star on GitHub"></iframe>
</li>
<li>
- <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" width="102" height="20" title="Fork on GitHub"></iframe>
+ <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" width="102" height="20" title="Fork on GitHub"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/getbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @getbootstrap</a>
--- /dev/null
- <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user={{ member.user }}&type=follow"></iframe>
+---
+layout: page
+title: Team
+---
+
+Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
+
+<div class="list-group bd-team">
+ {% for member in site.data.core-team %}
+ <div class="list-group-item">
- <img src="http://www.gravatar.com/avatar/{{ member.gravatar }}" alt="@{{ member.user }}" width="32" height="32">
++ <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user={{ member.user }}&type=follow"></iframe>
+ <a class="team-member" href="https://github.com/{{ member.user }}">
++ <img src="https://secure.gravatar.com/avatar/{{ member.gravatar }}" alt="@{{ member.user }}" width="32" height="32">
+ <strong>{{ member.name }}</strong> <small>@{{ member.user }}</small>
+ </a>
+ </div>
+ {% endfor %}
+</div>
+
+Get involved with Bootstrap development by [opening an issue](https://github.com/twbs/bootstrap/issues/new) or submitting a pull request. Read our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md) for information on how we develop.
+++ /dev/null
--// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
--// IT'S ALL JUST JUNK FOR OUR DOCS!
--// ++++++++++++++++++++++++++++++++++++++++++
--
--/*!
-- * JavaScript for Bootstrap's docs (http://getbootstrap.com)
- * Copyright 2011-2014 Twitter, Inc.
- * Copyright 2011-2015 Twitter, Inc.
-- * Licensed under the Creative Commons Attribution 3.0 Unported License. For
- * details, see http://creativecommons.org/licenses/by/3.0/.
- * details, see https://creativecommons.org/licenses/by/3.0/.
-- */
--
- /* global ZeroClipboard, addAnchors */
-/* global ZeroClipboard, anchors */
--
--!function ($) {
-- 'use strict';
--
-- $(function () {
--
- // // Scrollspy
- // var $window = $(window)
- // var $body = $(document.body)
- // Scrollspy
- var $window = $(window)
- var $body = $(document.body)
--
- // $body.scrollspy({
- // target: '.active .bd-sidenav'
- // })
- // $window.on('load', function () {
- // $body.scrollspy('refresh')
- // })
- $body.scrollspy({
- target: '.bs-docs-sidebar'
- })
- $window.on('load', function () {
- $body.scrollspy('refresh')
- })
--
-- // Kill links
- // $('[href=#]').click(function (e) {
- // e.preventDefault()
- // })
- $('.bs-docs-container [href=#]').click(function (e) {
- e.preventDefault()
- })
-
- // Sidenav affixing
- setTimeout(function () {
- var $sideBar = $('.bs-docs-sidebar')
-
- $sideBar.affix({
- offset: {
- top: function () {
- var offsetTop = $sideBar.offset().top
- var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10)
- var navOuterHeight = $('.bs-docs-nav').height()
-
- return (this.top = offsetTop - navOuterHeight - sideBarMargin)
- },
- bottom: function () {
- return (this.bottom = $('.bs-docs-footer').outerHeight(true))
- }
- }
- })
- }, 100)
-
- setTimeout(function () {
- $('.bs-top').affix()
- }, 100)
-
- // theme toggler
- ;(function () {
- var $stylesheetLink = $('#bs-theme-stylesheet')
- var $themeBtn = $('.bs-docs-theme-toggle')
-
- var activateTheme = function () {
- $stylesheetLink.attr('href', $stylesheetLink.attr('data-href'))
- $themeBtn.text('Disable theme preview')
- localStorage.setItem('previewTheme', true)
- }
-
- if (localStorage.getItem('previewTheme')) {
- activateTheme()
- }
-
- $themeBtn.click(function () {
- var href = $stylesheetLink.attr('href')
- if (!href || href.indexOf('data') === 0) {
- activateTheme()
- } else {
- $stylesheetLink.attr('href', '')
- $themeBtn.text('Preview theme')
- localStorage.removeItem('previewTheme')
- }
- })
- })();
--
-- // Tooltip and popover demos
-- $('.tooltip-demo').tooltip({
-- selector: '[data-toggle="tooltip"]',
-- container: 'body'
-- })
-- $('.popover-demo').popover({
-- selector: '[data-toggle="popover"]',
-- container: 'body'
-- })
--
-- // Demos within modals
-- $('.tooltip-test').tooltip()
-- $('.popover-test').popover()
--
-- // Popover demos
- $('.bd-popover').popover()
- $('.bs-docs-popover').popover()
--
-- // Button state demo
-- $('#loading-example-btn').on('click', function () {
-- var $btn = $(this)
- btn.button('loading')
- $btn.button('loading')
-- setTimeout(function () {
- btn.button('reset')
- $btn.button('reset')
-- }, 3000)
-- })
--
-- // Modal relatedTarget demo
-- $('#exampleModal').on('show.bs.modal', function (event) {
- var $button = $(event.relatedTarget) // Button that triggered the modal
- var recipient = button.data('whatever') // Extract info from data-* attributes
- var $button = $(event.relatedTarget) // Button that triggered the modal
- var recipient = $button.data('whatever') // Extract info from data-* attributes
-- // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
-- // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
-- var $modal = $(this)
- modal.find('.modal-title').text('New message to ' + recipient)
- modal.find('.modal-body input').val(recipient)
- $modal.find('.modal-title').text('New message to ' + recipient)
- $modal.find('.modal-body input').val(recipient)
-- })
--
-- // Activate animated progress bar
- $('.bd-activate-animated-progressbar').on('click', function () {
- $(this).prev('.progress-striped').toggleClass('progress-animated')
- $('.bs-docs-activate-animated-progressbar').on('click', function () {
- $(this).siblings('.progress').find('.progress-bar-striped').toggleClass('active')
-- })
-
- // Custom indeterminate checkbox
- $('.bs-example-indeterminate input').prop('indeterminate', true)
--
-- // Config ZeroClipboard
-- ZeroClipboard.config({
-- moviePath: '/assets/flash/ZeroClipboard.swf',
-- hoverClass: 'btn-clipboard-hover'
-- })
--
-- // Insert copy to clipboard button before .highlight
-- $('.highlight').each(function () {
-- var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>'
-- $(this).before(btnHtml)
-- })
-- var zeroClipboard = new ZeroClipboard($('.btn-clipboard'))
-- var $htmlBridge = $('#global-zeroclipboard-html-bridge')
--
-- // Handlers for ZeroClipboard
-- zeroClipboard.on('load', function () {
- htmlBridge
- $htmlBridge
-- .data('placement', 'top')
-- .attr('title', 'Copy to clipboard')
-- .tooltip()
- })
--
- // Copy to clipboard
- zeroClipboard.on('dataRequested', function (client) {
- var highlight = $(this).parent().nextAll('.highlight').first()
- client.setText(highlight.text())
- })
--
- // Notify copy success and reset tooltip title
- zeroClipboard.on('complete', function () {
- htmlBridge
- .attr('title', 'Copied!')
- .tooltip('fixTitle')
- .tooltip('show')
- .attr('title', 'Copy to clipboard')
- .tooltip('fixTitle')
- // Copy to clipboard
- zeroClipboard.on('dataRequested', function (client) {
- var highlight = $(this).parent().nextAll('.highlight').first()
- client.setText(highlight.text())
- })
-
- // Notify copy success and reset tooltip title
- zeroClipboard.on('complete', function () {
- $htmlBridge
- .attr('title', 'Copied!')
- .tooltip('fixTitle')
- .tooltip('show')
- .attr('title', 'Copy to clipboard')
- .tooltip('fixTitle')
- })
-- })
--
- // Notify copy failure
- // Hide copy button when no Flash is found
- // or wrong Flash version is present
-- zeroClipboard.on('noflash wrongflash', function () {
- htmlBridge
- .attr('title', 'Flash required')
- .tooltip('fixTitle')
- .tooltip('show')
- $('.zero-clipboard').remove()
- ZeroClipboard.destroy()
-- })
--
-- })
--
--}(jQuery)
--
--;(function () {
-- 'use strict';
-
--
- addAnchors('.bd-container > h2, .bd-container > h3, .bd-container > h4, .bd-container > h5');
- anchors.options.placement = 'left';
- anchors.add('.bs-docs-section > h1, .bs-docs-section > h2, .bs-docs-section > h3, .bs-docs-section > h4, .bs-docs-section > h5')
--})();
--- /dev/null
- // Store the link icon as a base64 embedded icon font.
++// //
++// // Store the link icon as a base64 embedded icon font.
++// //
++// @font-face {
++// font-family: 'anchorjs-icons';
++// src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6v8yoAAAC8AAAAYGNtYXDL8RqdAAABHAAAADxnYXNwAAAAEAAAAVgAAAAIZ2x5Zkm2oNUAAAFgAAABWGhlYWQAHd4cAAACuAAAADZoaGVhB3sECwAAAvAAAAAkaG10eAYAAEcAAAMUAAAADGxvY2EACgCsAAADIAAAAAhtYXhwAAYAcAAAAygAAAAgbmFtZUQXtNYAAANIAAABOXBvc3QAAwAAAAAEhAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACDmAAPA/8D/wAPAAEAAAAAAAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACDmAP//AAAAIOYA////4RoCAAEAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAIARwAHA7kDeQA2AG0AAAEnLgEiBg8BDgEUFh8BHgMXNy4DLwEuATQ2PwE+ATIWHwEeARQGDwEeAxU3PgE0JicBLgMnBx4DHwEeARQGDwEOASImLwEuATQ2PwEuAzUHDgEUFh8BHgEyNj8BPgE0Ji8BA7kEI1ldWiPaIyQkIwQDBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMk/r4DBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMkBCNZXVoj2iMkJCMEA3UEJCMjJNojWV1aIwQDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkj/sYDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkjBCQjIyTaI1ldWiMEAAEAAAABAABR/4xQXw889QALBAAAAAAAzqNM0wAAAADOo0zTAAAAAAO5A3kAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAABHA7kAAQAAAAAAAAAAAAAAAAAAAAMAAAAAAgAAAAQAAEcAAAAAAAoArAABAAAAAwBuAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADAALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
++// url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAABKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDq/zKmNtYXAAAAFoAAAAPAAAADzL8RqdZ2FzcAAAAaQAAAAIAAAACAAAABBnbHlmAAABrAAAAVgAAAFYSbag1WhlYWQAAAMEAAAANgAAADYAHd4caGhlYQAAAzwAAAAkAAAAJAd7BAtobXR4AAADYAAAAAwAAAAMBgAAR2xvY2EAAANsAAAACAAAAAgACgCsbWF4cAAAA3QAAAAgAAAAIAAGAHBuYW1lAAADlAAAATkAAAE5RBe01nBvc3QAAATQAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAg5gADwP/A/8ADwABAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAoAAAABgAEAAEAAgAg5gD//wAAACDmAP///+EaAgABAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAACAEcABwO5A3kANgBtAAABJy4BIgYPAQ4BFBYfAR4DFzcuAy8BLgE0Nj8BPgEyFh8BHgEUBg8BHgMVNz4BNCYnAS4DJwceAx8BHgEUBg8BDgEiJi8BLgE0Nj8BLgM1Bw4BFBYfAR4BMjY/AT4BNCYvAQO5BCNZXVoj2iMkJCMEAwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJP6+AwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJAQjWV1aI9ojJCQjBAN1BCQjIyTaI1ldWiMEAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZI/7GAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZIwQkIyMk2iNZXVojBAABAAAAAQAAUf+MUF8PPPUACwQAAAAAAM6jTNMAAAAAzqNM0wAAAAADuQN5AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAARwO5AAEAAAAAAAAAAAAAAAAAAAADAAAAAAIAAAAEAABHAAAAAAAKAKwAAQAAAAMAbgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAwAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
++// font-style: normal;
++// font-weight: normal;
++// }
+//
- @font-face {
- font-family: 'anchorjs-icons';
- src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6v8yoAAAC8AAAAYGNtYXDL8RqdAAABHAAAADxnYXNwAAAAEAAAAVgAAAAIZ2x5Zkm2oNUAAAFgAAABWGhlYWQAHd4cAAACuAAAADZoaGVhB3sECwAAAvAAAAAkaG10eAYAAEcAAAMUAAAADGxvY2EACgCsAAADIAAAAAhtYXhwAAYAcAAAAygAAAAgbmFtZUQXtNYAAANIAAABOXBvc3QAAwAAAAAEhAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACDmAAPA/8D/wAPAAEAAAAAAAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACDmAP//AAAAIOYA////4RoCAAEAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAIARwAHA7kDeQA2AG0AAAEnLgEiBg8BDgEUFh8BHgMXNy4DLwEuATQ2PwE+ATIWHwEeARQGDwEeAxU3PgE0JicBLgMnBx4DHwEeARQGDwEOASImLwEuATQ2PwEuAzUHDgEUFh8BHgEyNj8BPgE0Ji8BA7kEI1ldWiPaIyQkIwQDBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMk/r4DBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMkBCNZXVoj2iMkJCMEA3UEJCMjJNojWV1aIwQDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkj/sYDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkjBCQjIyTaI1ldWiMEAAEAAAABAABR/4xQXw889QALBAAAAAAAzqNM0wAAAADOo0zTAAAAAAO5A3kAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAABHA7kAAQAAAAAAAAAAAAAAAAAAAAMAAAAAAgAAAAQAAEcAAAAAAAoArAABAAAAAwBuAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADAALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
- url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAABKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDq/zKmNtYXAAAAFoAAAAPAAAADzL8RqdZ2FzcAAAAaQAAAAIAAAACAAAABBnbHlmAAABrAAAAVgAAAFYSbag1WhlYWQAAAMEAAAANgAAADYAHd4caGhlYQAAAzwAAAAkAAAAJAd7BAtobXR4AAADYAAAAAwAAAAMBgAAR2xvY2EAAANsAAAACAAAAAgACgCsbWF4cAAAA3QAAAAgAAAAIAAGAHBuYW1lAAADlAAAATkAAAE5RBe01nBvc3QAAATQAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAg5gADwP/A/8ADwABAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAoAAAABgAEAAEAAgAg5gD//wAAACDmAP///+EaAgABAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAACAEcABwO5A3kANgBtAAABJy4BIgYPAQ4BFBYfAR4DFzcuAy8BLgE0Nj8BPgEyFh8BHgEUBg8BHgMVNz4BNCYnAS4DJwceAx8BHgEUBg8BDgEiJi8BLgE0Nj8BLgM1Bw4BFBYfAR4BMjY/AT4BNCYvAQO5BCNZXVoj2iMkJCMEAwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJP6+AwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJAQjWV1aI9ojJCQjBAN1BCQjIyTaI1ldWiMEAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZI/7GAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZIwQkIyMk2iNZXVojBAABAAAAAQAAUf+MUF8PPPUACwQAAAAAAM6jTNMAAAAAzqNM0wAAAAADuQN5AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAARwO5AAEAAAAAAAAAAAAAAAAAAAADAAAAAAIAAAAEAABHAAAAAAAKAKwAAQAAAAMAbgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAwAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
- font-style: normal;
- font-weight: normal;
- }
-
- .anchorjs-icon {
- font-family: 'anchorjs-icons';
- font-style: normal;
- font-variant: normal;
- font-weight: normal;
- line-height: 1;
- speak: none;
- text-transform: none;
-
- // Better Icon Rendering
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
++// .anchorjs-icon {
++// font-family: 'anchorjs-icons';
++// font-style: normal;
++// font-variant: normal;
++// font-weight: normal;
++// line-height: 1;
++// speak: none;
++// text-transform: none;
+//
- // Link placement and hover behavior.
++// // Better Icon Rendering
++// -webkit-font-smoothing: antialiased;
++// -moz-osx-font-smoothing: grayscale;
++// }
+//
- .anchorjs-link {
- opacity: 0;
- text-decoration: none;
- }
- *:hover > .anchorjs-link,
- .anchorjs-link:focus {
- // To fade links as they appear, change transition-property from 'color' to 'all'
- opacity: 1;
- transition: color .16s linear;
- }
-
++// //
++// // Link placement and hover behavior.
++// //
++// .anchorjs-link {
++// opacity: 0;
++// text-decoration: none;
++// }
++// *:hover > .anchorjs-link,
++// .anchorjs-link:focus {
++// // To fade links as they appear, change transition-property from 'color' to 'all'
++// opacity: 1;
++// transition: color .16s linear;
++// }
+//
- // Make screen-reader friendly description text visually hidden.
++// //
++// // Make screen-reader friendly description text visually hidden.
++// //
++// .anchorjs-description {
++// border: 0;
++// clip: rect(0 0 0 0);
++// height: 1px;
++// margin: -1px;
++// overflow: hidden;
++// padding: 0;
++// position: absolute;
++// width: 1px;
++// }
+//
- .anchorjs-description {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
- }
++// //
++// // Reasonable default styles.
++// // Feel free to override or replace these with your own.
++// //
++// // .anchorjs-link:link { color: #DFD487; }
++// // .anchorjs-link:visited { color: #DFD487; }
++// // .anchorjs-link:hover { color: #EC7963; }
++// // .anchorjs-link:active { color: #EC7963; }
+//
- // Reasonable default styles.
- // Feel free to override or replace these with your own.
++// .anchorjs-link {
++// float: left;
++// width: 1.2em;
++// height: 1em;
++// padding-right: .2em;
++// margin-top: .25em;
++// margin-left: -1.2em;
++// font-size: 70%;
++// color: inherit;
++// text-align: center;
++// }
++// *:hover > .anchorjs-link:hover {
++// color: $brand-primary;
++// text-decoration: none;
++// }
++//
++// // .anchorjs-icon {
++// // font-size: 90%;
++// // padding-left: 6px;
++// // }
++//
++// .anchorjs-icon:before {
++// content: '\e600';
++// // alternative icons -- uncomment to use
++// //
++// // content: '#';
++// // content: '¶';
++// // content: '❡';
++// // content: '§';
++// }
++//
++// @include media-breakpoint-down(sm) {
++// .anchorjs-link {
++// display: none;
++// }
++// }
++
+
+//
- // .anchorjs-link:link { color: #DFD487; }
- // .anchorjs-link:visited { color: #DFD487; }
- // .anchorjs-link:hover { color: #EC7963; }
- // .anchorjs-link:active { color: #EC7963; }
++// AnchorJS Styles
+//
- float: left;
- width: 1.2em;
- height: 1em;
- padding-right: .2em;
- margin-top: .25em;
- margin-left: -1.2em;
- font-size: 70%;
+
+.anchorjs-link {
- text-align: center;
- }
- *:hover > .anchorjs-link:hover {
- color: $brand-primary;
- text-decoration: none;
+ color: inherit;
- // .anchorjs-icon {
- // font-size: 90%;
- // padding-left: 6px;
- // }
-
- .anchorjs-icon:before {
- content: '\e600';
- // alternative icons -- uncomment to use
- //
- // content: '#';
- // content: '¶';
- // content: '❡';
- // content: '§';
- }
-
- @include media-breakpoint-down(sm) {
+}
+
++@media (max-width: 480px) {
+ .anchorjs-link {
+ display: none;
+ }
+}
++
++*:hover > .anchorjs-link {
++ opacity: .75;
++ -webkit-transition: color .16s linear;
++ -o-transition: color .16s linear;
++ transition: color .16s linear;
++}
++
++*:hover > .anchorjs-link:hover,
++.anchorjs-link:focus {
++ text-decoration: none;
++ opacity: 1;
++}
--- /dev/null
+---
+layout: default
+title: Wall of browser bugs
+---
+
+Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.
+
+We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs](../getting-started/#support).
+
++Also see [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o).
++
+<div class="table-responsive">
+ <table class="bd-browser-bugs table table-bordered table-hover">
+ <thead>
+ <tr>
+ <th>Browser(s)</th>
+ <th>Summary of bug</th>
+ <th>Upstream bug(s)</th>
+ <th>Bootstrap issue(s)</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for bug in site.data.browser-bugs %}
+ <tr>
+ <td>{{ bug.browser }}</td>
+ <td>{{ bug.summary | markdownify | bugify }}</td>
+ <td>{{ bug.upstream_bug | bugify }}</td>
+ <td>{{ bug.origin | bugify }}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+</div>
--- /dev/null
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default</button>
- <ul class="dropdown-menu" role="menu">
+---
+layout: page
+title: Button dropdown
+---
+
+Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper dropdown menu markup.
+
+{% callout danger %}
+#### Plugin dependency
+
+Button dropdowns require the [dropdown plugin](../javascript/#dropdowns) to be included in your version of Bootstrap.
+{% endcallout %}
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+### Single button dropdowns
+
+Turn a button into a dropdown toggle with some basic markup changes.
+
+<div class="bd-example">
+ <div class="btn-group">
- <li class="divider"></li>
++ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
++ <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>
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary</button>
- <ul class="dropdown-menu" role="menu">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <div class="btn-group">
- <li class="divider"></li>
++ <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
++ <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>
- <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success</button>
- <ul class="dropdown-menu" role="menu">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <div class="btn-group">
- <li class="divider"></li>
++ <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
++ <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>
- <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info</button>
- <ul class="dropdown-menu" role="menu">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <div class="btn-group">
- <li class="divider"></li>
++ <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
++ <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>
- <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning</button>
- <ul class="dropdown-menu" role="menu">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <div class="btn-group">
- <li class="divider"></li>
++ <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
++ <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>
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger</button>
- <ul class="dropdown-menu" role="menu">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <div class="btn-group">
- <li class="divider"></li>
++ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
++ <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>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+</div>
+
+{% highlight html %}
+<!-- Single button -->
+<div class="btn-group">
- <ul class="dropdown-menu" role="menu">
++ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Action
+ </button>
- <li class="divider"></li>
++ <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>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+</div>
+{% endhighlight %}
+
+### Split button dropdowns
+
+Similarly, create split button dropdowns with the same markup changes, only with a separate button.
+
+<div class="bd-example">
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary">Default</button>
- <ul class="dropdown-menu" role="menu">
++ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
- <li class="divider"></li>
++ <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>
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <div class="btn-group">
+ <button type="button" class="btn btn-primary">Primary</button>
- <ul class="dropdown-menu" role="menu">
++ <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
- <li class="divider"></li>
++ <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>
- <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <div class="btn-group">
+ <button type="button" class="btn btn-success">Success</button>
- <ul class="dropdown-menu" role="menu">
++ <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
- <li class="divider"></li>
++ <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>
- <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <div class="btn-group">
+ <button type="button" class="btn btn-info">Info</button>
- <ul class="dropdown-menu" role="menu">
++ <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
- <li class="divider"></li>
++ <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>
- <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <div class="btn-group">
+ <button type="button" class="btn btn-warning">Warning</button>
- <ul class="dropdown-menu" role="menu">
++ <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
- <li class="divider"></li>
++ <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>
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <div class="btn-group">
+ <button type="button" class="btn btn-danger">Danger</button>
- <ul class="dropdown-menu" role="menu">
++ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
- <li class="divider"></li>
++ <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>
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+</div>
+
+{% highlight html %}
+<!-- Split button -->
+<div class="btn-group">
+ <button type="button" class="btn btn-danger">Action</button>
- <ul class="dropdown-menu" role="menu">
++ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
- <li class="divider"></li>
++ <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>
- <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+</div>
+{% endhighlight %}
+
+### Sizing
+
+Button dropdowns work with buttons of all sizes.
+
+<div class="bd-example">
+ <div class="btn-toolbar" role="toolbar">
+ <div class="btn-group">
- <ul class="dropdown-menu" role="menu">
++ <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Large button
+ </button>
- <li class="divider"></li>
++ <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>
- <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </div><!-- /btn-toolbar -->
+ <div class="btn-toolbar" role="toolbar">
+ <div class="btn-group">
- <ul class="dropdown-menu" role="menu">
++ <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Small button
+ </button>
- <li class="divider"></li>
++ <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>
- <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </div><!-- /btn-toolbar -->
+ <div class="btn-toolbar" role="toolbar">
+ <div class="btn-group">
- <ul class="dropdown-menu" role="menu">
++ <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Extra small button
+ </button>
- <li class="divider"></li>
++ <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>
- <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </div><!-- /btn-toolbar -->
+</div><!-- /example -->
+
+{% highlight html %}
+<!-- Large button group -->
+<div class="btn-group">
- <ul class="dropdown-menu" role="menu">
++ <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Large button
+ </button>
- <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
++ <ul class="dropdown-menu">
+ ...
+ </ul>
+</div>
+
+<!-- Small button group -->
+<div class="btn-group">
- <ul class="dropdown-menu" role="menu">
++ <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Small button
+ </button>
- <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
++ <ul class="dropdown-menu">
+ ...
+ </ul>
+</div>
+
+<!-- Extra small button group -->
+<div class="btn-group">
- <ul class="dropdown-menu" role="menu">
++ <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Extra small button
+ </button>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <ul class="dropdown-menu">
+ ...
+ </ul>
+</div>
+{% endhighlight %}
+
+### Dropup variation
+
+Trigger dropdown menus above elements by adding `.dropup` to the parent.
+
+<div class="bd-example">
+ <div class="btn-toolbar" role="toolbar">
+ <div class="btn-group dropup">
+ <button type="button" class="btn btn-secondary">Dropup</button>
- <ul class="dropdown-menu" role="menu">
++ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
- <li class="divider"></li>
++ <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>
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <div class="btn-group dropup">
+ <button type="button" class="btn btn-primary">Right dropup</button>
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
++ <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
- <li class="divider"></li>
++ <ul class="dropdown-menu dropdown-menu-right">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </div>
+</div>
+
+{% highlight html %}
+<div class="btn-group dropup">
+ <button type="button" class="btn btn-secondary">Dropup</button>
- <ul class="dropdown-menu" role="menu">
++ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
++ <ul class="dropdown-menu">
+ <!-- Dropdown menu links -->
+ </ul>
+</div>
+{% endhighlight %}
--- /dev/null
- <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+---
+layout: page
+title: Button group
+---
+
+Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](../javascript/#buttons).
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+{% callout warning %}
+#### Tooltips & popovers in button groups require special setting
+
+When using tooltips or popovers on elements within a `.btn-group`, you'll have to specify the option `container: 'body'` to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
+{% endcallout %}
+
+{% callout warning %}
+#### Ensure correct `role` and provide a label
+
+In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
+
+In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct `role` attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
+{% endcallout %}
+
+### Basic example
+
+Wrap a series of buttons with `.btn` in `.btn-group`.
+
+{% example html %}
+<div class="btn-group" role="group" aria-label="Basic example">
+ <button type="button" class="btn btn-secondary">Left</button>
+ <button type="button" class="btn btn-secondary">Middle</button>
+ <button type="button" class="btn btn-secondary">Right</button>
+</div>
+{% endexample %}
+
+### Button toolbar
+
+Combine sets of button groups into button toolbars for more complex components.
+
+{% example html %}
+<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+ <div class="btn-group" role="group" aria-label="First group">
+ <button type="button" class="btn btn-secondary">1</button>
+ <button type="button" class="btn btn-secondary">2</button>
+ <button type="button" class="btn btn-secondary">3</button>
+ <button type="button" class="btn btn-secondary">4</button>
+ </div>
+ <div class="btn-group" role="group" aria-label="Second group">
+ <button type="button" class="btn btn-secondary">5</button>
+ <button type="button" class="btn btn-secondary">6</button>
+ <button type="button" class="btn btn-secondary">7</button>
+ </div>
+ <div class="btn-group" role="group" aria-label="Third group">
+ <button type="button" class="btn btn-secondary">8</button>
+ </div>
+</div>
+{% endexample %}
+
+### Sizing
+
+Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
+
+<div class="bd-example">
+ <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
+ <button type="button" class="btn btn-secondary">Left</button>
+ <button type="button" class="btn btn-secondary">Middle</button>
+ <button type="button" class="btn btn-secondary">Right</button>
+ </div>
+ <br>
+ <div class="btn-group" role="group" aria-label="Default button group">
+ <button type="button" class="btn btn-secondary">Left</button>
+ <button type="button" class="btn btn-secondary">Middle</button>
+ <button type="button" class="btn btn-secondary">Right</button>
+ </div>
+ <br>
+ <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
+ <button type="button" class="btn btn-secondary">Left</button>
+ <button type="button" class="btn btn-secondary">Middle</button>
+ <button type="button" class="btn btn-secondary">Right</button>
+ </div>
+ <br>
+ <div class="btn-group btn-group-xs" role="group" aria-label="Extra small button group">
+ <button type="button" class="btn btn-secondary">Left</button>
+ <button type="button" class="btn btn-secondary">Middle</button>
+ <button type="button" class="btn btn-secondary">Right</button>
+ </div>
+</div>
+
+{% highlight html %}
+<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
+<div class="btn-group" role="group" aria-label="...">...</div>
+<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
+<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
+{% endhighlight %}
+
+### Nesting
+
+Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
+
+{% example html %}
+<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+ <button type="button" class="btn btn-secondary">1</button>
+ <button type="button" class="btn btn-secondary">2</button>
+
+ <div class="btn-group" role="group">
- <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
++ <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </button>
- <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+</div>
+{% endexample %}
+
+### Vertical variation
+
+Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
+
+<div class="bd-example">
+ <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+ <button type="button" class="btn btn-secondary">Button</button>
+ <button type="button" class="btn btn-secondary">Button</button>
+ <div class="btn-group" role="group">
- <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
++ <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </button>
- <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ <button type="button" class="btn btn-secondary">Button</button>
+ <button type="button" class="btn btn-secondary">Button</button>
+ <div class="btn-group" role="group">
- <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
++ <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </button>
- <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group" role="group">
- <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
++ <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </button>
- <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group" role="group">
- <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
++ <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </button>
++ <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+{% highlight html %}
+<div class="btn-group-vertical">
+ ...
+</div>
+{% endhighlight %}
--- /dev/null
- Resets button state—swaps text to original text.
+---
+layout: page
+title: Buttons
+---
+
+Buttons are used to execute actions in forms, dialogs, and more. Use any of the available button classes to quickly create a styled button.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Examples
+
+Bootstrap includes six predefined button styles, each serving its own semantic purpose.
+
+{% example html %}
+<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
+<button type="button" class="btn btn-primary">Primary</button>
+
+<!-- Secondary, outline button -->
+<button type="button" class="btn btn-secondary">Secondary</button>
+
+<!-- Indicates a successful or positive action -->
+<button type="button" class="btn btn-success">Success</button>
+
+<!-- Indicates caution should be taken with this action -->
+<button type="button" class="btn btn-warning">Warning</button>
+
+<!-- Indicates a dangerous or potentially negative action -->
+<button type="button" class="btn btn-danger">Danger</button>
+
+<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
+<button type="button" class="btn btn-link">Link</button>
+{% endexample %}
+
+{% callout warning %}
+#### Conveying meaning to assistive technologies
+
+Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
+{% endcallout %}
+
+## Button tags
+
+The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
+
+When using button classes on `<a>` elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a `role="button"` to appropriately convey their purpose to assistive technologies such as screen readers.
+
+{% example html %}
+<a class="btn btn-secondary" href="#" role="button">Link</a>
+<button class="btn btn-secondary" type="submit">Button</button>
+<input class="btn btn-secondary" type="button" value="Input">
+<input class="btn btn-secondary" type="submit" value="Submit">
+{% endexample %}
+
+## Sizes
+
+Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes.
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-lg">Large button</button>
+<button type="button" class="btn btn-secondary btn-lg">Large button</button>
+{% endexample %}
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-sm">Small button</button>
+<button type="button" class="btn btn-secondary btn-sm">Small button</button>
+{% endexample %}
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
+<button type="button" class="btn btn-secondary btn-xs">Extra small button</button>
+{% endexample %}
+
+Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
+<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
+{% endexample %}
+
+## Active state
+
+Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
+
+{% example html %}
+<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
+<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
+{% endexample %}
+
+## Disabled state
+
+Make buttons look unclickable by adding the `disabled` boolean attribute to any `<button>` element.
+
+{% example html %}
+<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
+<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
+{% endexample %}
+
+As `<a>` elements don't support the `disabled` attribute, you must add the `.disabled` class to fake it.
+
+{% example html %}
+<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
+<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
+{% endexample %}
+
+{% callout warning %}
+#### Cross-browser compatibility
+
+If you add the `disabled` attribute to a `<button>`, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.
+{% endcallout %}
+
+{% callout warning %}
+#### Link functionality caveat
+
+This class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11\. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.
+{% endcallout %}
+
+{% callout warning %}
+#### Context-specific usage
+
+While button classes can be used on `<a>` and `<button>` elements, only `<button>` elements are supported within our nav and navbar components.
+{% endcallout %}
+
+## JavaScript behavior
+
+Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
+
+### Custom states
+
+Use JavaScript to change the text and "state" of a particular button. For the sake of this demonstration, we are using `data-loading-text` and `$().button('loading')`, but that's not the only state you can use. [Custom strings of text](#buttons-methods) can also be used with `$().button(string)`.
+
++**This feature is deprecated since v3.3.5 and will be removed in v4.**
++
+**Heads up!** You'll likely need to work around Firefox's [persisted form control states across page loads bug](https://github.com/twbs/bootstrap/issues/793) (e.g., disabled and checked states) with `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072) for details.
+
+{% example html %}
+<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
+ Loading state
+</button>
+<script>
+ $('#myButton').on('click', function () {
+ var $btn = $(this).button('loading')
+ // business logic...
+ $btn.button('reset')
+ })
+</script>
+{% endexample %}
+
+#### Single toggle
+
+Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the `<button>`.
+
+{% example html %}
+<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
+ Single toggle
+</button>
+{% endexample %}
+
+### Checkbox and radio
+
+Bootstrap's `.button` styles can be applied to other elements, such as `<label>`s, to provide checkbox or radio style button toggling. Add `data-toggle="buttons"` to a `.btn-group` containing those modified buttons to enable toggling in their respective styles.
+
+The checked state for these buttons is **only updated via `click` event** on the button. If you use another method to update the input—e.g., with `<input type="reset">` or by manually applying the input's `checked` property—you'll need to toggle `.active` on the `<label>` manually.
+
+Note that pre-checked buttons require you to manually add the `.active` class to the input's `<label>`.
+
+{% example html %}
+<div class="btn-group" data-toggle="buttons">
+ <label class="btn btn-primary active">
+ <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
+ </label>
+ <label class="btn btn-primary">
+ <input type="checkbox" autocomplete="off"> Checkbox 2
+ </label>
+ <label class="btn btn-primary">
+ <input type="checkbox" autocomplete="off"> Checkbox 3
+ </label>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="btn-group" data-toggle="buttons">
+ <label class="btn btn-primary active">
+ <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
+ </label>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
+ </label>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
+ </label>
+</div>
+{% endexample %}
+
+### Methods
+
+#### $().button('toggle')
+
+Toggles push state. Gives the button the appearance that it has been activated.
+
+#### $().button('reset')
+
++Resets button state—swaps text to original text. **This method is asynchronous and returns before the resetting has actually completed.**
+
+#### $().button(string)
+
+Swaps text to any data defined text state.
+
+{% highlight html %}
+<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
+ ...
+</button>
+<script>
+ $('#myStateButton').on('click', function () {
+ $(this).button('complete') // button text will be "finished!"
+ })
+</script>
+{% endhighlight %}
--- /dev/null
- <img data-src="holder.js/900x500/auto/#555:#5555" alt="Third slide image">
+---
+layout: page
+title: Carousel
+---
+
+A slideshow component for cycling through elements—images or slides of text—like a carousel. **Nested carousels are not supported.**
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Example
+
+{% example html %}
+<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
+ <ol class="carousel-indicators">
+ <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
+ <li data-target="#carousel-example-generic" data-slide-to="1"></li>
+ <li data-target="#carousel-example-generic" data-slide-to="2"></li>
+ </ol>
+ <div class="carousel-inner" role="listbox">
+ <div class="carousel-item active">
+ <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
+ </div>
+ <div class="carousel-item">
+ <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
+ </div>
+ <div class="carousel-item">
+ <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
+ </div>
+ </div>
+ <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
+ <span class="icon-prev" aria-hidden="true"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
+ <span class="icon-next" aria-hidden="true"></span>
+ <span class="sr-only">Next</span>
+ </a>
+</div>
+{% endexample %}
+
+{% callout warning %}
+#### Transition animations not supported in Internet Explorer 9
+
+Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 doesn't support the necessary CSS properties. Thus, there are no slide transition animations when using that browser. We have intentionally decided not to include jQuery-based fallbacks for the transitions.
+{% endcallout %}
+
+{% callout warning %}
+#### Initial active element required
+
+The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
+{% endcallout %}
+
+### Optional captions
+
+Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
+
+<div class="bd-example">
+ <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
+ <ol class="carousel-indicators">
+ <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
+ <li data-target="#carousel-example-captions" data-slide-to="1"></li>
+ <li data-target="#carousel-example-captions" data-slide-to="2"></li>
+ </ol>
+ <div class="carousel-inner" role="listbox">
+ <div class="carousel-item active">
+ <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
+ <div class="carousel-caption">
+ <h3>First slide label</h3>
+ <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+ </div>
+ </div>
+ <div class="carousel-item">
+ <img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image">
+ <div class="carousel-caption">
+ <h3>Second slide label</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ </div>
+ </div>
+ <div class="carousel-item">
++ <img data-src="holder.js/900x500/auto/#555:#555" alt="Third slide image">
+ <div class="carousel-caption">
+ <h3>Third slide label</h3>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+ </div>
+ </div>
+ </div>
+ <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
+ <span class="icon-prev" aria-hidden="true"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
+ <span class="icon-next" aria-hidden="true"></span>
+ <span class="sr-only">Next</span>
+ </a>
+ </div>
+</div>
+
+{% highlight html %}
+<div class="carousel-item">
+ <img src="..." alt="...">
+ <div class="carousel-caption">
+ <h3>...</h3>
+ <p>...</p>
+ </div>
+</div>
+{% endhighlight %}
+
+{% callout danger %}
+#### Accessibility issue
+
+The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
+{% endcallout %}
+
+## Usage
+
+### Multiple carousels
+
+Carousels require the use of an `id` on the outermost container (the `.carousel`) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's `id`, be sure to update the relevant controls.
+
+### Via data attributes
+
+Use data attributes to easily control the position of the carousel. `data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel `data-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`.
+
+The `data-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.**
+
+### Via JavaScript
+
+Call carousel manually with:
+
+{% highlight js %}
+$('.carousel').carousel()
+{% endhighlight %}
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 50px;">type</th>
+ <th style="width: 50px;">default</th>
+ <th>description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>interval</td>
+ <td>number</td>
+ <td>5000</td>
+ <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
+ </tr>
+ <tr>
+ <td>pause</td>
+ <td>string</td>
+ <td>"hover"</td>
+ <td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
+ </tr>
+ <tr>
+ <td>wrap</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Whether the carousel should cycle continuously or have hard stops.</td>
+ </tr>
+ <tr>
+ <td>keyboard</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Whether the carousel should react to keyboard events.</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+### Methods
+
+#### .carousel(options)
+
+Initializes the carousel with an optional options `object` and starts cycling through items.
+
+{% highlight js %}
+$('.carousel').carousel({
+ interval: 2000
+})
+{% endhighlight %}
+
+#### .carousel('cycle')
+
+Cycles through the carousel items from left to right.
+
+#### .carousel('pause')
+
+Stops the carousel from cycling through items.
+
+#### .carousel(number)
+
+Cycles the carousel to a particular frame (0 based, similar to an array).
+
+#### .carousel('prev')
+
+Cycles to the previous item.
+
+#### .carousel('next')
+
+Cycles to the next item.
+
+### Events
+
+Bootstrap's carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:
+
+- `direction`: The direction in which the carousel is sliding (either `"left"` or `"right"`).
+- `relatedTarget`: The DOM element that is being slid into place as the active item.
+
+All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`).
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>slide.bs.carousel</td>
+ <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
+ </tr>
+ <tr>
+ <td>slid.bs.carousel</td>
+ <td>This event is fired when the carousel has completed its slide transition.</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('#myCarousel').on('slide.bs.carousel', function () {
+ // do something…
+})
+{% endhighlight %}
--- /dev/null
- <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
+---
+layout: page
+title: Dropdowns
+---
+
+Toggleable, contextual menu for displaying lists of links. Made interactive with the included dropdown JavaScript plugin.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Example
+
+Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Then add the menu's HTML.
+
+{% example html %}
+<div class="dropdown">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Action</a>
++ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </button>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Another action</a>
++ <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
++ <li>
++ <a href="#">Action</a>
+ </li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Something else here</a>
++ <li>
++ <a href="#">Another action</a>
+ </li>
- <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
++ <li>
++ <a href="#">Something else here</a>
+ </li>
+ </ul>
+</div>
+{% endexample %}
+
+## Alignment
+
+By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
+
+{% callout warning %}
+#### May require additional positioning
+
+Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain `overflow` properties or appear out of bounds of the viewport. Address these issues on your own as they arise.
+{% endcallout %}
+
+{% highlight html %}
- <ul class="dropdown-menu" role="menu">
- <li role="presentation" class="dropdown-header">Dropdown header</li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Action</a>
++<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
+ ...
+</ul>
+{% endhighlight %}
+
+## Menu headers
+
+Add a header to label sections of actions in any dropdown menu.
+
+{% example html %}
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Another action</a>
++<ul class="dropdown-menu">
++ <li class="dropdown-header">Dropdown header</li>
++ <li>
++ <a href="#">Action</a>
+ </li>
- <ul class="dropdown-menu" role="menu">
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Action</a>
++ <li>
++ <a href="#">Another action</a>
+ </li>
+</ul>
+{% endexample %}
+
+## Menu dividers
+
+Separate groups of related menu items with a divider.
+
+{% example html %}
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Another action</a>
++<ul class="dropdown-menu">
++ <li>
++ <a href="#">Action</a>
+ </li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Something else here</a>
++ <li>
++ <a href="#">Another action</a>
+ </li>
- <li role="presentation" class="dropdown-divider"></li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Separated link</a>
++ <li>
++ <a href="#">Something else here</a>
+ </li>
- <ul class="dropdown-menu" role="menu">
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Regular link</a>
++ <li class="dropdown-divider"></li>
++ <li>
++ <a href="#">Separated link</a>
+ </li>
+</ul>
+{% endexample %}
+
+## Disabled menu items
+
+Add `.disabled` to a `<li>` in the dropdown to disable the link.
+
+{% example html %}
- <li role="presentation" class="disabled">
- <a role="menuitem" tabindex="-1" href="#">Disabled link</a>
++<ul class="dropdown-menu">
++ <li>
++ <a href="#">Regular link</a>
+ </li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Another link</a>
++ <li class="disabled">
++ <a href="#">Disabled link</a>
+ </li>
- <button id="dLabel" type="button" data-toggle="dropdown">
++ <li>
++ <a href="#">Another link</a>
+ </li>
+</ul>
+{% endexample %}
+
+## Usage
+
+Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.open` class on the parent list item.
+
+On mobile devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. **This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.**
+
+Note: The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
+
+### Via data attributes
+
+Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
+
+{% highlight html %}
+<div class="dropdown">
- <span class="caret"></span>
++ <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown trigger
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+ </button>
- <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown">
++ <ul class="dropdown-menu" aria-labelledby="dLabel">
+ ...
+ </ul>
+</div>
+{% endhighlight %}
+
+To keep URLs intact with link buttons, use the `data-target` attribute instead of `href="#"`.
+
+{% highlight html %}
+<div class="dropdown">
- <span class="caret"></span>
++ <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown trigger
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+ </a>
+
++ <ul class="dropdown-menu" aria-labelledby="dLabel">
+ ...
+ </ul>
+</div>
+{% endhighlight %}
+
+### Via JavaScript
+
+Call the dropdowns via JavaScript:
+
+{% highlight js %}
+$('.dropdown-toggle').dropdown()
+{% endhighlight %}
+
+{% callout info %}
+#### `data-toggle="dropdown"` still required
+
+Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
+{% endcallout %}
+
+### Options
+
+*None.*
+
+### Methods
+
+#### $().dropdown('toggle')
+
+Toggles the dropdown menu of a given navbar or tabbed navigation.
+
+### Events
+
+All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.dropdown</td>
+ <td>This event fires immediately when the show instance method is called.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.dropdown</td>
+ <td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
+ </tr>
+ <tr>
+ <td>hide.bs.dropdown</td>
+ <td>This event is fired immediately when the hide instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.dropdown</td>
+ <td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('#myDropdown').on('show.bs.dropdown', function () {
+ // do something…
+})
+{% endhighlight %}
--- /dev/null
- A checkbox or radio with the `disabled` attribute will be styled appropriately. To have the `<label>` for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the `.disabled` class to your `.radio`, `.radio-inline`, `.checkbox`, `.checkbox-inline`, or `<fieldset>`.
+---
+layout: page
+title: Forms
+---
+
+Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Form controls
+
+Bootstrap's form controls expand on [our Rebooted form styles](/components/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
+
+Remember, since Bootstrap utilizies the HTML5 doctype, **all inputs must have a `type` attribute** for proper rendering.
+
+{% example html %}
+<form>
+ <fieldset class="form-group">
+ <label for="exampleInputEmail1">Email address</label>
+ <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="exampleInputPassword1">Password</label>
+ <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="exampleSelect1">Example select</label>
+ <select class="form-control" id="exampleSelect1">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="exampleSelect2">Example multiple select</label>
+ <select multiple class="form-control" id="exampleSelect2">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="exampleTextarea">Example textarea</label>
+ <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="exampleInputFile">File input</label>
+ <input type="file" class="form-control-file" id="exampleInputFile">
+ <p class="help-block">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</p>
+ </fieldset>
+ <div class="radio">
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+ Option one is this and that—be sure to include why it's great
+ </label>
+ </div>
+ <div class="radio">
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+ Option two can be something else and selecting it will deselect option one
+ </label>
+ </div>
+ <div class="radio disabled">
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+ Option three is disabled
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Check me out
+ </label>
+ </div>
+ <button type="submit" class="btn btn-secondary">Submit</button>
+</form>
+{% endexample %}
+
+Below is a complete list of the specific from controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group.
+
+<table>
+ <thead>
+ <tr>
+ <th>Classes</th>
+ <th>Used for</th>
+ <th>Supported variations</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ {% markdown %}`.form-group`{% endmarkdown %}
+ </td>
+ <td class="text-nowrap">
+ Any group of form controls
+ </td>
+ <td>
+ {% markdown %}Use with any block-level element like `<fieldset>` or `<div>`{% endmarkdown %}
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="3">
+ {% markdown %}`.form-control`{% endmarkdown %}
+ </td>
+ <td>
+ Textual inputs
+ </td>
+ <td>
+ {% markdown %}`text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`{% endmarkdown %}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Select menus
+ </td>
+ <td>
+ {% markdown %}`multiple`, `size`{% endmarkdown %}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Textareas
+ </td>
+ <td>
+ <span class="text-muted">N/A</span>
+ </td>
+ </tr>
+ <tr>
+ <td class="text-nowrap">
+ {% markdown %}`.form-control-file`{% endmarkdown %}
+ </td>
+ <td>
+ File inputs
+ </td>
+ <td>
+ {% markdown %}`file`{% endmarkdown %}
+ </td>
+ </tr>
+ <tr>
+ <td class="text-nowrap">
+{% markdown %}
+`.radio`<br>
+`.radio-inline`<br>
+`.checkbox`<br>
+`.checkbox-inline`
+{% endmarkdown %}
+ </td>
+ <td class="text-nowrap">
+ Checkboxes and radios
+ </td>
+ <td>
+ <span class="text-muted">N/A</span>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+## Form layouts
+
+Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
+
+### Form groups
+
+The `.form-group` class is the easiest way to add some structure to forms. It's only purpose is to provide `margin-bottom` around a label and control pairing. As a bonus, since it's a class you can use it with `<fieldset>`s, `<div>`s, or nearly any other element.
+
+{% example html %}
+<form>
+ <fieldset class="form-group">
+ <label for="formGroupExampleInput">Example label</label>
+ <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="formGroupExampleInput2">Another label</label>
+ <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
+ </fieldset>
+</form>
+{% endexample %}
+
+### Inline forms
+
+Use the `.inline-form` class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:
+
+- Controls are `display: inline-block` to provide alignment control via `vertical-align` and `margin`.
+- Controls receive `width: auto` to override the Bootstrap default `width: 100%`.
+- Controls **only appear inline in viewports that are at least 768px wide** to account for narrow viewports on mobile devices.
+
+Because of this, you may need to manually address the width and alignment of individual form controls. Lastly, as shown below, you should always include a `<label>` with each form control.
+
+#### Visible labels
+
+{% example html %}
+<form class="form-inline">
+ <div class="form-group">
+ <label for="exampleInputName2">Name</label>
+ <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail2">Email</label>
+ <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
+ </div>
+ <button type="submit" class="btn btn-primary">Send invitation</button>
+</form>
+{% endexample %}
+
+#### Hidden labels
+
+{% example html %}
+<form class="form-inline">
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputEmail3">Email address</label>
+ <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
+ </div>
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputPassword3">Password</label>
+ <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Remember me
+ </label>
+ </div>
+ <button type="submit" class="btn btn-primary">Sign in</button>
+</form>
+{% endexample %}
+
+{% example html %}
+<form class="form-inline">
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
+ <div class="input-group">
+ <div class="input-group-addon">$</div>
+ <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
+ <div class="input-group-addon">.00</div>
+ </div>
+ </div>
+ <button type="submit" class="btn btn-primary">Transfer cash</button>
+</form>
+{% endexample %}
+
+### Using the Grid
+
+For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins). Add the `.row` class to form groups and use the `.col-*` classes to specify the width of your labels and controls. To vertically center the labels with the textual inputs—nearly anything with `.form-control`—use the `.form-control-label` class.
+
+{% example html %}
+<form>
+ <div class="form-group row">
+ <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
+ <div class="col-sm-10">
+ <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
+ <div class="col-sm-10">
+ <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
+ </div>
+ </div>
+ <div class="form-group row">
+ <label class="col-sm-2">Radios</label>
+ <div class="col-sm-10">
+ <div class="radio">
+ <label>
+ <input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
+ Option one is this and that—be sure to include why it's great
+ </label>
+ </div>
+ <div class="radio">
+ <label>
+ <input type="radio" name="gridRadios" id="gridRadios2" value="option2">
+ Option two can be something else and selecting it will deselect option one
+ </label>
+ </div>
+ <div class="radio disabled">
+ <label>
+ <input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
+ Option three is disabled
+ </label>
+ </div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label class="col-sm-2">Checkbox</label>
+ <div class="col-sm-10">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Check me out
+ </label>
+ </div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <div class="col-sm-offset-2 col-sm-10">
+ <button type="submit" class="btn btn-secondary">Sign in</button>
+ </div>
+ </div>
+</form>
+{% endexample %}
+
+## Checkboxes and radios
+
+Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
+
-
++Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent `<label>`, you'll need to add the <code>.disabled</code> class to the parent `.radio`, `.radio-inline`, `.checkbox`, or `.checkbox-inline`.
+
+### Default (stacked)
+
+{% example html %}
+<div class="checkbox">
+ <label>
+ <input type="checkbox" value="">
+ Option one is this and that—be sure to include why it's great
+ </label>
+</div>
+<div class="checkbox disabled">
+ <label>
+ <input type="checkbox" value="" disabled>
+ Option two is disabled
+ </label>
+</div>
+
+<div class="radio">
+ <label>
+ <input type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
+ Option one is this and that—be sure to include why it's great
+ </label>
+</div>
+<div class="radio">
+ <label>
+ <input type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
+ Option two can be something else and selecting it will deselect option one
+ </label>
+</div>
+<div class="radio disabled">
+ <label>
+ <input type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
+ Option three is disabled
+ </label>
+</div>
+{% endexample %}
+
+### Inline
+
+Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
+
+{% example html %}
+<label class="checkbox-inline">
+ <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+</label>
+<label class="checkbox-inline">
+ <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+</label>
+<label class="checkbox-inline">
+ <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+</label>
+{% endexample %}
+
+{% example html %}
+<label class="radio-inline">
+ <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+</label>
+<label class="radio-inline">
+ <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
+</label>
+<label class="radio-inline">
+ <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
+</label>
+{% endexample %}
+
+### Without labels
+
+Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.**
+
+{% example html %}
+<div class="checkbox">
+ <label>
+ <input type="checkbox" id="blankCheckbox" value="option1">
+ </label>
+</div>
+<div class="radio">
+ <label>
+ <input type="radio" name="blankRadio" id="blankRadio1" value="option1">
+ </label>
+</div>
+{% endexample %}
+
+## Static controls
+
+When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
+
+{% example html %}
+<form class="form-horizontal">
+ <div class="form-group">
+ <label class="col-sm-2 control-label">Email</label>
+ <div class="col-sm-10">
+ <p class="form-control-static">email@example.com</p>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="inputPassword" class="col-sm-2 control-label">Password</label>
+ <div class="col-sm-10">
+ <input type="password" class="form-control" id="inputPassword" placeholder="Password">
+ </div>
+ </div>
+</form>
+{% endexample %}
+
+{% example html %}
+<form class="form-inline">
+ <div class="form-group">
+ <label class="sr-only">Email</label>
+ <p class="form-control-static">email@example.com</p>
+ </div>
+ <div class="form-group">
+ <label for="inputPassword2" class="sr-only">Password</label>
+ <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
+ </div>
+ <button type="submit" class="btn btn-primary">Confirm identity</button>
+</form>
+{% endexample %}
+
+## Focus state
+
+We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`. Shown below is a custom input that only **demonstrates** the `:focus` state on an `<input>` with `.form-control`.
+
+<div class="bd-example">
+ <form>
+ <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
+ </form>
+</div>
+
+## Disabled states
+
+Add the `disabled` boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a `not-allowed` cursor.
+
+{% highlight html %}
+<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+{% endhighlight %}
+
+Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.
+
+{% example html %}
+<form>
+ <fieldset disabled>
+ <div class="form-group">
+ <label for="disabledTextInput">Disabled input</label>
+ <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
+ </div>
+ <div class="form-group">
+ <label for="disabledSelect">Disabled select menu</label>
+ <select id="disabledSelect" class="form-control">
+ <option>Disabled select</option>
+ </select>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Can't check this
+ </label>
+ </div>
+ <button type="submit" class="btn btn-primary">Submit</button>
+ </fieldset>
+</form>
+{% endexample %}
+
+{% callout warning %}
+#### Caveat about link functionality of `<a>`
+
+By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons](#buttons-disabled) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
+{% endcallout %}
+
+{% callout danger %}
+#### Cross-browser compatibility
+
+While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the `disabled` attribute on a `<fieldset>`. Use custom JavaScript to disable the fieldset in these browsers.
+{% endcallout %}
+
+## Readonly inputs
+
+Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.<
+
+{% example html %}
+<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
+{% endexample %}
+
+## Validation
+
+Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
+
+{% callout warning %}
+#### Conveying validation state to assistive technologies and colorblind users
+
+Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.
+
+Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon](../components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples](../components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
+{% endcallout %}
+
+{% example html %}
+<div class="form-group has-success">
+ <label class="control-label" for="inputSuccess1">Input with success</label>
+ <input type="text" class="form-control" id="inputSuccess1">
+</div>
+<div class="form-group has-warning">
+ <label class="control-label" for="inputWarning1">Input with warning</label>
+ <input type="text" class="form-control" id="inputWarning1">
+</div>
+<div class="form-group has-error">
+ <label class="control-label" for="inputError1">Input with error</label>
+ <input type="text" class="form-control" id="inputError1">
+</div>
+<div class="has-success">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" id="checkboxSuccess" value="option1">
+ Checkbox with success
+ </label>
+ </div>
+</div>
+<div class="has-warning">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" id="checkboxWarning" value="option1">
+ Checkbox with warning
+ </label>
+ </div>
+</div>
+<div class="has-error">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" id="checkboxError" value="option1">
+ Checkbox with error
+ </label>
+ </div>
+</div>
+{% endexample %}
+
+You can also add optional feedback icons with the addition of `.has-feedback` and the right icon.
+
+{% callout warning %}
+#### Icons, labels, and input groups
+
+Manual positioning of feedback icons is required for inputs without a label and for [input groups](../components#input-groups) with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the `sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.
+{% endcallout %}
+
+{% example html %}
+<div class="form-group has-success has-feedback">
+ <label class="control-label" for="inputSuccess2">Input with success</label>
+ <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputSuccess2Status" class="sr-only">(success)</span>
+</div>
+<div class="form-group has-warning has-feedback">
+ <label class="control-label" for="inputWarning2">Input with warning</label>
+ <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
+ <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
+ <span id="inputWarning2Status" class="sr-only">(warning)</span>
+</div>
+<div class="form-group has-error has-feedback">
+ <label class="control-label" for="inputError2">Input with error</label>
+ <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
+ <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
+ <span id="inputError2Status" class="sr-only">(error)</span>
+</div>
+<div class="form-group has-success has-feedback">
+ <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
+</div>
+{% endexample %}
+
+{% example html %}
+<form class="form-horizontal">
+ <div class="form-group has-success has-feedback">
+ <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" id="inputSuccess3">
+ <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+ </div>
+ </div>
+ <br>
+ <div class="form-group has-success has-feedback">
+ <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
+ <div class="col-sm-9">
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
+ </div>
+ </div>
+</form>
+{% endexample %}
+
+{% example html %}
+<form class="form-inline">
+ <div class="form-group has-success has-feedback">
+ <label class="control-label" for="inputSuccess4">Input with success</label>
+ <input type="text" class="form-control" id="inputSuccess4">
+ <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+ </div>
+</form>
+{% endexample %}
+
+{% example html %}
+<div class="form-group has-success has-feedback">
+ <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
+</div>
+{% endexample %}
+
+For form controls with no visible label, add the `.sr-only` class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.
+
+{% example html %}
+<div class="form-group has-success has-feedback">
+ <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
+ <input type="text" class="form-control" id="inputSuccess5">
+ <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+</div>
+{% endexample %}
+
+## Control sizing
+
+Set heights using classes like `.form-control-lg`, and set widths using grid column classes like `.col-lg-*`.
+
+{% example html %}
+<input class="form-control form-control-lg" type="text" placeholder=".input-lg">
+<input class="form-control" type="text" placeholder="Default input">
+<input class="form-control form-control-sm" type="text" placeholder=".input-sm">
+{% endexample %}
+
+{% example html %}
+<select class="form-control form-control-lg"></select>
+<select class="form-control"></select>
+<select class="form-control form-control-sm"></select>
+{% endexample %}
+
+## Column sizing
+
+Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
+
+{% example html %}
+<div class="row">
+ <div class="col-xs-2">
+ <input type="text" class="form-control" placeholder=".col-xs-2">
+ </div>
+ <div class="col-xs-3">
+ <input type="text" class="form-control" placeholder=".col-xs-3">
+ </div>
+ <div class="col-xs-4">
+ <input type="text" class="form-control" placeholder=".col-xs-4">
+ </div>
+</div>
+{% endexample %}
+
+## Help text
+
+Block level help text for form controls.
+
+{% example html %}
+<p class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</p>
+{% endexample %}
+
+
+
+## Custom forms
+
+For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements any default form control.
+
+### Checkboxes and radios
+
+Each checkbox and radio is wrapped in a `<label>` for three reasons:
+
+- It provides a larger hit areas for checking the control.
+- It provides a helpful and semantic wrapper to help us replace the default `<input>`s.
+- It triggers the state of the `<input>` automatically, meaning no JavaScript is required.
+
+We hide the default `<input>` with `opacity` and use the `.c-indicator` to build a new custom form control. We can't build a custom one from just the `<input>` because CSS's `content` doesn't work on that element.
+
+With the sibling selector (`~`), we use the `:checked` state to trigger a makeshift checked state on the custom control.
+
+In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](http://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices.
+
+#### Checkboxes
+
+{% example html %}
+<label class="c-input c-checkbox">
+ <input type="checkbox">
+ <span class="c-indicator"></span>
+ Check this custom checkbox
+</label>
+{% endexample %}
+
+Custom checkboxes can also utilize the `:indeterminate` pseudo class.
+
+<div class="bd-example bd-example-indeterminate">
+ <label class="c-input c-checkbox">
+ <input type="checkbox">
+ <span class="c-indicator"></span>
+ Check this custom checkbox
+ </label>
+</div>
+
+**Heads up!** You'll need to set this state manually via JavaScript as there is no available HTML attribute for specifying it. If you're using jQuery, something like this should suffice:
+
+{% highlight js %}
+$('.your-checkbox').prop('indeterminate', true)
+{% endhighlight %}
+
+#### Radios
+
+{% example html %}
+<label class="c-input c-radio">
+ <input id="radio1" name="radio" type="radio">
+ <span class="c-indicator"></span>
+ Toggle this custom radio
+</label>
+<label class="c-input c-radio">
+ <input id="radio2" name="radio" type="radio">
+ <span class="c-indicator"></span>
+ Or toggle this other custom radio
+</label>
+{% endexample %}
+
+#### Stacked
+
+Custom checkboxes and radios are inline to start. Add a parent with class `.c-inputs-stacked` to ensure each form control is on separate lines.
+
+{% example html %}
+<div class="c-inputs-stacked">
+ <label class="c-input c-radio">
+ <input id="radioStacked1" name="radio-stacked" type="radio">
+ <span class="c-indicator"></span>
+ Toggle this custom radio
+ </label>
+ <label class="c-input c-radio">
+ <input id="radioStacked2" name="radio-stacked" type="radio">
+ <span class="c-indicator"></span>
+ Or toggle this other custom radio
+ </label>
+</div>
+{% endexample %}
+
+### Select menu
+
+Similar to the checkboxes and radios, we wrap the `<select>` in a `<label>` as a semantic wrapper that we can generate custom styles on with CSS's generated content.
+
+{% example html %}
+<label class="select">
+ <select>
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+</label>
+{% endexample %}
+
+The `<select>` has quite a few styles to override and includes a few hacks to get things done. Here's what's happening:
+
+- The `appearance` is reset to `none` for nearly all styles to correctly apply across modern browsers (meaning not IE9).
+- The `:-moz-focusring` is overridden so that on focus there's no inner border in Firefox.
+- The arrow is hidden in Firefox with a media query hack. (There's a [longstanding open bug](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a native method of addressing this.)
+- The arrow is hidden in IE10+ with a simple selector.
+- The arrow is hidden in IE9 with a separate media query hack which generates another pseudo-element to literally mask it. Not ideal, but doable.
+
+**Heads up!** This one comes with some quirks right now:
+
+- `select[multiple]` is currently currently **not supported**.
+- Clickability is limited in IE9.
+- Firefox's dropdown of `option`s looks rather ugly.
+- The custom caret is unable to receive the selected state's `color`.
+
+Any ideas on improving these are most welcome.
+
+### File browser
+
+{% example html %}
+<label class="file">
+ <input type="file" id="file">
+ <span class="file-custom"></span>
+</label>
+{% endexample %}
+
+The file input is the most gnarly of the bunch. Here's how it works:
+
+- We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser.
+- We hide the default file `<input>` via `opacity`.
+- We use `:after` to generate a custom background and directive (*Choose file...*).
+- We use `:before` to generate and position the *Browse* button.
+- We declare a `height` on the `<input>` for proper spacing for surrounding content.
+
+In other words, it's an entirely custom element, all generated via CSS.
+
+**Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.
--- /dev/null
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
- <ul class="dropdown-menu" role="menu">
+---
+layout: page
+title: Input group
+---
+
+Easily extend form controls by adding text, buttons, or button groups on either side of textual `<input>`s.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Basic example
+
+Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple add-ons on a single side, nor multiple form-controls in a single input group.**
+
+{% example html %}
+<div class="input-group">
+ <span class="input-group-addon" id="basic-addon1">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
+</div>
+<br>
+<div class="input-group">
+ <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
+ <span class="input-group-addon" id="basic-addon2">.00</span>
+</div>
+<br>
+<div class="input-group">
+ <span class="input-group-addon">$</span>
+ <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
+ <span class="input-group-addon">.00</span>
+</div>
+{% endexample %}
+
+## Sizing
+
+Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
+
+{% example html %}
+<div class="input-group input-group-lg">
+ <span class="input-group-addon" id="sizing-addon1">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
+</div>
+<br>
+<div class="input-group">
+ <span class="input-group-addon" id="sizing-addon2">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
+</div>
+<br>
+<div class="input-group input-group-sm">
+ <span class="input-group-addon" id="sizing-addon3">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
+</div>
+{% endexample %}
+
+## Checkboxes and radio addons
+
+Place any checkbox or radio option within an input group's addon instead of text.
+
+{% example html %}
+<div class="row">
+ <div class="col-lg-6">
+ <div class="input-group">
+ <span class="input-group-addon">
+ <input type="checkbox" aria-label="Checkbox for following text input">
+ </span>
+ <input type="text" class="form-control" aria-label="Text input with checkbox">
+ </div>
+ </div>
+ <div class="col-lg-6">
+ <div class="input-group">
+ <span class="input-group-addon">
+ <input type="radio" aria-label="Radio button for following text input">
+ </span>
+ <input type="text" class="form-control" aria-label="Text input with radio button">
+ </div>
+ </div>
+</div>
+{% endexample %}
+
+## Button addons
+
+Buttons in input groups are a bit different and require one extra level of nesting. Instead of `.input-group-addon`, you'll need to use `.input-group-btn` to wrap the buttons. This is required due to default browser styles that cannot be overridden.
+
+{% example html %}
+<div class="row">
+ <div class="col-lg-6">
+ <div class="input-group">
+ <span class="input-group-btn">
+ <button class="btn btn-secondary" type="button">Go!</button>
+ </span>
+ <input type="text" class="form-control" placeholder="Search for...">
+ </div>
+ </div>
+ <div class="col-lg-6">
+ <div class="input-group">
+ <input type="text" class="form-control" placeholder="Search for...">
+ <span class="input-group-btn">
+ <button class="btn btn-secondary" type="button">Go!</button>
+ </span>
+ </div>
+ </div>
+</div>
+{% endexample %}
+
+## Buttons with dropdowns
+
+{% example html %}
+<div class="row">
+ <div class="col-lg-6">
+ <div class="input-group">
+ <div class="input-group-btn">
- <li class="divider"></li>
++ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
++ Action
++ </button>
++ <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>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <input type="text" class="form-control" aria-label="Text input with dropdown button">
+ </div>
+ </div>
+ <div class="col-lg-6">
+ <div class="input-group">
+ <input type="text" class="form-control" aria-label="Text input with dropdown button">
+ <div class="input-group-btn">
- <li class="divider"></li>
++ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
++ Action
++ </button>
++ <ul class="dropdown-menu dropdown-menu-right">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</div>
+{% endexample %}
+
+## Segmented buttons
+
+{% example html %}
+<div class="row">
+ <div class="col-lg-6">
+ <div class="input-group">
+ <div class="input-group-btn">
+ <button type="button" class="btn btn-secondary">Action</button>
- <ul class="dropdown-menu" role="menu">
++ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
- <li class="divider"></li>
++ <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>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
+ </div>
+ </div>
+ <div class="col-lg-6">
+ <div class="input-group">
+ <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
+ <div class="input-group-btn">
+ <button type="button" class="btn btn-secondary">Action</button>
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
++ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
- <li class="divider"></li>
++ <ul class="dropdown-menu dropdown-menu-right">
+ <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>
+ </div>
+</div>
+{% endexample %}
+
+## Accessibility
+
+Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
+
+The exact technique to be used (`<label>` elements hidden using the `.sr-only` class, or use of the `aria-label`, `aria-labelledby`, `aria-describedby`, `title` or `placeholder` attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.
--- /dev/null
+---
+layout: page
+title: List group
+---
+
+List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Basic example
+<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>
+
+{% example 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>
+{% endexample %}
+
+## Badges
+
+Add the badges component to any list group item and it will automatically be positioned on the right.
+
+{% example html %}
+<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>
+{% endexample %}
+
+## Linked items
+
+Linkify list group items by using anchor tags instead of list items (that also means a parent `<div>` instead of an `<ul>`). No need for individual parents around each element.
+
+{% example 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>
+{% endexample %}
+
++## Button items
++
++List group items may be buttons instead of list items (that also means a parent `<div>` instead of an `<ul>`). No need for individual parents around each element. **Don't use the standard `.btn` classes here.**
++
++{% example 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>
++{% endexample %}
++
+## Disabled items
+
+Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
+
+{% example 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>
+{% endexample %}
+
+## Contextual classes
+
+Use contextual classes to style list items, default or linked. Also includes `.active` state.
+
+{% example 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>
+{% endexample %}
+
+## Custom content
+
+Add nearly any HTML within, even for linked list groups like the one below.
+
+{% example 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">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>
+{% endexample %}
--- /dev/null
- #### Overlapping modals not supported
+---
+layout: page
+title: Modal
+---
+
+Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+**Due to how HTML5 defines its semantics, the `autofocus` HTML attribute has no effect in Bootstrap modals.** To achieve the same effect, use some custom JavaScript:
+
+{% highlight js %}
+$('#myModal').on('shown.bs.modal', function () {
+ $('#myInput').focus()
+})
+{% endhighlight %}
+
+{% callout warning %}
- <div class="modal-dialog">
++#### Multiple open modals not supported
+
+Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
+{% endcallout %}
+
+{% callout warning %}
+#### Modal markup placement
+
+Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
+{% endcallout %}
+
+{% callout warning %}
+#### Mobile device caveats
+
+There are some caveats regarding using modals on mobile devices. [See our browser support docs](../getting-started/#support-fixed-position-keyboards) for details.
+{% endcallout %}
+
+### Static example
+
+A rendered modal with header, body, and set of actions in the footer.</p>
+
+<div class="bd-example bd-example-modal">
+ <div class="modal">
- <div class="modal-dialog">
++ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+</div>
+
+{% highlight html %}
+<div class="modal fade">
- <div class="modal-dialog">
++ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+{% endhighlight %}
+
+### Live demo
+
+Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
+
+<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog">
++ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <h4>Text in a modal</h4>
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+
+ <h4>Popover in a modal</h4>
+ <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
+
+ <h4>Tooltips in a modal</h4>
+ <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
+
+ <hr>
+
+ <h4>Overflowing text to show scroll behavior</h4>
+ <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+</div>
+
+<div class="bd-example" style="padding-bottom: 24px;">
+ <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+ Launch demo modal
+ </button>
+</div>
+
+{% highlight html %}
+<!-- Button trigger modal -->
+<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+ Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- Be sure to add `role="dialog"` to `.modal`, `aria-labelledby="myModalLabel"` attribute to reference the modal title, and `aria-hidden="true"` to tell assistive technologies to skip the modal's DOM elements.
++ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div>
+ </div>
+</div>
+{% endhighlight %}
+
+{% callout warning %}
+#### Make modals accessible
+
- <div class="modal-dialog">
++Be sure to add `role="dialog"` and `aria-labelledby="..."``, referencing the modal title, to `.modal`, and `role="document"` to the `.modal-dialog` itself.
+
+Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`.
+{% endcallout %}
+
+{% callout info %}
+#### Embedding YouTube videos
+
+Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.
+{% endcallout %}
+
+## Optional sizes
+
+Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`.
+
+<div class="bd-example">
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
+</div>
+
+{% highlight html %}
+<!-- Large modal -->
+<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
+
+<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+ ...
+ </div>
+ </div>
+</div>
+
+<!-- Small modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
+
+<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+ ...
+ </div>
+ </div>
+</div>
+{% endhighlight %}
+
+<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ </div>
+ </div>
+</div>
+
+## Remove animation
+
+For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
+
+{% highlight html %}
+<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
+ ...
+</div>
+{% endhighlight %}
+
+## Using the grid system
+
+To take advantage of the Bootstrap grid system within a modal, just nest `.container-fluid within the `.modal-body` and then use the normal grid system classes within this container.
+
+{% example html %}
+<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
- <div class="modal-dialog">
++ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+ <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+ </div>
+ <div class="row">
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+ <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-9">
+ Level 1: .col-sm-9
+ <div class="row">
+ <div class="col-xs-8 col-sm-6">
+ Level 2: .col-xs-8 .col-sm-6
+ </div>
+ <div class="col-xs-4 col-sm-6">
+ Level 2: .col-xs-4 .col-sm-6
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div>
+ </div>
+</div>
+<div class="bd-example bd-example-padded-bottom">
+ <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
+ Launch demo modal
+ </button>
+</div>
+{% endexample %}
+
+## Varying modal content based on trigger button
+
+Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.
+
+{% example html %}
+<div class="bd-example">
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
+ <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
++ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+ </button>
+ <h4 class="modal-title" id="exampleModalLabel">New message</h4>
+ </div>
+ <div class="modal-body">
+ <form>
+ <div class="form-group">
+ <label for="recipient-name" class="control-label">Recipient:</label>
+ <input type="text" class="form-control" id="recipient-name">
+ </div>
+ <div class="form-group">
+ <label for="message-text" class="control-label">Message:</label>
+ <textarea class="form-control" id="message-text"></textarea>
+ </div>
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Send message</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+{% endexample %}
+
+{% highlight js %}
+$('#exampleModal').on('show.bs.modal', function (event) {
+ var button = $(event.relatedTarget) // Button that triggered the modal
+ var recipient = button.data('whatever') // Extract info from data-* attributes
+ // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
+ // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
+ var modal = $(this)
+ modal.find('.modal-title').text('New message to ' + recipient)
+ modal.find('.modal-body input').val(recipient)
+})
+{% endhighlight %}
+
+## Modals with dynamic heights
+
+If the height of a modal changes while it is open, you should call `$('#myModal').data('bs.modal').handleUpdate()` to readjust the modal's position in case a scrollbar appears.
+
+## Usage
+
+The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
+
+### Via data attributes
+
+Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a controller element, like a button, along with a `data-target="#foo"` or `href="#foo"` to target a specific modal to toggle.
+
+{% highlight html %}
+<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
+{% endhighlight %}
+
+### Via JavaScript
+
+Call a modal with id `myModal` with a single line of JavaScript:
+
+{% highlight js %}$('#myModal').modal(options){% endhighlight %}
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 50px;">type</th>
+ <th style="width: 50px;">default</th>
+ <th>description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>backdrop</td>
+ <td>boolean or the string <code>'static'</code></td>
+ <td>true</td>
+ <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
+ </tr>
+ <tr>
+ <td>keyboard</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Closes the modal when escape key is pressed</td>
+ </tr>
+ <tr>
+ <td>show</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Shows the modal when initialized.</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+### Methods
+
+#### .modal(options)
+
+Activates your content as a modal. Accepts an optional options `object`.
+
+{% highlight js %}
+$('#myModal').modal({
+ keyboard: false
+})
+{% endhighlight %}
+
+#### .modal('toggle')
+
+Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
+
+{% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
+
+#### .modal('show')
+
+Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).
+
+{% highlight js %}$('#myModal').modal('show'){% endhighlight %}
+
+#### .modal('hide')
+
+Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
+
+{% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
+
+### Events
+
+Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.modal</td>
+ <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.modal</td>
+ <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
+ </tr>
+ <tr>
+ <td>hide.bs.modal</td>
+ <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.modal</td>
+ <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ <tr>
+ <td>loaded.bs.modal</td>
+ <td>This event is fired when the modal has loaded content using the <code>remote</code> option.</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('#myModal').on('hidden.bs.modal', function (e) {
+ // do something...
+})
+{% endhighlight %}
--- /dev/null
- <li class="nav-item active" role="presentation">
+---
+layout: page
+title: Navs
+---
+
+Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Regarding accessibility
+
+If you are using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.
+
+## Base nav
+
+Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but **not the active state**.
+
+{% example html %}
+<ul class="nav">
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Another link</a>
+ </li>
+ <li class="nav-item disabled">
+ <a class="nav-link" href="#">Disabled</a>
+ </li>
+</ul>
+{% endexample %}
+
+Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element.
+
+{% example html %}
+<nav class="nav">
+ <a class="nav-link active" href="#">Active</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link" href="#">Another link</a>
+ <a class="nav-link disabled" href="#">Disabled</a>
+</nav>
+{% endexample %}
+
+## Tabs
+
+Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](../javascript/tabs).
+
+{% example html %}
+<ul class="nav nav-tabs">
- <li class="nav-item" role="presentation">
++ <li class="nav-item active">
+ <a href="#" class="nav-link">Active</a>
+ </li>
- <li class="nav-item" role="presentation">
++ <li class="nav-item">
+ <a href="#" class="nav-link">Link</a>
+ </li>
- <li class="nav-item disabled" role="presentation">
++ <li class="nav-item">
+ <a href="#" class="nav-link">Another link</a>
+ </li>
- <li class="nav-item active" role="presentation">
++ <li class="nav-item disabled">
+ <a href="#" class="nav-link">Disabled</a>
+ </li>
+</ul>
+{% endexample %}
+
+## Pills
+
+Take that same HTML, but use `.nav-pills` instead:
+
+{% example html %}
+<ul class="nav nav-pills">
- <li class="nav-item" role="presentation">
++ <li class="nav-item active">
+ <a href="#" class="nav-link">Active</a>
+ </li>
- <li class="nav-item" role="presentation">
++ <li class="nav-item">
+ <a href="#" class="nav-link">Link</a>
+ </li>
- <li class="nav-item disabled" role="presentation">
++ <li class="nav-item">
+ <a href="#" class="nav-link">Another link</a>
+ </li>
- <li class="nav-item active" role="presentation">
++ <li class="nav-item disabled">
+ <a href="#" class="nav-link">Disabled</a>
+ </li>
+</ul>
+{% endexample %}
+
+## Stacked pills
+
+Just add `.nav-stacked` to the `.nav.nav-pills`.
+
+{% example html %}
+<ul class="nav nav-pills nav-stacked">
- <li class="nav-item" role="presentation">
++ <li class="nav-item active">
+ <a href="#" class="nav-link">Active</a>
+ </li>
- <li class="nav-item" role="presentation">
++ <li class="nav-item">
+ <a href="#" class="nav-link">Link</a>
+ </li>
- <li class="nav-item disabled" role="presentation">
++ <li class="nav-item">
+ <a href="#" class="nav-link">Another link</a>
+ </li>
- <li class="nav-item active" role="presentation">
++ <li class="nav-item disabled">
+ <a href="#" class="nav-link">Disabled</a>
+ </li>
+</ul>
+{% endexample %}
+
+## Using dropdowns
+
+Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}javascript/#dropdowns).
+
+### Tabs with dropdowns
+
+{% example html %}
+<ul class="nav nav-tabs">
- <li class="nav-item" role="presentation">
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
- <ul class="dropdown-menu" role="menu">
++ <li class="nav-item active">
+ <a href="#" class="nav-link">Active</a>
+ </li>
- <li class="divider"></li>
++ <li class="nav-item">
++ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</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 class="nav-item" role="presentation">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </li>
- <li class="nav-item disabled" role="presentation">
++ <li class="nav-item">
+ <a href="#" class="nav-link">Another link</a>
+ </li>
- <li class="nav-item active" role="presentation">
++ <li class="nav-item disabled">
+ <a href="#" class="nav-link">Disabled</a>
+ </li>
+</ul>
+{% endexample %}
+
+### Pills with dropdowns
+
+{% example html %}
+<ul class="nav nav-pills">
- <li class="nav-item" role="presentation">
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
- <ul class="dropdown-menu" role="menu">
++ <li class="nav-item active">
+ <a href="#" class="nav-link">Active</a>
+ </li>
- <li class="divider"></li>
++ <li class="nav-item">
++ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</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 class="nav-item" role="presentation">
++ <li role="separator" class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </li>
- <li class="nav-item disabled" role="presentation">
++ <li class="nav-item">
+ <a href="#" class="nav-link">Another link</a>
+ </li>
- <li role="presentation" class="active">
++ <li class="nav-item disabled">
+ <a href="#" class="nav-link">Disabled</a>
+ </li>
+</ul>
+{% endexample %}
+
+## JavaScript behavior
+
+Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
+
+<div class="bd-example bd-example-tabs" role="tabpanel">
+ <ul id="myTab" class="nav nav-tabs" role="tablist">
- <li role="presentation">
++ <li class="active">
+ <a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
+ </li>
- <li role="presentation" class="dropdown">
++ <li>
+ <a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a>
+ </li>
- <span class="caret"></span>
++ <li class="dropdown">
+ <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">
+ Dropdown
- <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
- <li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
- <li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
+ </a>
- <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
- <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
- <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
- <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
++ <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
++ <li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
++ <li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
+ </ul>
+ </li>
+ </ul>
+ <div id="myTabContent" class="tab-content">
+ <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
+ <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
+ </div>
+ <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledBy="profile-tab">
+ <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
+ </div>
+ <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledBy="dropdown1-tab">
+ <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
+ </div>
+ <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledBy="dropdown2-tab">
+ <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
+ </div>
+ </div>
+</div>
+
+### Using data attributes
+
+You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Use these data attributes on `.nav-tabs` or `.nav-pills`.
+
+<div role="tabpanel">
+{% highlight html %}
+<!-- Nav tabs -->
+<ul class="nav nav-tabs" role="tablist">
- <li role="presentation" class="active">
++ <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
++ <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
++ <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
++ <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
+</ul>
+
+<!-- Tab panes -->
+<div class="tab-content">
+ <div role="tabpanel" class="tab-pane active" id="home">...</div>
+ <div role="tabpanel" class="tab-pane" id="profile">...</div>
+ <div role="tabpanel" class="tab-pane" id="messages">...</div>
+ <div role="tabpanel" class="tab-pane" id="settings">...</div>
+</div>
+{% endhighlight %}
+</div>
+
+### Via JavaScript
+
+Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
+
+{% highlight js %}
+$('#myTab a').click(function (e) {
+ e.preventDefault()
+ $(this).tab('show')
+})
+{% endhighlight %}
+
+You can activate individual tabs in several ways:
+
+{% highlight js %}
+$('#myTab a[href="#profile"]').tab('show') // Select tab by name
+$('#myTab a:first').tab('show') // Select first tab
+$('#myTab a:last').tab('show') // Select last tab
+$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
+{% endhighlight %}
+
+### Fade effect
+
+To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.in to properly fade in initial content.
+
+{% highlight html %}
+<div class="tab-content">
+ <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
+ <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
+ <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
+ <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
+</div>
+{% endhighlight %}
+
+### Methods
+
+#### $().tab
+
+Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
+
+{% highlight html %}
+<ul class="nav nav-tabs" role="tablist" id="myTab">
- <li role="presentation">
++ <li class="active">
+ <a href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
+ </li>
- <li role="presentation">
++ <li>
+ <a href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
+ </li>
- <li role="presentation">
++ <li>
+ <a href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a>
+ </li>
-
++ <li>
+ <a href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a>
+ </li>
+</ul>
+
+<div class="tab-content">
+ <div role="tabpanel" class="tab-pane active" id="home">...</div>
+ <div role="tabpanel" class="tab-pane" id="profile">...</div>
+ <div role="tabpanel" class="tab-pane" id="messages">...</div>
+ <div role="tabpanel" class="tab-pane" id="settings">...</div>
+</div>
+
+<script>
+ $(function () {
+ $('#myTab a:last').tab('show')
+ })
+</script>
+{% endhighlight %}
+
+### Events
+
+When showing a new tab, the events fire in the following order:
+
+1. `hide.bs.tab` (on the current active tab)
+2. `show.bs.tab` (on the to-be-shown tab)
+3. `hidden.bs.tab` (on the previous active tab, the same one as for the `hide.bs.tab` event)
+4. `shown.bs.tab` (on the newly-active just-shown tab, the same one as for the `show.bs.tab` event)
+
+If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.tab</td>
+ <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.tab</td>
+ <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
+ </tr>
+ <tr>
+ <td>hide.bs.tab</td>
+ <td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.tab</td>
+ <td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+ e.target // newly activated tab
+ e.relatedTarget // previous active tab
+})
+{% endhighlight %}
--- /dev/null
- <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on left
- </button>
+---
+layout: page
+title: Popovers
+---
+
+Add small overlays of content, like those found in iOS, to any element for housing secondary information.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Overview
+
+Things to know when using the popover plugin:
+
+- Popovers require the [tooltip plugin](/components/tooltips) as a dependency.
+- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
+- Zero-length `title` and `content` values will never show a popover.
+- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
+- Triggering popovers on hidden elements will not work.
+- Popovers for `.disabled` or `disabled` elements must be triggered on a wrapper element.
+- When triggered from hyperlinks that span multiple lines, popovers will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
+
+## Example: Enable popovers everywhere
+
+One way to initialize all popovers on a page would be to select them by their `data-toggle` attribute:
+
+{% highlight js %}
+$(function () {
+ $('[data-toggle="popover"]').popover()
+})
+{% endhighlight %}
+
+## Example: Using the `container` option
+
+{% highlight js %}
+$(function () {
+ $('.example-popover').popover(
+ container: 'body'
+ )
+})
+{% endhighlight %}
+
+## Static popover
+
+Four options are available: top, right, bottom, and left aligned.
+
+<div class="bd-example bd-example-popover">
+ <div class="popover popover-top">
+ <div class="popover-arrow"></div>
+ <h3 class="popover-title">Popover top</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
+ </div>
+
+ <div class="popover popover-right">
+ <div class="popover-arrow"></div>
+ <h3 class="popover-title">Popover right</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
+ </div>
+
+ <div class="popover popover-bottom">
+ <div class="popover-arrow"></div>
+ <h3 class="popover-title">Popover bottom</h3>
+
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
+ </div>
+
+ <div class="popover popover-left">
+ <div class="popover-arrow"></div>
+ <h3 class="popover-title">Popover left</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
+ </div>
+
+ <div class="clearfix"></div>
+</div>
+
+## Live demo
+
+{% example html %}
+<button type="button" class="btn btn-lg btn-danger bd-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+{% endexample %}
+
+### Four directions
+
+<div class="bd-example popover-demo">
+ <div class="bd-example-popovers">
- <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on right
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on top
+ </button>
++ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
++ Popover on right
++ </button>
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on bottom
+ </button>
- <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on left
- </button>
-
++ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
++ Popover on left
+ </button>
+ </div>
+</div>
+
+{% highlight html %}
- <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on right
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on top
+</button>
+
++<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
++ Popover on right
++</button>
++
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
+sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on bottom
+</button>
+
- <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
++<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
++ Popover on left
+</button>
+{% endhighlight %}
+
+### Dismiss on next click
+
+Use the `focus` trigger to dismiss popovers on the next click that the user makes.
+
+{% callout danger %}
+#### Specific markup required for dismiss-on-next-click
+
+For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex) attribute.
+{% endcallout %}
+
+{% example html %}
+<a tabindex="0" class="btn btn-lg btn-danger bd-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
+{% endexample %}
+
+{% highlight js %}
+$('.popover-dismiss').popover({
+ trigger: 'focus'
+})
+{% endhighlight %}
+
+
+
+## Usage
+
+Enable popovers via JavaScript:
+
+{% highlight js %}$('#example').popover(options){% endhighlight %}
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 100px;">Type</th>
+ <th style="width: 50px;">Default</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>animation</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Apply a CSS fade transition to the popover</td>
+ </tr>
+ <tr>
+ <td>container</td>
+ <td>string | false</td>
+ <td>false</td>
+ <td>
+ <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>content</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>
+ <p>Default content value if <code>data-content</code> attribute isn't present.</p>
+ <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>delay</td>
+ <td>number | object</td>
+ <td>0</td>
+ <td>
+ <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
+ <p>If a number is supplied, delay is applied to both hide/show</p>
+ <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
+ </td>
+ </tr>
+ <tr>
+ <td>html</td>
+ <td>boolean</td>
+ <td>false</td>
+ <td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
+ </tr>
+ <tr>
+ <td>placement</td>
+ <td>string | function</td>
+ <td>'right'</td>
+ <td>
+ <p>How to position the popover - top | bottom | left | right | auto.<br>When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.</p>
+ <p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>selector</td>
+ <td>string</td>
+ <td>false</td>
+ <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+ </tr>
+ <tr>
+ <td>template</td>
+ <td>string</td>
+ <td><code>'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td>
+ <td>
+ <p>Base HTML to use when creating the popover.</p>
+ <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
+ <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
+ <p><code>.popover-arrow</code> will become the popover's arrow.</p>
+ <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>title</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>
+ <p>Default title value if <code>title</code> attribute isn't present.</p>
+ <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>trigger</td>
+ <td>string</td>
+ <td>'click'</td>
++ <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
+ </tr>
+ <tr>
+ <td>viewport</td>
+ <td>string | object</td>
+ <td>{ selector: 'body', padding: 0 }</td>
+ <td>
+ <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% callout info %}
+#### Data attributes for individual popovers
+
+Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
+{% endcallout %}
+
+### Methods
+
+#### $().popover(options)
+
+Initializes popovers for an element collection.
+
+#### .popover('show')
+
+Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.
+
+{% highlight js %}$('#element').popover('show'){% endhighlight %}
+
+#### .popover('hide')
+
+Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
+
+{% highlight js %}$('#element').popover('hide'){% endhighlight %}
+
+#### .popover('toggle')
+
+Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
+
+{% highlight js %}$('#element').popover('toggle'){% endhighlight %}
+
+#### .popover('destroy')
+
+Hides and destroys an element's popover. Popvoers that use delegation (which are created using [the `selector` option](#popovers-options)) cannot be individually destroyed on descendant trigger elements.
+
+
+{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
+
+### Events
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.popover</td>
+ <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.popover</td>
+ <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ <tr>
+ <td>hide.bs.popover</td>
+ <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.popover</td>
+ <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('#myPopover').on('hidden.bs.popover', function () {
+ // do something…
+})
+{% endhighlight %}
--- /dev/null
- <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
- <li><a href="#one" tabindex="-1">one</a></li>
- <li><a href="#two" tabindex="-1">two</a></li>
- <li class="divider"></li>
- <li><a href="#three" tabindex="-1">three</a></li>
+---
+layout: page
+title: Srollspy
+---
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Example in navbar
+
+The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
+
+<div class="bd-example">
+ <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bd-example-js-navbar-scrollspy">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Project Name</a>
+ </div>
+ <div class="collapse navbar-collapse bd-example-js-navbar-scrollspy">
+ <ul class="nav navbar-nav">
+ <li><a href="#fat">@fat</a></li>
+ <li><a href="#mdo">@mdo</a></li>
+ <li class="dropdown">
- No matter the implementation method, scrollspy requires the use of `position: relative;` on the element you're spying on. In most cases this is the `<body>`.
++ <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
++ Dropdown
++ </a>
++ <ul class="dropdown-menu" aria-labelledby="navbarDrop1">
++ <li><a href="#one">one</a></li>
++ <li><a href="#two">two</a></li>
++ <li role="separator" class="divider"></li>
++ <li><a href="#three">three</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
+ <h4 id="fat">@fat</h4>
+ <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
+ <h4 id="mdo">@mdo</h4>
+ <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
+ <h4 id="one">one</h4>
+ <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
+ <h4 id="two">two</h4>
+ <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
+ <h4 id="three">three</h4>
+ <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
+ <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
+ </p>
+ </div>
+</div>
+
+
+## Usage
+
+### Requires Bootstrap nav
+
+Scrollspy currently requires the use of a [Bootstrap nav component](/components/nav/) for proper highlighting of active links.
+
+### Requires relative positioning
+
++No matter the implementation method, scrollspy requires the use of `position: relative;` on the element you're spying on. In most cases this is the `<body>`. When scrollspying on elements other than the `<body>`, be sure to have a `height` set and `overflow-y: scroll;` applied.
+
+### Via data attributes
+
+To easily add scrollspy behavior to your topbar navigation, add `data-spy="scroll"` to the element you want to spy on (most typically this would be the `<body>`). Then add the `data-target` attribute with the ID or class of the parent element of any Bootstrap `.nav` component.
+
+{% highlight css %}
+body {
+ position: relative;
+}
+{% endhighlight %}
+
+{% highlight html %}
+<body data-spy="scroll" data-target="#navbar-example">
+ ...
+ <div id="navbar-example">
+ <ul class="nav nav-tabs" role="tablist">
+ ...
+ </ul>
+ </div>
+ ...
+</body>
+{% endhighlight %}
+
+### Via JavaScript
+
+After adding `position: relative;` in your CSS, call the scrollspy via JavaScript:
+
+{% highlight js %}
+$('body').scrollspy({ target: '#navbar-example' })
+{% endhighlight %}
+
+{% callout danger %}
+#### Resolvable ID targets required
+
+Navbar links must have resolvable id targets. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`.
+{% endcallout %}
+
+{% callout info %}
+#### Non-`:visible` target elements ignored
+
+Target elements that are not [`:visible` according to jQuery](http://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted.
+{% endcallout %}
+
+### Methods
+
+#### .scrollspy('refresh')
+
+When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
+
+{% highlight js %}
+$('[data-spy="scroll"]').each(function () {
+ var $spy = $(this).scrollspy('refresh')
+})
+{% endhighlight %}
+
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 100px;">type</th>
+ <th style="width: 50px;">default</th>
+ <th>description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>offset</td>
+ <td>number</td>
+ <td>10</td>
+ <td>Pixels to offset from top when calculating position of scroll.</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+### Events
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>activate.bs.scrollspy</td>
+ <td>This event fires whenever a new item becomes activated by the scrollspy.</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+{% highlight js %}
+$('#myScrollspy').on('activate.bs.scrollspy', function () {
+ // do something…
+})
+{% endhighlight %}
--- /dev/null
- For more information, read [this Stack Overflow answer](http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685).
+---
+layout: page
+title: Tables
+---
+
+Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Basic example
+
+{% example html %}
+<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>
+{% endexample %}
+
+## Inverse table
+
+{% example html %}
+<table class="table table-inverse">
+ <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>
+{% endexample %}
+
+## Table head options
+
+Use one of two modifier classes to make `<thead>`s appear light or dark gray.
+
+{% example html %}
+<table class="table">
+ <thead class="thead-inverse">
+ <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>
+
+<table class="table">
+ <thead class="thead-default">
+ <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>
+{% endexample %}
+
+## Striped rows
+
+Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
+
+{% example html %}
+<table class="table table-striped">
+ <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>
+{% endexample %}
+
+## Bordered table
+
+Add `.table-bordered` for borders on all sides of the table and cells.
+
+{% example html %}
+<table class="table table-bordered">
+ <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>Mark</td>
+ <td>Otto</td>
+ <td>@TwBootstrap</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+{% endexample %}
+
+## Hoverable rows
+
+Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
+
+{% example html %}
+<table class="table table-hover">
+ <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 colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+{% endexample %}
+
+## Small table
+
+Add `.table-sm` to make tables more compact by cutting cell padding in half.
+
+{% example html %}
+<table class="table table-sm">
+ <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 colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+{% endexample %}
+
+## Contextual classes
+
+Use contextual classes to color table rows or individual cells.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <colgroup>
+ <col class="col-xs-1">
+ <col class="col-xs-7">
+ </colgroup>
+ <thead>
+ <tr>
+ <th>Class</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">
+ <code>.table-active</code>
+ </th>
+ <td>Applies the hover color to a particular row or cell</td>
+ </tr>
+ <tr>
+ <th scope="row">
+ <code>.table-success</code>
+ </th>
+ <td>Indicates a successful or positive action</td>
+ </tr>
+ <tr>
+ <th scope="row">
+ <code>.table-info</code>
+ </th>
+ <td>Indicates a neutral informative change or action</td>
+ </tr>
+ <tr>
+ <th scope="row">
+ <code>.table-warning</code>
+ </th>
+ <td>Indicates a warning that might need attention</td>
+ </tr>
+ <tr>
+ <th scope="row">
+ <code>.table-danger</code>
+ </th>
+ <td>Indicates a dangerous or potentially negative action</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+<div class="bd-example">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Column heading</th>
+ <th>Column heading</th>
+ <th>Column heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="table-active">
+ <th scope="row">1</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="table-success">
+ <th scope="row">3</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="table-info">
+ <th scope="row">5</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr>
+ <th scope="row">6</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="table-warning">
+ <th scope="row">7</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr>
+ <th scope="row">8</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="table-danger">
+ <th scope="row">9</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight html %}
+<!-- On rows -->
+<tr class="table-active">...</tr>
+<tr class="table-success">...</tr>
+<tr class="table-warning">...</tr>
+<tr class="table-danger">...</tr>
+<tr class="table-info">...</tr>
+
+<!-- On cells (`td` or `th`) -->
+<tr>
+ <td class="table-active">...</td>
+ <td class="table-success">...</td>
+ <td class="table-warning">...</td>
+ <td class="table-danger">...</td>
+ <td class="table-info">...</td>
+</tr>
+{% endhighlight %}
+
+## Responsive tables
+
+Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
+
+{% callout warning %}
+#### Vertical clipping/truncation
+
+Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
+{% endcallout %}
+
+{% callout warning %}
+#### Firefox and fieldsets
+
+Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we **don't** provide in Bootstrap:
+
+{% highlight css %}
+@-moz-document url-prefix() {
+ fieldset { display: table-cell; }
+}
+{% endhighlight %}
+
++For more information, read [this Stack Overflow answer](https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685).
+{% endcallout %}
+
+<div class="bd-example">
+ <div class="table-responsive">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="table-responsive">
+ <table class="table table-bordered">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+
+{% highlight html %}
+<div class="table-responsive">
+ <table class="table">
+ ...
+ </table>
+</div>
+{% endhighlight %}
+
+
+### Reflow
+
+{% example html %}
+<table class="table table-reflow">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ </tbody>
+</table>
+{% endexample %}
--- /dev/null
- <div class="tooltip left" role="tooltip">
+---
+layout: page
+title: Tooltips
+---
+
+Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Overview
+
+Things to know when using the popover plugin:
+
+- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
+- Tooltips with zero-length titles are never displayed.
+- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
+- Triggering tooltips on hidden elements will not work.
+- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element.
+- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
+
+## Example: Enable popovers everywhere
+
+One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute:
+
+{% highlight js %}
+$(function () {
+ $('[data-toggle="tooltip"]').tooltip()
+})
+{% endhighlight %}
+
+## Examples
+
+Hover over the links below to see tooltips:
+
+<div class="bd-example tooltip-demo">
+ <p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
+ </p>
+</div>
+
+### Static demo
+
+Four options are available: top, right, bottom, and left aligned.
+
+<div class="bd-example bd-example-tooltip">
- Tooltip on the left
++ <div class="tooltip top" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
- <div class="tooltip top" role="tooltip">
++ Tooltip on the top
+ </div>
+ </div>
- Tooltip on the top
++ <div class="tooltip right" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
- <div class="tooltip right" role="tooltip">
++ Tooltip on the right
+ </div>
+ </div>
+ <div class="tooltip bottom" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
+ Tooltip on the bottom
+ </div>
+ </div>
- Tooltip on the right
++ <div class="tooltip left" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
- <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
++ Tooltip on the left
+ </div>
+ </div>
+</div>
+
+### Interactive demo
+
+Hover over the buttons below to see their tooltips.
+
+<div class="bd-example tooltip-demo">
+ <div class="bd-example-tooltips">
- <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
- <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
- Tooltip on left
- </button>
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
++ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
++ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
+ </div>
+</div>
+
+{% highlight html %}
- <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
- Tooltip on right
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
+ Tooltip on top
+</button>
++<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
++ Tooltip on right
++</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
+ Tooltip on bottom
+</button>
- <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
++<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
++ Tooltip on left
+</button>
+{% endhighlight %}
+
+## Usage
+
+The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
+
+Trigger the tooltip via JavaScript:
+
+{% highlight js %}
+$('#example').tooltip(options)
+{% endhighlight %}
+
+### Markup
+
+The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
+
+{% highlight html %}
+<!-- HTML to write -->
+<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
+
+<!-- Generated markup by the plugin -->
+<div class="tooltip top" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
+ Some tooltip text!
+ </div>
+</div>
+{% endhighlight %}
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 100px;">Type</th>
+ <th style="width: 50px;">Default</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>animation</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Apply a CSS fade transition to the tooltip</td>
+ </tr>
+ <tr>
+ <td>container</td>
+ <td>string | false</td>
+ <td>false</td>
+ <td>
+ <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>delay</td>
+ <td>number | object</td>
+ <td>0</td>
+ <td>
+ <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
+ <p>If a number is supplied, delay is applied to both hide/show</p>
+ <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
+ </td>
+ </tr>
+ <tr>
+ <td>html</td>
+ <td>boolean</td>
+ <td>false</td>
+ <td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
+ </tr>
+ <tr>
+ <td>placement</td>
+ <td>string | function</td>
+ <td>'top'</td>
+ <td>
+ <p>How to position the tooltip - top | bottom | left | right | auto.<br>When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</p>
+ <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>selector</td>
+ <td>string</td>
+ <td>false</td>
+ <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+ </tr>
+ <tr>
+ <td>template</td>
+ <td>string</td>
+ <td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'</code></td>
+ <td>
+ <p>Base HTML to use when creating the tooltip.</p>
+ <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
+ <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
+ <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>title</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>
+ <p>Default title value if <code>title</code> attribute isn't present.</p>
+ <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>trigger</td>
+ <td>string</td>
+ <td>'hover focus'</td>
++ <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
+ </tr>
+ <tr>
+ <td>viewport</td>
+ <td>string | object</td>
+ <td>{ selector: 'body', padding: 0 }</td>
+ <td>
+ <p>Keeps the tooltip within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% callout info %}
+#### Data attributes for individual tooltips
+
+Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
+{% endcallout %}
+
+### Methods
+
+#### $().tooltip(options)
+
+Attaches a tooltip handler to an element collection.
+
+#### .tooltip('show')
+
+Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
+
+{% highlight js %}$('#element').tooltip('show'){% endhighlight %}
+
+#### .tooltip('hide')
+
+Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
+
+{% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
+
+#### .tooltip('toggle')
+
+Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
+
+{% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
+
+#### .tooltip('destroy')
+
+Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#tooltips-options)) cannot be individually destroyed on descendant trigger elements.
+
+{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
+
+### Events
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.tooltip</td>
+ <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.tooltip</td>
+ <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ <tr>
+ <td>hide.bs.tooltip</td>
+ <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.tooltip</td>
+ <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('#myTooltip').on('hidden.bs.tooltip', function () {
+ // do something…
+})
+{% endhighlight %}
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
-
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
-
<script src="offcanvas.js"></script>
</body>
</html>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a>
- <ul class="dropdown-menu" role="menu">
+ <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>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
-
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
-
<script src="tooltip-viewport.js"></script>
</body>
</html>
--- /dev/null
- - For help using Bootstrap, ask on [StackOverflow using the tag `twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3).
+---
+layout: page
+title: Community
+---
+
+Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
+
+- Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com/).
+- Chat with fellow Bootstrappers using IRC in the `irc.freenode.net` server, in the [##twitter-bootstrap channel](irc://irc.freenode.net/%23twitter-bootstrap).
-
++- For help using Bootstrap, ask on [StackOverflow using the tag `twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3).
+- Find inspiring examples of people building with Bootstrap at the [Bootstrap Expo](http://expo.getbootstrap.com).
+- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
+
+You can also follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap) for the latest gossip and awesome music videos.
--- /dev/null
- **To install Grunt, you must first [download and install node.js](http://nodejs.org/download/)** (which includes npm). npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js.
+---
+layout: page
+title: Compiling
+---
+
+Bootstrap uses [Grunt](http://gruntjs.com) for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Install Grunt
+
- **Unfamiliar with npm? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding.
++**To install Grunt, you must first [download and install node.js](https://nodejs.org/download/)** (which includes npm). npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js.
+
+From the command line:
+
+1. Install `grunt-cli` globally with `npm install -g grunt-cli`.
+2. Navigate to the root `/bootstrap` directory, then run `npm install`. npm will look at [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) and automatically install the necessary local dependencies listed there.
+3. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle`. This will install all Ruby dependencies, such as Jekyll and Sass linter.
+
+When completed, you'll be able to run the various Grunt commands provided from the command line.
+
++**Unfamiliar with npm? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js. [Download and install node.js](https://nodejs.org/download/) before proceeding.
+
+[install-ruby]: https://www.ruby-lang.org/en/documentation/installation/
+[gembundler]: http://bundler.io/
+
+## Available Grunt commands
+
+| Task | Description |
+| --- | --- |
+| `grunt` | Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/) and [UglifyJS](http://lisperator.net/uglifyjs/).** |
+| `grunt dist` | `grunt dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/) and [UglifyJS](http://lisperator.net/uglifyjs/).** |
+| `grunt test` | Runs [JSHint](http://jshint.com) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). |
+| `grunt docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `jekyll serve`. |
+| `grunt watch` | This is a convenience method for watching just Sass files and automatically building them whenever you save. |
+
+## Use another Sass compiler
+
+Bootstrap is compiled with [libsass][libsass] by default. Use another compiler by setting the `TWBS_SASS` environment variable to:
+
+* `sass` to use [Ruby Sass][ruby-sass] via [grunt-contrib-sass][grunt-contrib-sass].
+* `libsass` (default) to use [libsass][libsass] via [grunt-sass][grunt-sass].
+
+For example, run `TWBS_SASS=sass grunt` to test and build Bootstrap with Ruby Sass.
+
+[ruby-sass]: https://github.com/sass/sass
+[grunt-contrib-sass]: https://github.com/gruntjs/grunt-contrib-sass
+[libsass]: https://github.com/sass/libsass
+[grunt-sass]: https://github.com/sindresorhus/grunt-sass
+
+## Troubleshooting dependencies
+
+Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
--- /dev/null
- This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/chrome-developer-tools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
+---
+layout: page
+title: Contents
+---
+
+Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each form's contents and structure below.
+
+{% callout warning %}
+#### jQuery required
+
+Please note that **all JavaScript plugins require jQuery** to be included, as shown in the [starter template](../quick-start). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.current_version }}/bower.json) to see which versions of jQuery are supported.
+{% endcallout %}
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Precompiled Bootstrap
+
+Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:
+
+<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too. -->
+
+{% highlight bash %}
+bootstrap/
+├── css/
+│ ├── bootstrap.css
+│ ├── bootstrap.css.map
+│ ├── bootstrap.min.css
+└── js/
+ ├── bootstrap.js
+ └── bootstrap.min.js
+{% endhighlight %}
+
++This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
+
+## Bootstrap source code
+
+The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
+
+{% highlight bash %}
+bootstrap/
+├── dist/
+│ ├── css/
+│ └── js/
+├── docs/
+│ └── examples/
+├── js/
+└── scss/
+{% endhighlight %}
+
+The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.
--- /dev/null
- <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
+---
+layout: page
+title: Download
+---
+
+Bootstrap is available for download via ZIP file in two flavors: precompiled CSS and Javascript, and the complete source code with documentation.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Custom builds
+
+Need only a part of Bootstrap's CSS or JS? Use one of the custom builds to snag just what you need.
+
+<div class="row">
+ <div class="col-sm-4">
+ <h3>Reboot</h3>
+ <p>Includes variables/mixins, Normalize, and Reboot. No JavaScript.</p>
+ <a class="btn btn-primary" href="#">Download</a>
+ </div>
+ <div class="col-sm-4">
+ <h3>Grid only</h3>
+ <p>Includes variables/mixins and our grid system. No JavaScript.</p>
+ <a class="btn btn-primary" href="#">Download</a>
+ </div>
+ <div class="col-sm-4">
+ <h3>Flexbox</h3>
+ <p>All of Bootstrap, with flexbox support enabled and <strong>lower browser support</strong>.</p>
+ <a class="btn btn-primary" href="#">Download</a>
+ </div>
+</div>
+
+## Precompiled
+
+Compiled and minified CSS and JavaScript. No docs or original source files are included.
+
- <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
++<a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
+
+## Download source and docs
+
+Source Sass, JavaScript, and documentation. **Requires a Sass compiler and [some setup](../compiling).**
+
++<a href="{{ site.download.source }}" class="btn btn-lg btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
+
+## Package managers
+
+### Bower
+
+You can also install and manage Bootstrap's Sass, CSS, and JavaScript using [Bower](http://bower.io).
+
+{% highlight bash %}$ bower install bootstrap{% endhighlight %}
+
+### npm
+
+Bootstrap is available as [an npm package](https://www.npmjs.org/package/bootstrap). Install it into your Node powered apps with:
+
+{% highlight bash %}$ npm install bootstrap{% endhighlight %}
+
+`require('bootstrap')` will load all of Bootstrap's jQuery plugins onto the jQuery object. The `bootstrap` module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the `/js/*.js` files under the package's top-level directory.
+
+Bootstrap's `package.json` contains some additional metadata under the following keys:
+
+- `less` - path to Bootstrap's main [Less](http://lesscss.org) source file
+- `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
+
+### Meteor
+
+{% highlight bash %}
+$ meteor add twbs:bootstrap
+{% endhighlight %}
+
+### Composer
+
++You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using [Composer](https://getcomposer.org):
++
+{% highlight bash %}
+$ composer require twbs/bootstrap
+{% endhighlight %}
+
+## Autoprefixer required
+
+Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) to deal with [CSS vendor prefixes](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm). If you're compiling Bootstrap from its source Sass and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this as Autoprefixer is already integrated into our Gruntfile.
--- /dev/null
- See [this StackOverflow question](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge) for more information.
+---
+layout: page
+title: Supported platforms
+---
+
+Bootstrap is built to work best with the latest techniques. As such, older desktop and mobile browsers may display differently, but should remain fully functional.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Supported browsers
+
+Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 9-11**. More specific support information is provided below.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <td></td>
+ <th>Chrome</th>
+ <th>Firefox</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ <th>Android Browser & WebView</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">Android</th>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
+ <td class="text-danger">Not supported</td>
+ <td class="text-muted">N/A</td>
+ <td class="text-success">Android v5.0+<br>supported</td>
+ </tr>
+ <tr>
+ <th scope="row">iOS</th>
+ <td class="text-success">Supported</td>
+ <td class="text-muted">N/A</td>
+ <td class="text-danger">Not supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-muted">N/A</td>
+ </tr>
+ <tr>
+ <th scope="row">Mac OS X</th>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-muted">N/A</td>
+ </tr>
+ <tr>
+ <th scope="row">Windows</th>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-danger">Not supported</td>
+ <td class="text-muted">N/A</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 8-, though they are not officially supported.
+
+For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs](../browser-bugs/).
+
+## Internet Explorer 9
+
+Internet Explorer 9 is also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th scope="col">Feature</th>
+ <th scope="col">Status</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row"><code>border-radius</code></th>
+ <td class="text-success">Supported</td>
+ </tr>
+ <tr>
+ <th scope="row"><code>box-shadow</code></th>
+ <td class="text-success">Supported</td>
+ </tr>
+ <tr>
+ <th scope="row"><code>transform</code></th>
+ <td class="text-success">Supported, with <code>-ms</code> prefix</td>
+ </tr>
+ <tr>
+ <th scope="row"><code>transition</code></th>
+ <td class="text-danger">Not supported</td>
+ </tr>
+ <tr>
+ <th scope="row"><code>placeholder</code></th>
+ <td class="text-danger">Not supported</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+Visit [Can I use...](http://caniuse.com/) for details on browser support of CSS3 and HTML5 features.
+
+## Supporting Internet Explorer 8
+
+As of v4, Bootstrap no longer supports IE8. **If you require IE8 support, we recommend you use Bootstrap 3.** It's still supported by our team for bugfixes and documentation changes, but no new features will be added to it.
+
+Alternatively, you can add the some third party JavaScript to backfill support for the browser. You'll need the following:
+
+* [The HTML5 shiv](http://en.wikipedia.org/wiki/HTML5_Shiv)
+* [Respond.js](https://github.com/scottjehl/Respond)
+* [Rem unit polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill)
+
+## IE Compatibility modes
+
+Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate `<meta>` tag in your pages:
+
+{% highlight html %}
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+{% endhighlight %}
+
+Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".
+
+This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.
+
- On `<select>` elements, the Android stock browser will not display the side controls if there is a `border-radius` and/or `border` applied. (See [this StackOverflow question](http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with) for details.) Use the snippet of code below to remove the offending CSS and render the `<select>` as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.
++See [this StackOverflow question](https://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge) for more information.
+
+## Internet Explorer 10 in Windows Phone 8
+
+Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**.
+
+{% highlight js %}
++// Copyright 2014-2015 Twitter, Inc.
++// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
+ var msViewportStyle = document.createElement('style')
+ msViewportStyle.appendChild(
+ document.createTextNode(
+ '@-ms-viewport{width:auto!important}'
+ )
+ )
+ document.querySelector('head').appendChild(msViewportStyle)
+}
+{% endhighlight %}
+
+For more information and usage guidelines, read [Windows Phone 8 and Device-Width](http://timkadlec.com/2013/01/windows-phone-8-and-device-width/).
+
+As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.
+
+## Modals, navbars, and virtual keyboards
+
+### Overflow and scrolling
+
+Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll.
+
+### Virtual keyboards
+
+Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to `position: absolute;` or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.
+
+### Navbar Dropdowns
+
+The `.dropdown-backdrop` element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or [any other element which will fire a click event in iOS](https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile)).
+
+## Browser zooming
+
+Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.
+
+## Sticky `:hover`/`:focus` on mobile
+Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make `:hover` "sticky". In other words, `:hover` styles start applying after tapping an element and only stop applying after the user taps some other element. On mobile-first sites, this behavior is normally undesirable.
+
+Bootstrap includes a workaround for this, although it is disabled by default. By setting `$use-hover-media-query` to `true` when compiling from Sass, Bootstrap will use [mq4-hover-shim](https://github.com/twbs/mq4-hover-shim) to disable `:hover` styles in browsers that emulate hovering, thus preventing sticky `:hover` styles. There are some caveats to this workaround; see the shim's documentation for details.
+
+## Printing
+
+Even in some modern browsers, printing can be quirky.
+
+In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. [See #12078 for some details.](https://github.com/twbs/bootstrap/issues/12078) Suggested workarounds:
+
+Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:</p>
+
+{% highlight css %}
+@media print {
+ .container {
+ width: auto;
+ }
+}
+{% endhighlight %}
+
+## Android stock browser
+
+Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.
+
+#### Select menu
+
++On `<select>` elements, the Android stock browser will not display the side controls if there is a `border-radius` and/or `border` applied. (See [this StackOverflow question](https://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with) for details.) Use the snippet of code below to remove the offending CSS and render the `<select>` as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.
+
+{% highlight html %}
+<script>
+$(function () {
+ var nua = navigator.userAgent
+ var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
+ if (isAndroid) {
+ $('select.form-control').removeClass('form-control').css('width', '100%')
+ }
+})
+</script>
+{% endhighlight %}
+
+Want to see an example? [Check out this JS Bin demo.](http://jsbin.com/OyaqoDO/2)
+
+## Validators
+
+In order to provide the best possible experience to old and buggy browsers, Bootstrap uses [CSS browser hacks](http://browserhacks.com) in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.
+
+These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.
+
+Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for [a certain Firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
--- /dev/null
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+---
+layout: page
+title: Basic template
+---
+
+Start with this basic HTML template, or modify [these examples](../examples/). We hope you'll customize our templates and examples, adapting them to suit your needs.
+
+Copy the HTML below to begin working with a minimal Bootstrap document.
+
+{% highlight html %}
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags. -->
+ <title>Bootstrap 101 Template</title>
+
+ <!-- Bootstrap -->
+ <link href="css/bootstrap.min.css" rel="stylesheet">
+ </head>
+ <body>
+ <h1>Hello, world!</h1>
+
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-
++ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+ <!-- Include all compiled plugins (below), or include individual files as needed -->
+ <script src="js/bootstrap.min.js"></script>
+ </body>
+</html>
+{% endhighlight %}
--- /dev/null
- Some third-party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. These widgets expect the box model to be `content-box` instead. Learn more about [box model and sizing at CSS Tricks](http://css-tricks.com/box-sizing/).
+---
+layout: page
+title: Third party support
+---
+
+While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.
+
+## Box-sizing
+
++Some third-party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. These widgets expect the box model to be `content-box` instead. Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
+
+You can deal with this conflict by overriding the box model back to `content-box` just for the third-party widget's section of the page:
+
+{% highlight scss %}
+/* Box-sizing reset
+ *
+ * Override an entire region's box model via CSS
+ * to avoid conflicts due to the global box model settings of Bootstrap.
+ */
+.selector-for-some-widget {
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+}
+{% endhighlight %}
{
"paths": {
- "customizerJs": [
- "../assets/js/vendor/autoprefixer.js",
- "../assets/js/vendor/less.min.js",
- "../assets/js/vendor/jszip.min.js",
- "../assets/js/vendor/uglify.min.js",
- "../assets/js/vendor/Blob.js",
- "../assets/js/vendor/FileSaver.js",
- "../assets/js/raw-files.min.js",
- "../assets/js/src/customizer.js"
- ],
"docsJs": [
-
- "assets/js/vendor/holder.js",
+ "../assets/js/vendor/holder.min.js",
+ "assets/js/vendor/jekyll-search.js",
- "assets/js/vendor/ZeroClipboard.min.js",
- "assets/js/vendor/anchor.js",
- "assets/js/src/application.js"
+ "../assets/js/vendor/ZeroClipboard.min.js",
+ "../assets/js/vendor/anchor.js",
+ "../assets/js/src/application.js"
]
},
"config": {
<h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</div>
- <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
+ <nav id="navbar-example" class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
- <div class="navbar-header">
- <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Project Name</a>
- </div>
- <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
- <ul class="nav navbar-nav">
- <li class="dropdown">
- <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
+ <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
+ ☰
+ </button>
+ <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
+ <ul class="nav navbar-nav pull-left">
+ <li class="dropdown nav-item">
- <a id="drop1" href="#" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
++ <a id="drop1" href="#" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
++ Dropdown
++ </a>
+ <ul class="dropdown-menu" aria-labelledby="drop1">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
++ <li><a href="https://twitter.com/fat">Action</a></li>
++ <li><a href="https://twitter.com/fat">Another action</a></li>
++ <li><a href="https://twitter.com/fat">Something else here</a></li>
+ <li role="separator" class="divider"></li>
- <li><a href="#">Separated link</a></li>
++ <li><a href="https://twitter.com/fat">Separated link</a></li>
</ul>
</li>
- <li class="dropdown">
- <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 2 <b class="caret"></b></a>
+ <li class="dropdown nav-item">
- <a href="#" id="drop2" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
++ <a href="#" id="drop2" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
++ Dropdown 2
++ </a>
+ <ul class="dropdown-menu" aria-labelledby="drop2">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
++ <li><a href="https://twitter.com/fat">Action</a></li>
++ <li><a href="https://twitter.com/fat">Another action</a></li>
++ <li><a href="https://twitter.com/fat">Something else here</a></li>
+ <li role="separator" class="divider"></li>
- <li><a href="#">Separated link</a></li>
++ <li><a href="https://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
- <ul class="nav navbar-nav navbar-right">
- <li id="fat-menu" class="dropdown">
- <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 3 <b class="caret"></b></a>
+ <ul class="nav navbar-nav pull-right">
+ <li id="fat-menu" class="dropdown nav-item">
- <a href="#" id="drop3" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
++ <a href="#" id="drop3" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
++ Dropdown 3
++ </a>
+ <ul class="dropdown-menu" aria-labelledby="drop3">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
++ <li><a href="https://twitter.com/fat">Action</a></li>
++ <li><a href="https://twitter.com/fat">Another action</a></li>
++ <li><a href="https://twitter.com/fat">Something else here</a></li>
+ <li role="separator" class="divider"></li>
- <li><a href="#">Separated link</a></li>
++ <li><a href="https://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
</nav>
<ul class="nav nav-pills">
- <li class="active"><a href="#">Regular link</a></li>
- <li class="dropdown">
- <a id="drop4" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
+ <li class="active nav-item"><a href="#" class="nav-link">Regular link</a></li>
+ <li class="dropdown nav-item">
- <a id="drop4" class="nav-link" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
- <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
++ <a id="drop4" class="nav-link" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
++ Dropdown
++ </a>
+ <ul id="menu1" class="dropdown-menu" aria-labelledby="drop4">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
++ <li><a href="https://twitter.com/fat">Action</a></li>
++ <li><a href="https://twitter.com/fat">Another action</a></li>
++ <li><a href="https://twitter.com/fat">Something else here</a></li>
+ <li role="separator" class="divider"></li>
- <li><a href="#">Separated link</a></li>
++ <li><a href="https://twitter.com/fat">Separated link</a></li>
</ul>
</li>
- <li class="dropdown">
- <a id="drop5" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Dropdown 2 <b class="caret"></b></a>
+ <li class="dropdown nav-item">
- <a id="drop5" class="nav-link" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
- <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
++ <a id="drop5" class="nav-link" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
++ Dropdown 2
++ </a>
+ <ul id="menu2" class="dropdown-menu" aria-labelledby="drop5">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
++ <li><a href="https://twitter.com/fat">Action</a></li>
++ <li><a href="https://twitter.com/fat">Another action</a></li>
++ <li><a href="https://twitter.com/fat">Something else here</a></li>
+ <li role="separator" class="divider"></li>
- <li><a href="#">Separated link</a></li>
++ <li><a href="https://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-- <div class="modal-dialog">
++ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
- <div class="navbar-header">
- <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".js-navbar-scrollspy">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Project Name</a>
- </div>
- <div class="collapse navbar-collapse js-navbar-scrollspy">
+ <div class="js-navbar-scrollspy">
<ul class="nav navbar-nav">
- <li class=""><a href="#fat">@fat</a></li>
- <li class=""><a href="#mdo">@mdo</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li class=""><a href="#one">one</a></li>
- <li><a href="#two">two</a></li>
+ <li class="nav-item active"><a class="nav-link" href="#fat">@fat</a></li>
+ <li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>
+ <li class="dropdown nav-item">
+ <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu" role="menu">
+ <li class=""><a href="#one" tabindex="-1">one</a></li>
+ <li><a href="#two" tabindex="-1">two</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
- <li><a href="#three">three</a></li>
+ <li><a href="#three" tabindex="-1">three</a></li>
</ul>
</li>
</ul>
--- /dev/null
+//
+// Badges
+// --------------------------------------------------
+
+
+.badge {
+ position: relative;
+ top: -.1em;
+ display: inline-block;
+ padding-right: .6em;
+ padding-left: .6em;
+ font-size: .75em;
+ font-weight: $badge-font-weight;
+ color: $badge-color;
+ line-height: $line-height-base;
+ text-align: center;
++ vertical-align: middle;
+ white-space: nowrap;
+ background-color: $badge-bg;
+ @include border-radius($badge-border-radius);
+
+ // Empty badges collapse automatically
+ &:empty {
+ display: none;
+ }
+
+ &.pull-left,
+ &.pull-right {
+ top: .2em;
+ }
+
+ // Account for badges in navs
+ .list-group-item.active > &,
+ .nav-pills > .active > a > & {
+ color: $badge-active-color;
+ background-color: $badge-active-bg;
+ }
+ .list-group-item > & {
+ float: right;
+ }
+ .list-group-item > & + & {
+ margin-right: 5px;
+ }
+ .nav-pills > li > a > & {
+ margin-left: 3px;
+ }
+}
+
+// Hover state, but only for links
+a.badge {
+ @include hover-focus {
+ color: $badge-link-hover-color;
+ text-decoration: none;
+ cursor: pointer;
+ }
+}
border-radius: 0;
}
&:first-child:not(:last-child) {
- border-top-right-radius: $border-radius-base;
- border-top-right-radius: @btn-border-radius-base;
- .border-bottom-radius(0);
++ border-top-right-radius: $btn-border-radius-base;
+ @include border-bottom-radius(0);
}
&:last-child:not(:first-child) {
- border-bottom-left-radius: $border-radius-base;
- border-bottom-left-radius: @btn-border-radius-base;
- .border-top-radius(0);
++ border-bottom-left-radius: $btn-border-radius-base;
+ @include border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
--- /dev/null
- @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base);
+//
+// Buttons
+// --------------------------------------------------
+
+
+//
+// Base styles
+//
+
+.btn {
+ display: inline-block;
+ font-weight: $btn-font-weight;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ border: $border-width solid transparent;
- @include button-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $border-radius-lg);
++ @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
+ transition: all .2s ease-in-out;
+
+ &,
+ &:active,
+ &.active {
+ &:focus,
+ &.focus {
+ @include tab-focus();
+ }
+ }
+
+ @include hover-focus {
+ text-decoration: none;
+ }
+ &.focus {
+ text-decoration: none;
+ }
+
+ &:active,
+ &.active {
+ background-image: none;
+ outline: 0;
+ @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+ }
+
+ &.disabled,
+ &:disabled,
+ fieldset[disabled] & {
+ cursor: $cursor-disabled;
+ opacity: .65;
+ @include box-shadow(none);
+ }
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+a.btn.disaabled,
+fieldset[disabled] a.btn {
+ pointer-events: none;
+}
+
+
+//
+// Alternate buttons
+//
+
+.btn-primary {
+ @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+}
+.btn-secondary {
+ @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
+}
+.btn-info {
+ @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
+}
+.btn-success {
+ @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
+}
+.btn-warning {
+ @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
+}
+.btn-danger {
+ @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+}
+
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.btn-link {
+ font-weight: normal;
+ color: $link-color;
+ border-radius: 0;
+
+ &,
+ &:active,
+ &.active,
+ &:disabled,
+ fieldset[disabled] & {
+ background-color: transparent;
+ @include box-shadow(none);
+ }
+ &,
+ &:focus,
+ &:active {
+ border-color: transparent;
+ }
+ @include hover {
+ border-color: transparent;
+ }
+ @include hover-focus {
+ color: $link-hover-color;
+ text-decoration: $link-hover-decoration;
+ background-color: transparent;
+ }
+ &:disabled,
+ fieldset[disabled] & {
+ @include hover-focus {
+ color: $btn-link-disabled-color;
+ text-decoration: none;
+ }
+ }
+}
+
+
+//
+// Button Sizes
+//
+
+.btn-lg {
+ // line-height: ensure even-numbered height of button next to large input
- @include button-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $border-radius-sm);
++ @include button-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
+}
+.btn-sm {
+ // line-height: ensure proper height of button next to small input
- @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-xs, $line-height-sm, $border-radius-sm);
++ @include button-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
+}
+.btn-xs {
++ @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-xs, $line-height-sm, $btn-border-radius-sm);
+}
+
+
+//
+// Block button
+//
+
+.btn-block {
+ display: block;
+ width: 100%;
+}
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+ margin-top: 5px;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ &.btn-block {
+ width: 100%;
+ }
+}
// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d) {
- .transition-transform(~'0.6s ease-in-out');
- .backface-visibility(~'hidden');
- .perspective(1000px);
+ transition: transform .6s ease-in-out;
+ backface-visibility: hidden;
- perspective: 1000;
++ perspective: 1000px;
&.next,
&.active.right {
// Toggles
.icon-prev,
- .icon-next,
- .glyphicon-chevron-left,
- .glyphicon-chevron-right {
+ .icon-next {
position: absolute;
top: 50%;
+ margin-top: -10px;
z-index: 5;
display: inline-block;
+ width: 20px;
+ height: 20px;
+ margin-top: -10px;
+ font-family: serif;
+ line-height: 1;
}
- .icon-prev,
- .glyphicon-chevron-left {
+ .icon-prev {
left: 50%;
margin-left: -10px;
}
right: 50%;
margin-right: -10px;
}
- .icon-prev,
- .icon-next {
- width: 20px;
- height: 20px;
- line-height: 1;
- font-family: serif;
- }
-
+
.icon-prev {
&:before {
- content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
+ content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
}
}
.icon-next {
--- /dev/null
- // @media screen and (-webkit-min-device-pixel-ratio: 0) {
- // input[type="date"],
- // input[type="time"],
- // input[type="datetime-local"],
- // input[type="month"] {
- // line-height: $input-height-base;
-
- // &.input-sm,
- // .input-group-sm & {
- // line-height: $input-height-sm;
- // }
-
- // &.input-lg,
- // .input-group-lg & {
- // line-height: $input-height-lg;
- // }
- // }
- // }
+//
+// Forms
+// --------------------------------------------------
+
+
+//
+// Textual form controls
+//
+
+.form-control {
+ display: block;
+ width: 100%;
+ // // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+ // height: $input-height-base;
+ padding: $padding-base-vertical $padding-base-horizontal;
+ font-size: $font-size-base;
+ line-height: $line-height-base;
+ color: $input-color;
+ background-color: $input-bg;
+ // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
+ background-image: none;
+ border: 1px solid $input-border;
+ // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+ @include border-radius($input-border-radius);
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+ transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+
+ // Make inputs at least the height of their button counterpart (base line-height + padding + border).
+ // Only apply the height to textual inputs and some selcts.
+ &:not(textarea),
+ &:not(select[size]),
+ &:not(select[multiple]) {
+ height: $input-height-base;
+ }
+
++ // Unstyle the caret on `<select>`s in IE10+.
++ &::-ms-expand {
++ border: 0;
++ background-color: transparent;
++ }
++
+ // Customize the `:focus` state to imitate native WebKit styles.
+ @include form-control-focus();
+
+ // Placeholder
+ &::placeholder {
+ color: $input-color-placeholder;
+ // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+ opacity: 1;
+ }
+
+ // Disabled and read-only inputs
+ //
+ // HTML5 says that controls under a fieldset > legend:first-child won't be
+ // disabled if the fieldset is disabled. Due to implementation difficulty, we
+ // don't honor that edge case; we style them as disabled anyway.
+ &:disabled,
+ &[readonly],
+ fieldset[disabled] & {
+ background-color: $input-bg-disabled;
+ // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+ opacity: 1;
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ cursor: $cursor-disabled;
+ }
+}
+
+
+// Make file inputs better match text inputs by forcing them to new lines.
+.form-control-file,
+.form-control-range {
+ display: block;
+}
+
+
+//
+// Labels
+//
+
+// For use with horizontal and inline forms, when you need the label text to
+// align with the form controls.
+.form-control-label {
+ padding: ($padding-base-vertical + $border-width) $padding-base-horizontal;
+ margin-bottom: 0; // Override the `<label>` default
+}
+
+
+// Todo: clear this up
+
+// Special styles for iOS temporal inputs
+//
+// In Mobile Safari, setting `display: block` on temporal inputs causes the
+// text within the input to become vertically misaligned. As a workaround, we
+// set a pixel line-height that matches the given height of the input, but only
+// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
+
++@media screen and (-webkit-min-device-pixel-ratio: 0) {
++ input[type="date"],
++ input[type="time"],
++ input[type="datetime-local"],
++ input[type="month"] {
++ &.form-control {
++ line-height: $input-height-base;
++ }
++
++ &.input-sm,
++ .input-group-sm &.form-control {
++ line-height: $input-height-sm;
++ }
++
++ &.input-lg,
++ .input-group-lg &.form-control {
++ line-height: $input-height-lg;
++ }
++ }
++}
+
+
+// Static form control text
+//
+// Apply class to an element to make any string of text align with labels in a
+// horizontal form layout.
+
+.form-control-static {
+ min-height: $input-height-base;
+ // Size it appropriately next to real form controls
+ padding-top: ($padding-base-vertical + $border-width);
+ padding-bottom: ($padding-base-vertical + $border-width);
+ // Remove default margin from `p`
+ margin-bottom: 0;
+
+ &.form-control-sm,
+ &.form-control-lg {
+ padding-right: 0;
+ padding-left: 0;
+ }
+}
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// The `.form-group-* form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
+
+.form-control-sm {
+ height: $input-height-sm;
+ padding: $padding-sm-vertical $padding-sm-horizontal;
+ font-size: $font-size-sm;
+ line-height: $line-height-sm;
+ border-radius: $input-border-radius-sm;
+}
+
+.form-control-lg {
+ height: $input-height-lg;
+ padding: $padding-lg-vertical $padding-lg-horizontal;
+ font-size: $font-size-lg;
+ line-height: $line-height-lg;
+ border-radius: $input-border-radius-lg;
+}
+
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+ margin-bottom: $form-group-margin-bottom;
+}
+
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+.radio,
+.checkbox {
+ position: relative;
+ display: block;
+ // margin-top: ($spacer * .75);
+ margin-bottom: ($spacer * .75);
+
+ label {
+ padding-left: 1.25rem;
+ margin-bottom: 0;
+ font-weight: normal;
+ cursor: pointer;
+
+ // When there's no labels, don't position the input.
+ input:only-child {
+ position: static;
+ }
+ }
+}
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+ position: absolute;
+ margin-top: .25rem;
+ // margin-top: 4px \9;
+ margin-left: -1.25rem;
+}
+
+.radio + .radio,
+.checkbox + .checkbox {
+ // Move up sibling radios or checkboxes for tighter spacing
+ margin-top: -.25rem;
+}
+
+// Radios and checkboxes on same line
+.radio-inline,
+.checkbox-inline {
+ position: relative;
+ display: inline-block;
+ padding-left: 1.25rem;
+ margin-bottom: 0;
+ font-weight: normal;
+ vertical-align: middle;
+ cursor: pointer;
+}
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+ margin-top: 0;
+ margin-left: .75rem;
+}
+
+// Apply same disabled cursor tweak as for inputs
+// Some special care is needed because <label>s don't inherit their parent's `cursor`.
+//
+// Note: Neither radios nor checkboxes can be readonly.
+input[type="radio"],
+input[type="checkbox"] {
+ &:disabled,
+ &.disabled,
+ fieldset[disabled] & {
+ cursor: $cursor-disabled;
+ }
+}
+// These classes are used directly on <label>s
+.radio-inline,
+.checkbox-inline {
+ &.disabled,
+ fieldset[disabled] & {
+ cursor: $cursor-disabled;
+ }
+}
+// These classes are used on elements with <label> descendants
+.radio,
+.checkbox {
+ &.disabled,
+ fieldset[disabled] & {
+ label {
+ cursor: $cursor-disabled;
+ }
+ }
+}
+
+
+// Form control feedback states
+//
+// Apply contextual and semantic states to individual form controls.
+
+.has-feedback {
+ // Enable absolute positioning
+ position: relative;
+
+ // Ensure icons don't overlap text
+ .form-control {
+ padding-right: ($input-height-base * 1.25);
+ }
+}
+// Feedback icon
+.form-control-feedback {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 2; // Ensure icon is above input groups
+ display: block;
+ width: $input-height-base;
+ height: $input-height-base;
+ line-height: $input-height-base;
+ text-align: center;
+ pointer-events: none;
+}
+.input-lg + .form-control-feedback,
+.input-group-lg + .form-control-feedback {
+ width: $input-height-lg;
+ height: $input-height-lg;
+ line-height: $input-height-lg;
+}
+.input-sm + .form-control-feedback,
+.input-group-sm + .form-control-feedback {
+ width: $input-height-sm;
+ height: $input-height-sm;
+ line-height: $input-height-sm;
+}
+
+// Form validation states
+.has-success {
+ @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
+}
+.has-warning {
+ @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
+}
+.has-error {
+ @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
+}
+
+// Reposition feedback icon if input has visible label above
+.has-feedback label {
+
+ ~ .form-control-feedback {
+ top: ($line-height-computed + 5); // Height of the `label` and its margin
+ }
+
+ &.sr-only ~ .form-control-feedback {
+ top: 0;
+ }
+}
+
+
+// Help text
+//
+// Apply to any element you wish to create light text for placement immediately
+// below a form control. Use for general help, formatting, or instructional text.
+
+.help-block {
+ display: block; // account for any element using help-block
+ margin-top: .25rem;
+ margin-bottom: .75rem;
+ color: lighten($text-color, 25%); // lighten the text some for contrast
+}
+
+
+// Inline forms
+//
+// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
+// forms begin stacked on extra small (mobile) devices and then go inline when
+// viewports reach <768px.
+//
+// Requires wrapping inputs and labels with `.form-group` for proper display of
+// default HTML form controls and our custom form controls (e.g., input groups).
+//
+// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
+
+.form-inline {
+
+ // Kick in the inline
+ @include media-breakpoint-up(sm) {
+ // Inline-block all the things for "inline"
+ .form-group {
+ display: inline-block;
+ margin-bottom: 0;
+ vertical-align: middle;
+ }
+
+ // In navbar-form, allow folks to *not* use `.form-group`
+ .form-control {
+ display: inline-block;
+ width: auto; // Prevent labels from stacking above inputs in `.form-group`
+ vertical-align: middle;
+ }
+
+ // Make static controls behave like regular ones
+ .form-control-static {
+ display: inline-block;
+ }
+
+ .input-group {
+ display: inline-table;
+ vertical-align: middle;
+
+ .input-group-addon,
+ .input-group-btn,
+ .form-control {
+ width: auto;
+ }
+ }
+
+ // Input groups need that 100% width though
+ .input-group > .form-control {
+ width: 100%;
+ }
+
+ .control-label {
+ margin-bottom: 0;
+ vertical-align: middle;
+ }
+
+ // Remove default margin on radios/checkboxes that were used for stacking, and
+ // then undo the floating of radios and checkboxes to match.
+ .radio,
+ .checkbox {
+ display: inline-block;
+ margin-top: 0;
+ margin-bottom: 0;
+ vertical-align: middle;
+
+ label {
+ padding-left: 0;
+ }
+ }
+ .radio input[type="radio"],
+ .checkbox input[type="checkbox"] {
+ position: relative;
+ margin-left: 0;
+ }
+
+ // Re-override the feedback icon.
+ .has-feedback .form-control-feedback {
+ top: 0;
+ }
+ }
+}
--- /dev/null
- // Linked list items
+//
+// List groups
+// --------------------------------------------------
+
+
+// Base class
+//
+// Easily usable on <ul>, <ol>, or <div>.
+
+.list-group {
+ // No need to set list-style: none; since .list-group-item is block level
+ padding-left: 0; // reset padding because ul and ol
+ margin-bottom: 0;
+}
+
+
+// Individual list items
+//
+// Use on `li`s or `div`s within the `.list-group` parent.
+
+.list-group-item {
+ position: relative;
+ display: block;
+ padding: .75rem 1.25rem;
+ // Place the border on the list items and negative margin up for better styling
+ margin-bottom: -.0625rem;
+ background-color: $list-group-bg;
+ border: .0625rem solid $list-group-border;
+
+ // Round the first and last items
+ &:first-child {
+ @include border-top-radius($list-group-border-radius);
+ }
+ &:last-child {
+ margin-bottom: 0;
+ @include border-bottom-radius($list-group-border-radius);
+ }
+}
+
+.list-group-flush {
+ .list-group-item {
+ border-width: .0625rem 0;
+ border-radius: 0;
+ }
+}
+
+
- // Use anchor elements instead of `li`s or `div`s to create linked list items.
- // Includes an extra `.active` modifier class for showing selected items.
++// Interactive list items
+//
- a.list-group-item {
++// Use anchor or button elements instead of `li`s or `div`s to create interactive
++// list items. Includes an extra `.active` modifier class for selected items.
+
++a.list-group-item,
++button.list-group-item {
+ color: $list-group-link-color;
+
+ .list-group-item-heading {
+ color: $list-group-link-heading-color;
+ }
+
+ // Hover state
+ @include hover-focus {
+ color: $list-group-link-hover-color;
+ text-decoration: none;
+ background-color: $list-group-hover-bg;
+ }
+}
+
+.list-group-item {
+ // Disabled state
+ &.disabled {
+ @include plain-hover-focus {
+ color: $list-group-disabled-color;
+ cursor: $cursor-disabled;
+ background-color: $list-group-disabled-bg;
+
+ // Force color to inherit for custom content
+ .list-group-item-heading {
+ color: inherit;
+ }
+ .list-group-item-text {
+ color: $list-group-disabled-text-color;
+ }
+ }
+ }
+
+ // Active class on item itself, not parent
+ &.active {
+ @include plain-hover-focus {
+ z-index: 2; // Place active items above their siblings for proper border styling
+ color: $list-group-active-color;
+ background-color: $list-group-active-bg;
+ border-color: $list-group-active-border;
+
+ // Force color to inherit for custom content
+ .list-group-item-heading,
+ .list-group-item-heading > small,
+ .list-group-item-heading > .small {
+ color: inherit;
+ }
+ .list-group-item-text {
+ color: $list-group-active-text-color;
+ }
+ }
+ }
+}
+
+
+// Contextual variants
+//
+// Add modifier classes to change text and background color on individual items.
+// Organizationally, this must come after the `:hover` states.
+
+@include list-group-item-variant(success, $state-success-bg, $state-success-text);
+@include list-group-item-variant(info, $state-info-bg, $state-info-text);
+@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
+@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
+
+
+// Custom content options
+//
+// Extra classes for creating well-formatted content within `.list-group-item`s.
+
+.list-group-item-heading {
+ margin-top: 0;
+ margin-bottom: 5px;
+}
+.list-group-item-text {
+ margin-bottom: 0;
+ line-height: 1.3;
+}
--- /dev/null
+//
+// Media
+// --------------------------------------------------
+
+@if $enable-flex {
+ .media {
+ display: flex;
+ margin-bottom: $spacer;
+ }
+ .media-body {
+ flex: 1;
+ }
+} @else {
+ .media {
+ margin-top: 15px;
+
+ &:first-child {
+ margin-top: 0;
+ }
+ }
+ .media,
+ .media-body {
+ overflow: hidden;
+ zoom: 1;
+ }
+ .media-body {
+ width: 10000px;
+ }
+ .media-left,
+ .media-right,
+ .media-body {
+ display: table-cell;
+ vertical-align: top;
+ }
+ .media-middle {
+ vertical-align: middle;
+ }
+ .media-bottom {
+ vertical-align: bottom;
+ }
+}
+
+
+//
+// Images/elements as the media anchor
+//
+
+.media-object {
+ display: block;
++
++ // Fix collapse in webkit from max-width: 100% and display: table-cell.
++ &.img-thumbnail {
++ max-width: none;
++ }
+}
+
+
+//
+// Alignment
+//
+
+.media-right {
+ padding-left: 10px;
+}
+
+.media-left {
+ padding-right: 10px;
+}
+
+
+//
+// Headings
+//
+
+.media-heading {
+ margin-top: 0;
+ margin-bottom: 5px;
+}
+
+
+//
+// Media list variation
+//
+
+.media-list {
+ padding-left: 0;
+ list-style: none;
+}
--- /dev/null
+// Mixins
+// --------------------------------------------------
+
+// Toggles
+//
+// Used in conjunction with global variables to enable certain theme features.
+
+@mixin border-radius($radius: $border-radius-base) {
+ @if $enable-rounded {
+ border-radius: $radius;
+ }
+}
+
+@mixin box-shadow($shadow...) {
+ @if $enable-shadows {
+ box-shadow: $shadow;
+ }
+}
+
+@mixin transition($transition...) {
+ @if $enable-transitions {
+ transition: $transition;
+ }
+}
+
+// Utilities
+@import "mixins/breakpoints";
+@import "mixins/hide-text";
+@import "mixins/hover";
+@import "mixins/image";
+@import "mixins/label";
+@import "mixins/reset-filter";
+@import "mixins/resize";
+@import "mixins/responsive-visibility";
+@import "mixins/screen-reader";
+@import "mixins/size";
+@import "mixins/tab-focus";
++@import "mixins/reset-text";
+@import "mixins/text-emphasis";
+@import "mixins/text-truncate";
+
+// // Components
+@import "mixins/alert";
+@import "mixins/buttons";
+@import "mixins/pagination";
+@import "mixins/list-group";
+@import "mixins/nav-divider";
+@import "mixins/forms";
+@import "mixins/progress";
+@import "mixins/table-row";
+
+// // Skins
+@import "mixins/background-variant";
+@import "mixins/border-radius";
+@import "mixins/gradients";
+
+// // Layout
+@import "mixins/clearfix";
+@import "mixins/center-block";
+// @import "mixins/navbar-align";
+@import "mixins/grid-framework";
+@import "mixins/grid";
+@import "mixins/pulls";
}
//
- // Improve readability when focused and also mouse hovered in all browsers.
+ // Improve readability of focused elements when they are also in an
+ // active/hover state.
//
-a:active,
-a:hover {
- outline: 0;
+a {
+ &:active {
+ outline: 0;
+ }
+ @include hover {
+ outline: 0;
+ }
}
// Text-level semantics
--- /dev/null
- @include pagination-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $border-radius-lg);
+//
+// Pagination (multiple pages)
+// --------------------------------------------------
+
+
+.pagination {
+ display: inline-block;
+ padding-left: 0;
+ margin-top: $spacer-y;
+ margin-bottom: $spacer-y;
+ @include border-radius();
+
+ > li {
+ display: inline; // Remove list-style and block-level defaults
+
+ > a,
+ > span {
+ position: relative;
+ float: left; // Collapse white-space
+ padding: $padding-base-vertical $padding-base-horizontal;
+ margin-left: -1px;
+ line-height: $line-height-base;
+ color: $pagination-color;
+ text-decoration: none;
+ background-color: $pagination-bg;
+ border: 1px solid $pagination-border;
+ }
+ &:first-child {
+ > a,
+ > span {
+ margin-left: 0;
+ @include border-left-radius($border-radius-base);
+ }
+ }
+ &:last-child {
+ > a,
+ > span {
+ @include border-right-radius($border-radius-base);
+ }
+ }
+ }
+
+ > li > a,
+ > li > span {
+ @include hover-focus {
+ color: $pagination-hover-color;
+ background-color: $pagination-hover-bg;
+ border-color: $pagination-hover-border;
+ }
+ }
+
+ > .active > a,
+ > .active > span {
+ @include plain-hover-focus {
+ z-index: 2;
+ color: $pagination-active-color;
+ cursor: default;
+ background-color: $pagination-active-bg;
+ border-color: $pagination-active-border;
+ }
+ }
+
+ > .disabled {
+ > span,
+ > a {
+ @include plain-hover-focus {
+ color: $pagination-disabled-color;
+ cursor: $cursor-disabled;
+ background-color: $pagination-disabled-bg;
+ border-color: $pagination-disabled-border;
+ }
+ }
+ }
+}
+
+
+//
+// Sizing
+//
+
+.pagination-lg {
- @include pagination-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $border-radius-sm);
++ @include pagination-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $border-radius-lg);
+}
+
+.pagination-sm {
++ @include pagination-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $border-radius-sm);
+}
--- /dev/null
- // Reset font and text properties given new insertion method
- font-family: $font-family-base;
- font-size: $font-size-base;
- font-weight: normal;
- line-height: $line-height-base;
- text-align: left;
- // Overrides for proper insertion
- white-space: normal;
+//
+// Popovers
+// --------------------------------------------------
+
+
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: $zindex-popover;
+ display: block;
+ max-width: $popover-max-width;
+ padding: 1px;
++ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
++ // So reset our font and text properties to avoid inheriting weird values.
++ @include reset-text();
++ font-size: $font-size-sm;
+ background-color: $popover-bg;
+ background-clip: padding-box;
+ border: 1px solid $popover-border-color;
+ @include border-radius($border-radius-lg);
+ @include box-shadow(0 5px 10px rgba(0,0,0,.2));
+
+
+ // Popover directions
+
+ &.popover-top,
+ &.bs-tether-element-attached-bottom {
+ margin-top: -$popover-arrow-width;
+
+ .popover-arrow {
+ bottom: -$popover-arrow-outer-width;
+ left: 50%;
+ margin-left: -$popover-arrow-outer-width;
+ border-top-color: $popover-arrow-outer-color;
+ border-bottom-width: 0;
+ &:after {
+ bottom: 1px;
+ margin-left: -$popover-arrow-width;
+ content: "";
+ border-top-color: $popover-arrow-color;
+ border-bottom-width: 0;
+ }
+ }
+ }
+
+ &.popover-right,
+ &.bs-tether-element-attached-left {
+ margin-left: $popover-arrow-width;
+
+ .popover-arrow {
+ top: 50%;
+ left: -$popover-arrow-outer-width;
+ margin-top: -$popover-arrow-outer-width;
+ border-right-color: $popover-arrow-outer-color;
+ border-left-width: 0;
+ &:after {
+ bottom: -$popover-arrow-width;
+ left: 1px;
+ content: "";
+ border-right-color: $popover-arrow-color;
+ border-left-width: 0;
+ }
+ }
+ }
+
+ &.popover-bottom,
+ &.bs-tether-element-attached-top {
+ margin-top: $popover-arrow-width;
+
+ .popover-arrow {
+ top: -$popover-arrow-outer-width;
+ left: 50%;
+ margin-left: -$popover-arrow-outer-width;
+ border-top-width: 0;
+ border-bottom-color: $popover-arrow-outer-color;
+ &:after {
+ top: 1px;
+ margin-left: -$popover-arrow-width;
+ content: "";
+ border-top-width: 0;
+ border-bottom-color: $popover-arrow-color;
+ }
+ }
+ }
+
+ &.popover-left,
+ &.bs-tether-element-attached-right {
+ margin-left: -$popover-arrow-width;
+
+ .popover-arrow {
+ top: 50%;
+ right: -$popover-arrow-outer-width;
+ margin-top: -$popover-arrow-outer-width;
+ border-right-width: 0;
+ border-left-color: $popover-arrow-outer-color;
+ &:after {
+ right: 1px;
+ bottom: -$popover-arrow-width;
+ content: "";
+ border-right-width: 0;
+ border-left-color: $popover-arrow-color;
+ }
+ }
+ }
+}
+
+
+// Offset the popover to account for the popover arrow
+.popover-title {
+ padding: 8px 14px;
+ margin: 0; // reset heading margin
+ font-size: $font-size-base;
+ background-color: $popover-title-bg;
+ border-bottom: 1px solid darken($popover-title-bg, 5%);
+ @include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0);
+}
+
+.popover-content {
+ padding: 9px 14px;
+}
+
+
+// Arrows
+//
+// .popover-arrow is outer, .popover-arrow:after is inner
+
+.popover-arrow {
+ &,
+ &:after {
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ }
+}
+.popover-arrow {
+ border-width: $popover-arrow-outer-width;
+}
+.popover-arrow:after {
+ content: "";
+ border-width: $popover-arrow-width;
+}
--- /dev/null
- // Reset font and text properties given new insertion method
- font-family: $font-family-base;
+//
+// Tooltips
+// --------------------------------------------------
+
+
+// Base class
+.tooltip {
+ position: absolute;
+ z-index: $zindex-tooltip;
+ display: block;
- font-weight: normal;
- line-height: 1.4;
++ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
++ // So reset our font and text properties to avoid inheriting weird values.
++ @include reset-text();
+ font-size: $font-size-sm;
- text-decoration: none;
+ opacity: 0;
+
+ &.in { opacity: $tooltip-opacity; }
+
+ &.tooltip-top,
+ &.bs-tether-element-attached-bottom {
+ padding: $tooltip-arrow-width 0;
+ margin-top: -3px;
+
+ .tooltip-arrow {
+ bottom: 0;
+ left: 50%;
+ margin-left: -$tooltip-arrow-width;
+ border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+ border-top-color: $tooltip-arrow-color;
+ }
+ }
+ &.tooltip-right,
+ &.bs-tether-element-attached-left {
+ padding: 0 $tooltip-arrow-width;
+ margin-left: 3px;
+
+ .tooltip-arrow {
+ top: 50%;
+ left: 0;
+ margin-top: -$tooltip-arrow-width;
+ border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
+ border-right-color: $tooltip-arrow-color;
+ }
+ }
+ &.tooltip-bottom,
+ &.bs-tether-element-attached-top {
+ padding: $tooltip-arrow-width 0;
+ margin-top: 3px;
+
+ .tooltip-arrow {
+ top: 0;
+ left: 50%;
+ margin-left: -$tooltip-arrow-width;
+ border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+ border-bottom-color: $tooltip-arrow-color;
+ }
+ }
+ &.tooltip-left,
+ &.bs-tether-element-attached-right {
+ padding: 0 $tooltip-arrow-width;
+ margin-left: -3px;
+
+ .tooltip-arrow {
+ top: 50%;
+ right: 0;
+ margin-top: -$tooltip-arrow-width;
+ border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
+ border-left-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+ max-width: $tooltip-max-width;
+ padding: 3px 8px;
+ color: $tooltip-color;
+ text-align: center;
+ background-color: $tooltip-bg;
+ @include border-radius($border-radius-base);
+}
+
+// Arrows
+.tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
--- /dev/null
+//
+// Variables
+//
+
+
+// Colors
+//
+// Gray and brand colors for use across Bootstrap.
+
+$gray-dark: #373a3c !default;
+$gray-darker: $gray-dark !default; // TODO: remove
+$gray: #55595c !default;
+$gray-light: #818a91 !default;
+$gray-lighter: #eceeef !default;
+$gray-lightest: #f7f7f9 !default;
+
+$brand-primary: #0275d8 !default;
+$brand-success: #5cb85c !default;
+$brand-info: #5bc0de !default;
+$brand-warning: #f0ad4e !default;
+$brand-danger: #d9534f !default;
+
+
+// Scaffolding
+//
+// Settings for some of the most global styles.
+
+$body-bg: #fff !default;
+$text-color: $gray-dark !default;
+
+$link-color: $brand-primary !default;
+$link-hover-color: darken($link-color, 15%) !default;
+$link-hover-decoration: underline !default;
+
+
+// Global settings
+//
+// Quickly modify global styling by enabling or disabling features.
+
+$enable-flex: false !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-hover-media-query: false !default;
+
+
+// Component defaults
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+
+$spacer: 1rem !default;
+$spacer-x: $spacer !default;
+$spacer-y: $spacer !default;
+
+$border-width: .0625rem !default;
+
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
+$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base: $font-family-sans-serif !default;
+
+// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
+$font-size-root: 16px !default;
+
+$font-size-base: 1rem !default;
+$font-size-lg: 1.25rem !default;
+$font-size-sm: .85rem !default;
+$font-size-xs: .75rem !default;
+
+$font-size-h1: 2.75rem !default;
+$font-size-h2: 2.25rem !default;
+$font-size-h3: 1.75rem !default;
+$font-size-h4: 1.5rem !default;
+$font-size-h5: 1.25rem !default;
+$font-size-h6: 1rem !default;
+
+$line-height-base: 1.5 !default;
+
+// TODO: nuke this
+$line-height-computed: 1 !default;
+
+$headings-font-family: inherit !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.1 !default;
+$headings-color: inherit !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+$padding-base-vertical: .5rem !default;
+$padding-base-horizontal: .75rem !default;
+
+$padding-lg-vertical: .75rem !default;
+$padding-lg-horizontal: 1.5rem !default;
+
+$padding-sm-vertical: .3rem !default;
+$padding-sm-horizontal: .75rem !default;
+
+$padding-xs-vertical: .2rem !default;
+$padding-xs-horizontal: .5rem !default;
+
+$line-height-lg: (4/3) !default;
+$line-height-sm: 1.5 !default;
+
+$border-radius-base: .25rem !default;
+$border-radius-lg: .3rem !default;
+$border-radius-sm: .2rem !default;
+
+$component-active-color: #fff !default;
+$component-active-bg: $brand-primary !default;
+
+$caret-width-base: .3em !default;
+$caret-width-large: $caret-width-base !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding: .75rem !default;
+$table-sm-cell-padding: .3rem !default;
+
+$table-bg: transparent !default;
+$table-bg-accent: #f9f9f9 !default;
+$table-bg-hover: #f5f5f5 !default;
+$table-bg-active: $table-bg-hover !default;
+
+$table-border-color: $gray-lighter !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight: normal !default;
+
+$btn-primary-color: #fff !default;
+$btn-primary-bg: $brand-primary !default;
+$btn-primary-border: darken($btn-primary-bg, 5%) !default;
+
+$btn-secondary-color: $gray-dark !default;
+$btn-secondary-bg: #fff !default;
+$btn-secondary-border: #ccc !default;
+
+$btn-info-color: #fff !default;
+$btn-info-bg: $brand-info !default;
+$btn-info-border: darken($btn-info-bg, 5%) !default;
+
+$btn-success-color: #fff !default;
+$btn-success-bg: $brand-success !default;
+$btn-success-border: darken($btn-success-bg, 5%) !default;
+
+$btn-warning-color: #fff !default;
+$btn-warning-bg: $brand-warning !default;
+$btn-warning-border: darken($btn-warning-bg, 5%) !default;
+
+$btn-danger-color: #fff !default;
+$btn-danger-bg: $brand-danger !default;
+$btn-danger-border: darken($btn-danger-bg, 5%) !default;
+
+$btn-link-disabled-color: $gray-light !default;
+
++// Allows for customizing button radius independently from global border radius
++$btn-border-radius-base: $border-radius-base;
++$btn-border-radius-large: $border-radius-large;
++$btn-border-radius-small: $border-radius-small;
++
+
+// Forms
+
+$input-bg: #fff !default;
+$input-bg-disabled: $gray-lighter !default;
+
+$input-color: $gray !default;
+$input-border: #ccc !default;
+
+// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
+$input-border-radius: $border-radius-base !default;
+$input-border-radius-lg: $border-radius-lg !default;
+$input-border-radius-sm: $border-radius-sm !default;
+
+$input-border-focus: #66afe9 !default;
+$input-box-shadow-focus: rgba(102,175,233,.6) !default;
+
+$input-color-placeholder: #999 !default;
+
+$input-height-base: (($font-size-base * $line-height-base) + ($padding-base-vertical * 2) + ($border-width * 2)) !default;
+$input-height-lg: (($font-size-lg * $line-height-lg) + ($padding-lg-vertical * 2) + ($border-width * 2)) !default;
+$input-height-sm: (($font-size-sm * $line-height-sm) + ($padding-sm-vertical * 2) + ($border-width * 2)) !default;
+
+$form-group-margin-bottom: 15px;
+
+$input-group-addon-bg: $gray-lighter !default;
+$input-group-addon-border-color: $input-border !default;
+
+$cursor-disabled: not-allowed !default;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-bg: #fff !default;
+$dropdown-border: rgba(0,0,0,.15) !default;
+$dropdown-divider-bg: #e5e5e5 !default;
+
+$dropdown-link-color: $gray-dark !default;
+$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
+$dropdown-link-hover-bg: #f5f5f5 !default;
+
+$dropdown-link-active-color: $component-active-color !default;
+$dropdown-link-active-bg: $component-active-bg !default;
+
+$dropdown-link-disabled-color: $gray-light !default;
+
+$dropdown-header-color: $gray-light !default;
+
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar: 1000 !default;
+$zindex-dropdown: 1000 !default;
+$zindex-popover: 1060 !default;
+$zindex-tooltip: 1070 !default;
+$zindex-navbar-fixed: 1030 !default;
+$zindex-navbar-sticky: 1030 !default;
+$zindex-modal-bg: 1040 !default;
+$zindex-modal: 1050 !default;
+
+
+// Media queries breakpoints
+//
+// Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.
+
+// Grid system
+//
+// Define your custom responsive grid.
+$grid-breakpoints: (
+ // Extra small screen / phone
+ xs: 0,
+ // Small screen / phone
+ sm: 34em,
+ // Medium screen / tablet
+ md: 48em,
+ // Large screen / desktop
+ lg: 62em,
+ // Extra large screen / wide desktop
+ xl: 75em
+) !default;
+
+// Number of columns in the grid.
+$grid-columns: 12 !default;
+
+// Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width: 1.5rem !default;
+
+
+// Container sizes
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+ sm: 34rem, // 480
+ md: 45rem, // 720
+ lg: 60rem, // 960
+ xl: 72.25rem // 1140
+) !default;
+
+
+// Navbar
+//
+//
+
+// Basics of a navbar
+// $navbar-height: 50px !default;
+$navbar-margin-bottom: $line-height-computed !default;
+$navbar-border-radius: $border-radius-base !default;
+$navbar-padding-horizontal: $spacer !default;
+$navbar-padding-vertical: ($spacer / 2) !default;
+$navbar-collapse-max-height: 340px !default;
+
+$navbar-default-color: #777 !default;
+$navbar-default-bg: #f8f8f8 !default;
+$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
+
+$navbar-default-link-color: #777 !default;
+$navbar-default-link-hover-color: #333 !default;
+$navbar-default-link-hover-bg: transparent !default;
+$navbar-default-link-active-color: #555 !default;
+$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-disabled-color: #ccc !default;
+$navbar-default-link-disabled-bg: transparent !default;
+
+$navbar-default-brand-color: $navbar-default-link-color !default;
+$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-bg: transparent !default;
+
+$navbar-default-toggle-hover-bg: #ddd !default;
+$navbar-default-toggle-icon-bar-bg: #888 !default;
+$navbar-default-toggle-border-color: #ddd !default;
+
+
+// Inverted navbar
+$navbar-inverse-color: lighten($gray-light, 12%) !default;
+$navbar-inverse-bg: #373a3c !default;
+$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
+
+$navbar-inverse-link-color: lighten($gray-light, 15%) !default;
+$navbar-inverse-link-hover-color: #fff !default;
+$navbar-inverse-link-hover-bg: transparent !default;
+$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
+$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-disabled-color: #444 !default;
+$navbar-inverse-link-disabled-bg: transparent !default;
+
+$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
+$navbar-inverse-brand-hover-color: #fff !default;
+$navbar-inverse-brand-hover-bg: transparent !default;
+
+$navbar-inverse-toggle-hover-bg: #333 !default;
+$navbar-inverse-toggle-icon-bar-bg: #fff !default;
+$navbar-inverse-toggle-border-color: #333 !default;
+
+
+// Navs
+
+$nav-link-padding: .75em 1em !default;
+$nav-link-hover-bg: $gray-lighter !default;
+
+$nav-disabled-link-color: $gray-light !default;
+$nav-disabled-link-hover-color: $gray-light !default;
+
+$nav-tabs-border-color: #ddd !default;
+
+$nav-tabs-link-hover-border-color: $gray-lighter !default;
+
+$nav-tabs-active-link-hover-bg: $body-bg !default;
+$nav-tabs-active-link-hover-color: $gray !default;
+$nav-tabs-active-link-hover-border-color: #ddd !default;
+
+$nav-tabs-justified-link-border-color: #ddd !default;
+$nav-tabs-justified-active-link-border-color: $body-bg !default;
+
+$nav-pills-border-radius: $border-radius-base !default;
+$nav-pills-active-link-hover-bg: $component-active-bg !default;
+$nav-pills-active-link-hover-color: $component-active-color !default;
+
+
+// Pagination
+
+$pagination-color: $link-color !default;
+$pagination-bg: #fff !default;
+$pagination-border: #ddd !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $gray-lighter !default;
+$pagination-hover-border: #ddd !default;
+
+$pagination-active-color: #fff !default;
+$pagination-active-bg: $brand-primary !default;
+$pagination-active-border: $brand-primary !default;
+
+$pagination-disabled-color: $gray-light !default;
+$pagination-disabled-bg: #fff !default;
+$pagination-disabled-border: #ddd !default;
+
+
+// Pager
+
+$pager-bg: $pagination-bg !default;
+$pager-border: $pagination-border !default;
+$pager-border-radius: 15px !default;
+
+$pager-hover-bg: $pagination-hover-bg !default;
+
+$pager-active-bg: $pagination-active-bg !default;
+$pager-active-color: $pagination-active-color !default;
+
+$pager-disabled-color: $pagination-disabled-color !default;
+
+
+// Jumbotron
+
+$jumbotron-padding: 2rem !default;
+$jumbotron-color: inherit !default;
+$jumbotron-bg: $gray-lighter !default;
+$jumbotron-heading-color: inherit !default;
+$jumbotron-heading-font-size: ($font-size-base * 4.5) !default;
+// $jumbotron-font-size: ceil(($font-size-base * 1.5)) !default;
+
+
+// Form states and alerts
+//
+// Define colors for form feedback states and, by default, alerts.
+
+$state-success-text: #3c763d !default;
+$state-success-bg: #dff0d8 !default;
+$state-success-border: darken($state-success-bg, 5%) !default;
+
+$state-info-text: #31708f !default;
+$state-info-bg: #d9edf7 !default;
+$state-info-border: darken($state-info-bg, 7%) !default;
+
+$state-warning-text: #8a6d3b !default;
+$state-warning-bg: #fcf8e3 !default;
+$state-warning-border: darken($state-warning-bg, 5%) !default;
+
+$state-danger-text: #a94442 !default;
+$state-danger-bg: #f2dede !default;
+$state-danger-border: darken($state-danger-bg, 5%) !default;
+
+
+// Tooltips
+
+$tooltip-max-width: 200px !default;
+$tooltip-color: #fff !default;
+$tooltip-bg: #000 !default;
+$tooltip-opacity: .9 !default;
+
+$tooltip-arrow-width: 5px !default;
+$tooltip-arrow-color: $tooltip-bg !default;
+
+
+// Popovers
+
+$popover-bg: #fff !default;
+$popover-max-width: 276px !default;
+$popover-border-color: rgba(0,0,0,.2) !default;
+$popover-fallback-border-color: #ccc !default;
+
+$popover-title-bg: darken($popover-bg, 3%) !default;
+
+$popover-arrow-width: 10px !default;
+$popover-arrow-color: $popover-bg !default;
+
+$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
+$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
+$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default;
+
+
+// Labels
+
+$label-default-bg: $gray-light !default;
+$label-primary-bg: $brand-primary !default;
+$label-success-bg: $brand-success !default;
+$label-info-bg: $brand-info !default;
+$label-warning-bg: $brand-warning !default;
+$label-danger-bg: $brand-danger !default;
+
+$label-color: #fff !default;
+$label-link-hover-color: #fff !default;
+
+
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding: 15px !default;
+
+$modal-title-padding: 15px !default;
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-bg: #fff !default;
+$modal-content-border-color: rgba(0,0,0,.2) !default;
+
+$modal-backdrop-bg: #000 !default;
+$modal-backdrop-opacity: .5 !default;
+$modal-header-border-color: #e5e5e5 !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+
+$modal-lg: 900px !default;
+$modal-md: 600px !default;
+$modal-sm: 300px !default;
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding: 15px !default;
+$alert-border-radius: $border-radius-base !default;
+$alert-link-font-weight: bold !default;
+
+$alert-success-bg: $state-success-bg !default;
+$alert-success-text: $state-success-text !default;
+$alert-success-border: $state-success-border !default;
+
+$alert-info-bg: $state-info-bg !default;
+$alert-info-text: $state-info-text !default;
+$alert-info-border: $state-info-border !default;
+
+$alert-warning-bg: $state-warning-bg !default;
+$alert-warning-text: $state-warning-text !default;
+$alert-warning-border: $state-warning-border !default;
+
+$alert-danger-bg: $state-danger-bg !default;
+$alert-danger-text: $state-danger-text !default;
+$alert-danger-border: $state-danger-border !default;
+
+
+// Progress bars
+
+$progress-bg: #f5f5f5 !default;
+$progress-bar-color: #fff !default;
+$progress-border-radius: $border-radius-base !default;
+
+$progress-bar-bg: $brand-primary !default;
+$progress-bar-success-bg: $brand-success !default;
+$progress-bar-warning-bg: $brand-warning !default;
+$progress-bar-danger-bg: $brand-danger !default;
+$progress-bar-info-bg: $brand-info !default;
+
+
+// List group
+
+$list-group-bg: #fff !default;
+$list-group-border: #ddd !default;
+$list-group-border-radius: $border-radius-base !default;
+
+$list-group-hover-bg: #f5f5f5 !default;
+$list-group-active-color: $component-active-color !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-border: $list-group-active-bg !default;
+$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
+
+$list-group-disabled-color: $gray-light !default;
+$list-group-disabled-bg: $gray-lighter !default;
+$list-group-disabled-text-color: $list-group-disabled-color !default;
+
+$list-group-link-color: #555 !default;
+$list-group-link-hover-color: $list-group-link-color !default;
+$list-group-link-heading-color: #333 !default;
+
+
+// Thumbnails
+
+$thumbnail-padding: .25rem !default;
+$thumbnail-bg: $body-bg !default;
+$thumbnail-border: #ddd !default;
+$thumbnail-border-radius: $border-radius-base !default;
+
+
+// Badges
+
+$badge-color: #fff !default;
+$badge-link-hover-color: #fff !default;
+$badge-bg: $gray-light !default;
+
+$badge-active-color: $link-color !default;
+$badge-active-bg: #fff !default;
+
+$badge-font-weight: bold !default;
+$badge-line-height: 1 !default;
+$badge-border-radius: 2em !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-padding-vertical: .75rem !default;
+$breadcrumb-padding-horizontal: 1rem !default;
+
+$breadcrumb-bg: $gray-lighter !default;
+$breadcrumb-divider-color: $gray-light !default;
+$breadcrumb-active-color: $gray-light !default;
+$breadcrumb-divider: "/" !default;
+
+
+// Carousel
+
+$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
+
+$carousel-control-color: #fff !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: .5 !default;
+$carousel-control-font-size: 20px !default;
+
+$carousel-indicator-active-bg: #fff !default;
+$carousel-indicator-border-color: #fff !default;
+
+$carousel-caption-color: #fff !default;
+
+
+// Close
+
+$close-font-weight: bold !default;
+$close-color: #000 !default;
+$close-text-shadow: 0 1px 0 #fff !default;
+
+
+// Code
+
+$code-color: #bd4147 !default;
+$code-bg: #f7f7f9 !default;
+
+$kbd-color: #fff !default;
+$kbd-bg: #333 !default;
+
+$pre-bg: #f7f7f9 !default;
+$pre-color: $gray-dark !default;
+$pre-border-color: #ccc !default;
+$pre-scrollable-max-height: 340px !default;
+
+
+// Type
+
+$component-offset-horizontal: 180px !default;
+$text-muted: $gray-light !default;
+$abbr-border-color: $gray-light !default;
+$headings-small-color: $gray-light !default;
+$blockquote-small-color: $gray-light !default;
+$blockquote-font-size: ($font-size-base * 1.25) !default;
+$blockquote-border-color: $gray-lighter !default;
+$hr-border: $gray-lighter !default;
--- /dev/null
- a.list-group-item-#{state} {
+// List Groups
+
+@mixin list-group-item-variant($state, $background, $color) {
+ .list-group-item-#{state} {
+ color: $color;
+ background-color: $background;
+ }
+
++ a.list-group-item-#{state},
++ button.list-group-item-#{state} {
+ color: $color;
+
+ .list-group-item-heading {
+ color: inherit;
+ }
+
+ @include hover-focus {
+ color: $color;
+ background-color: darken($background, 5%);
+ }
+
+ &.active {
+ @include plain-hover-focus {
+ color: #fff;
+ background-color: $color;
+ border-color: $color;
+ }
+ }
+ }
+}
--- /dev/null
- @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
+// Pagination
+
++@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+ > li {
+ > a,
+ > span {
+ padding: $padding-vertical $padding-horizontal;
+ font-size: $font-size;
++ line-height: $line-height;
+ }
+ &:first-child {
+ > a,
+ > span {
+ @include border-left-radius($border-radius);
+ }
+ }
+ &:last-child {
+ > a,
+ > span {
+ @include border-right-radius($border-radius);
+ }
+ }
+ }
+}
projects / thirdparty / bootstrap.git / commitdiff
