├── CNAME
├── test-infra
├── requirements.txt
├── S3Cachefile.json
└── uncached-npm-install.sh
├── docs
├── favicon.ico
├── apple-touch-icon.png
├── assets
│ ├── img
│ │ ├── devices.png
│ │ ├── components.png
│ │ ├── expo-lyft.jpg
│ │ ├── expo-riot.jpg
│ │ ├── expo-vogue.jpg
│ │ ├── sass-less.png
│ │ └── expo-newsweek.jpg
│ ├── flash
│ │ └── ZeroClipboard.swf
│ ├── js
│ │ ├── vendor
│ │ │ └── autoprefixer.js
│ │ ├── ie8-responsive-file-warning.js
│ │ ├── ie10-viewport-bug-workaround.js
│ │ └── ie-emulation-modes-warning.js
│ ├── brand
│ │ ├── bootstrap-solid.svg
│ │ ├── bootstrap-punchout.svg
│ │ └── bootstrap-outline.svg
│ └── css
│ │ └── src
│ │ └── pygments-manni.css
├── examples
│ ├── navbar-fixed-top
│ │ └── navbar-fixed-top.css
│ ├── screenshots
│ │ ├── blog.jpg
│ │ ├── cover.jpg
│ │ ├── grid.jpg
│ │ ├── theme.jpg
│ │ ├── carousel.jpg
│ │ ├── navbar.jpg
│ │ ├── sign-in.jpg
│ │ ├── dashboard.jpg
│ │ ├── jumbotron.jpg
│ │ ├── offcanvas.jpg
│ │ ├── justified-nav.jpg
│ │ ├── navbar-fixed.jpg
│ │ ├── navbar-static.jpg
│ │ ├── sticky-footer.jpg
│ │ ├── non-responsive.jpg
│ │ ├── jumbotron-narrow.jpg
│ │ ├── starter-template.jpg
│ │ ├── equal-height-columns.jpg
│ │ └── sticky-footer-navbar.jpg
│ ├── navbar
│ │ └── navbar.css
│ ├── navbar-static-top
│ │ └── navbar-static-top.css
│ ├── starter-template
│ │ ├── starter-template.css
│ │ └── index.html
│ ├── jumbotron
│ │ └── jumbotron.css
│ ├── offcanvas
│ │ ├── offcanvas.js
│ │ └── offcanvas.css
│ ├── theme
│ │ └── theme.css
│ ├── grid
│ │ └── grid.css
│ ├── tooltip-viewport
│ │ ├── tooltip-viewport.css
│ │ ├── tooltip-viewport.js
│ │ └── index.html
│ ├── sticky-footer
│ │ ├── sticky-footer.css
│ │ └── index.html
│ ├── sticky-footer-navbar
│ │ └── sticky-footer-navbar.css
│ ├── signin
│ │ ├── signin.css
│ │ └── index.html
│ ├── jumbotron-narrow
│ │ └── jumbotron-narrow.css
│ ├── dashboard
│ │ └── dashboard.css
│ ├── justified-nav
│ │ └── justified-nav.css
│ ├── carousel
│ │ └── carousel.css
│ └── blog
│ │ └── blog.css
├── dist
│ ├── fonts
│ │ ├── glyphicons-halflings-regular.eot
│ │ ├── glyphicons-halflings-regular.ttf
│ │ ├── glyphicons-halflings-regular.woff
│ │ └── glyphicons-halflings-regular.woff2
│ └── js
│ │ └── npm.js
├── robots.txt
├── _includes
│ ├── nav
│ │ ├── about.html
│ │ ├── migration.html
│ │ ├── main.html
│ │ ├── customize.html
│ │ └── getting-started.html
│ ├── ads.html
│ ├── components
│ │ ├── page-header.html
│ │ ├── breadcrumbs.html
│ │ ├── wells.html
│ │ ├── jumbotron.html
│ │ ├── responsive-embed.html
│ │ ├── badges.html
│ │ └── labels.html
│ ├── getting-started
│ │ ├── translations.html
│ │ ├── tools.html
│ │ ├── community.html
│ │ ├── disabling-responsiveness.html
│ │ ├── template.html
│ │ ├── license.html
│ │ ├── third-party-support.html
│ │ ├── grunt.html
│ │ └── whats-included.html
│ ├── js
│ │ └── transitions.html
│ ├── css
│ │ ├── sass.html
│ │ ├── images.html
│ │ └── code.html
│ ├── header.html
│ └── footer.html
├── _data
│ ├── sass-team.yml
│ ├── showcase.yml
│ ├── core-team.yml
│ └── translations.yml
├── _plugins
│ ├── bridge.rb
│ └── bugify.rb
├── _layouts
│ ├── home.html
│ └── default.html
├── css.html
├── javascript.html
├── _jade
│ ├── customizer-nav.jade
│ └── customizer-variables.jade
├── sitemap.xml
├── components.html
├── getting-started.html
└── browser-bugs.html
├── fonts
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
├── dist
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js
│ └── npm.js
├── js
├── tests
│ ├── unit
│ │ ├── .jshintrc
│ │ ├── phantom.js
│ │ └── alert.js
│ ├── visual
│ │ ├── alert.html
│ │ ├── popover.html
│ │ ├── carousel.html
│ │ ├── button.html
│ │ └── tooltip.html
│ └── README.md
├── .jshintrc
├── transition.js
├── .jscsrc
└── alert.js
├── grunt
├── .jshintrc
├── bs-commonjs-generator.js
├── bs-raw-files-generator.js
├── configBridge.json
├── bs-glyphicons-data-generator.js
└── sauce_browsers.yml
├── less
├── mixins
│ ├── center-block.less
│ ├── size.less
│ ├── opacity.less
│ ├── text-emphasis.less
│ ├── text-overflow.less
│ ├── background-variant.less
│ ├── tab-focus.less
│ ├── resize.less
│ ├── labels.less
│ ├── progress-bar.less
│ ├── nav-divider.less
│ ├── reset-filter.less
│ ├── alerts.less
│ ├── nav-vertical-align.less
│ ├── responsive-visibility.less
│ ├── reset-text.less
│ ├── border-radius.less
│ ├── pagination.less
│ ├── panels.less
│ ├── hide-text.less
│ ├── list-group.less
│ ├── clearfix.less
│ ├── table-row.less
│ ├── image.less
│ ├── buttons.less
│ ├── forms.less
│ └── grid-framework.less
├── .csslintrc
├── wells.less
├── breadcrumbs.less
├── responsive-embed.less
├── component-animations.less
├── close.less
├── thumbnails.less
├── utilities.less
├── pager.less
├── media.less
├── mixins.less
├── labels.less
├── jumbotron.less
├── badges.less
├── bootstrap.less
├── code.less
├── grid.less
├── alerts.less
├── progress-bars.less
├── pagination.less
└── print.less
├── .editorconfig
├── .gitattributes
├── CHANGELOG.md
├── .gitignore
├── bower.json
├── composer.json
├── package.js
├── LICENSE
├── _config.yml
└── package.json
/CNAME:
--------------------------------------------------------------------------------
1 | getbootstrap.com
2 |
--------------------------------------------------------------------------------
/test-infra/requirements.txt:
--------------------------------------------------------------------------------
1 | boto==2.25.0
2 |
--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/favicon.ico
--------------------------------------------------------------------------------
/docs/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/apple-touch-icon.png
--------------------------------------------------------------------------------
/docs/assets/img/devices.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/assets/img/devices.png
--------------------------------------------------------------------------------
/docs/assets/img/components.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/assets/img/components.png
--------------------------------------------------------------------------------
/docs/assets/img/expo-lyft.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/assets/img/expo-lyft.jpg
--------------------------------------------------------------------------------
/docs/assets/img/expo-riot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/assets/img/expo-riot.jpg
--------------------------------------------------------------------------------
/docs/assets/img/expo-vogue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/assets/img/expo-vogue.jpg
--------------------------------------------------------------------------------
/docs/assets/img/sass-less.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/assets/img/sass-less.png
--------------------------------------------------------------------------------
/docs/assets/img/expo-newsweek.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/assets/img/expo-newsweek.jpg
--------------------------------------------------------------------------------
/docs/examples/navbar-fixed-top/navbar-fixed-top.css:
--------------------------------------------------------------------------------
1 | body {
2 | min-height: 2000px;
3 | padding-top: 70px;
4 | }
5 |
--------------------------------------------------------------------------------
/docs/assets/flash/ZeroClipboard.swf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/assets/flash/ZeroClipboard.swf
--------------------------------------------------------------------------------
/docs/examples/screenshots/blog.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/blog.jpg
--------------------------------------------------------------------------------
/docs/examples/screenshots/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/cover.jpg
--------------------------------------------------------------------------------
/docs/examples/screenshots/grid.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/grid.jpg
--------------------------------------------------------------------------------
/docs/examples/screenshots/theme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/theme.jpg
--------------------------------------------------------------------------------
/docs/assets/js/vendor/autoprefixer.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/assets/js/vendor/autoprefixer.js
--------------------------------------------------------------------------------
/docs/examples/screenshots/carousel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/carousel.jpg
--------------------------------------------------------------------------------
/docs/examples/screenshots/navbar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/navbar.jpg
--------------------------------------------------------------------------------
/docs/examples/screenshots/sign-in.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/sign-in.jpg
--------------------------------------------------------------------------------
/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/docs/examples/screenshots/dashboard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/dashboard.jpg
--------------------------------------------------------------------------------
/docs/examples/screenshots/jumbotron.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/jumbotron.jpg
--------------------------------------------------------------------------------
/docs/examples/screenshots/offcanvas.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/offcanvas.jpg
--------------------------------------------------------------------------------
/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/fonts/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/dist/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/dist/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/dist/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/dist/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/docs/examples/screenshots/justified-nav.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/justified-nav.jpg
--------------------------------------------------------------------------------
/docs/examples/screenshots/navbar-fixed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/navbar-fixed.jpg
--------------------------------------------------------------------------------
/docs/examples/screenshots/navbar-static.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/navbar-static.jpg
--------------------------------------------------------------------------------
/docs/examples/screenshots/sticky-footer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/sticky-footer.jpg
--------------------------------------------------------------------------------
/dist/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/dist/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/dist/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/dist/fonts/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/docs/examples/screenshots/non-responsive.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/non-responsive.jpg
--------------------------------------------------------------------------------
/js/tests/unit/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends" : "../../.jshintrc",
3 | "devel" : true,
4 | "es3" : false,
5 | "qunit" : true
6 | }
7 |
--------------------------------------------------------------------------------
/docs/dist/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/dist/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/docs/dist/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/dist/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/docs/examples/navbar/navbar.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 20px;
3 | padding-bottom: 20px;
4 | }
5 |
6 | .navbar {
7 | margin-bottom: 20px;
8 | }
9 |
--------------------------------------------------------------------------------
/docs/examples/screenshots/jumbotron-narrow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/jumbotron-narrow.jpg
--------------------------------------------------------------------------------
/docs/examples/screenshots/starter-template.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/starter-template.jpg
--------------------------------------------------------------------------------
/docs/dist/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/dist/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/docs/dist/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/dist/fonts/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/docs/examples/screenshots/equal-height-columns.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/equal-height-columns.jpg
--------------------------------------------------------------------------------
/docs/examples/screenshots/sticky-footer-navbar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phonbopit/bootstrap/master/docs/examples/screenshots/sticky-footer-navbar.jpg
--------------------------------------------------------------------------------
/docs/examples/navbar-static-top/navbar-static-top.css:
--------------------------------------------------------------------------------
1 | body {
2 | min-height: 2000px;
3 | }
4 |
5 | .navbar-static-top {
6 | margin-bottom: 19px;
7 | }
8 |
--------------------------------------------------------------------------------
/grunt/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends" : "../js/.jshintrc",
3 | "asi" : false,
4 | "browser" : false,
5 | "es3" : false,
6 | "node" : true
7 | }
8 |
--------------------------------------------------------------------------------
/docs/examples/starter-template/starter-template.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 50px;
3 | }
4 | .starter-template {
5 | padding: 40px 15px;
6 | text-align: center;
7 | }
8 |
--------------------------------------------------------------------------------
/less/mixins/center-block.less:
--------------------------------------------------------------------------------
1 | // Center-align a block level element
2 |
3 | .center-block() {
4 | display: block;
5 | margin-left: auto;
6 | margin-right: auto;
7 | }
8 |
--------------------------------------------------------------------------------
/docs/examples/jumbotron/jumbotron.css:
--------------------------------------------------------------------------------
1 | /* Move down content because we have a fixed navbar that is 50px tall */
2 | body {
3 | padding-top: 50px;
4 | padding-bottom: 20px;
5 | }
6 |
--------------------------------------------------------------------------------
/docs/robots.txt:
--------------------------------------------------------------------------------
1 | ---
2 | ---
3 |
4 | # www.robotstxt.org/
5 |
6 | # Allow crawling of all content
7 | User-agent: *
8 | Disallow:
9 | Sitemap: {{ site.url }}/sitemap.xml
10 |
--------------------------------------------------------------------------------
/docs/examples/offcanvas/offcanvas.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function () {
2 | $('[data-toggle="offcanvas"]').click(function () {
3 | $('.row-offcanvas').toggleClass('active')
4 | });
5 | });
--------------------------------------------------------------------------------
/less/mixins/size.less:
--------------------------------------------------------------------------------
1 | // Sizing shortcuts
2 |
3 | .size(@width; @height) {
4 | width: @width;
5 | height: @height;
6 | }
7 |
8 | .square(@size) {
9 | .size(@size; @size);
10 | }
11 |
--------------------------------------------------------------------------------
/docs/_includes/nav/about.html:
--------------------------------------------------------------------------------
1 |
2 | History
3 |
4 |
5 | Team
6 |
7 |
8 | Brand guidelines
9 |
10 |
--------------------------------------------------------------------------------
/less/mixins/opacity.less:
--------------------------------------------------------------------------------
1 | // Opacity
2 |
3 | .opacity(@opacity) {
4 | opacity: @opacity;
5 | // IE8 filter
6 | @opacity-ie: (@opacity * 100);
7 | filter: ~"alpha(opacity=@{opacity-ie})";
8 | }
9 |
--------------------------------------------------------------------------------
/less/mixins/text-emphasis.less:
--------------------------------------------------------------------------------
1 | // Typography
2 |
3 | .text-emphasis-variant(@color) {
4 | color: @color;
5 | a&:hover,
6 | a&:focus {
7 | color: darken(@color, 10%);
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/less/mixins/text-overflow.less:
--------------------------------------------------------------------------------
1 | // Text overflow
2 | // Requires inline-block or block for proper styling
3 |
4 | .text-overflow() {
5 | overflow: hidden;
6 | text-overflow: ellipsis;
7 | white-space: nowrap;
8 | }
9 |
--------------------------------------------------------------------------------
/docs/_data/sass-team.yml:
--------------------------------------------------------------------------------
1 | - name: Thomas McDonald
2 | user: thomas-mcdonald
3 | gravatar: 24cd55ab1a62ffb113ab8c02f64c9301
4 |
5 | - name: Gleb Mazovetskiy
6 | user: glebm
7 | gravatar: 729f685b8e8d7e9feed18c177c82e59b
8 |
--------------------------------------------------------------------------------
/less/mixins/background-variant.less:
--------------------------------------------------------------------------------
1 | // Contextual backgrounds
2 |
3 | .bg-variant(@color) {
4 | background-color: @color;
5 | a&:hover,
6 | a&:focus {
7 | background-color: darken(@color, 10%);
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/less/mixins/tab-focus.less:
--------------------------------------------------------------------------------
1 | // WebKit-style focus
2 |
3 | .tab-focus() {
4 | // Default
5 | outline: thin dotted;
6 | // WebKit
7 | outline: 5px auto -webkit-focus-ring-color;
8 | outline-offset: -2px;
9 | }
10 |
--------------------------------------------------------------------------------
/docs/_plugins/bridge.rb:
--------------------------------------------------------------------------------
1 | require 'yaml'
2 |
3 | module Bridge
4 | class Generator < Jekyll::Generator
5 | def generate(site)
6 | site.data["configBridge"] = YAML.load_file("./grunt/configBridge.json")
7 | end
8 | end
9 | end
--------------------------------------------------------------------------------
/less/mixins/resize.less:
--------------------------------------------------------------------------------
1 | // Resize anything
2 |
3 | .resizable(@direction) {
4 | resize: @direction; // Options: horizontal, vertical, both
5 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
6 | }
7 |
--------------------------------------------------------------------------------
/less/mixins/labels.less:
--------------------------------------------------------------------------------
1 | // Labels
2 |
3 | .label-variant(@color) {
4 | background-color: @color;
5 |
6 | &[href] {
7 | &:hover,
8 | &:focus {
9 | background-color: darken(@color, 10%);
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/less/mixins/progress-bar.less:
--------------------------------------------------------------------------------
1 | // Progress bars
2 |
3 | .progress-bar-variant(@color) {
4 | background-color: @color;
5 |
6 | // Deprecated parent class requirement as of v3.2.0
7 | .progress-striped & {
8 | #gradient > .striped();
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/docs/_includes/nav/migration.html:
--------------------------------------------------------------------------------
1 |
2 | Major class changes
3 |
4 |
5 | What's new
6 |
7 |
8 | What's removed
9 |
10 |
11 | Additional notes
12 |
13 |
--------------------------------------------------------------------------------
/less/mixins/nav-divider.less:
--------------------------------------------------------------------------------
1 | // Horizontal dividers
2 | //
3 | // Dividers (basically an hr) within dropdowns and nav lists
4 |
5 | .nav-divider(@color: #e5e5e5) {
6 | height: 1px;
7 | margin: ((@line-height-computed / 2) - 1) 0;
8 | overflow: hidden;
9 | background-color: @color;
10 | }
11 |
--------------------------------------------------------------------------------
/less/mixins/reset-filter.less:
--------------------------------------------------------------------------------
1 | // Reset filters for IE
2 | //
3 | // When you need to remove a gradient background, do not forget to use this to reset
4 | // the IE filter for IE9 and below.
5 |
6 | .reset-filter() {
7 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
8 | }
9 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 |
3 | root = true
4 |
5 | [*]
6 | charset = utf-8
7 | end_of_line = lf
8 | indent_size = 2
9 | indent_style = space
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 |
13 | [*.md]
14 | trim_trailing_whitespace = false
15 |
16 | [*.py]
17 | indent_size = 4
18 |
--------------------------------------------------------------------------------
/docs/_includes/ads.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/less/mixins/alerts.less:
--------------------------------------------------------------------------------
1 | // Alerts
2 |
3 | .alert-variant(@background; @border; @text-color) {
4 | background-color: @background;
5 | border-color: @border;
6 | color: @text-color;
7 |
8 | hr {
9 | border-top-color: darken(@border, 5%);
10 | }
11 | .alert-link {
12 | color: darken(@text-color, 10%);
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/js/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "asi" : true,
3 | "browser" : true,
4 | "eqeqeq" : false,
5 | "eqnull" : true,
6 | "es3" : true,
7 | "expr" : true,
8 | "jquery" : true,
9 | "latedef" : true,
10 | "laxbreak" : true,
11 | "nonbsp" : true,
12 | "strict" : true,
13 | "undef" : true,
14 | "unused" : true
15 | }
16 |
--------------------------------------------------------------------------------
/docs/examples/theme/theme.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 70px;
3 | padding-bottom: 30px;
4 | }
5 |
6 | .theme-dropdown .dropdown-menu {
7 | position: static;
8 | display: block;
9 | margin-bottom: 20px;
10 | }
11 |
12 | .theme-showcase > p > .btn {
13 | margin: 5px 0;
14 | }
15 |
16 | .theme-showcase .navbar .container {
17 | width: auto;
18 | }
19 |
--------------------------------------------------------------------------------
/test-infra/S3Cachefile.json:
--------------------------------------------------------------------------------
1 | {
2 | "npm-modules": {
3 | "key": "./npm-shrinkwrap.json",
4 | "cache": "../node_modules",
5 | "generate": "./uncached-npm-install.sh"
6 | },
7 | "rubygems": {
8 | "key": "../pseudo_Gemfile.lock",
9 | "cache": "$GEMDIR",
10 | "generate": "gem install -N jekyll -v $JEKYLL_VERSION && gem install -N rouge -v $ROUGE_VERSION"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/less/mixins/nav-vertical-align.less:
--------------------------------------------------------------------------------
1 | // Navbar vertical align
2 | //
3 | // Vertically center elements in the navbar.
4 | // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
5 |
6 | .navbar-vertical-align(@element-height) {
7 | margin-top: ((@navbar-height - @element-height) / 2);
8 | margin-bottom: ((@navbar-height - @element-height) / 2);
9 | }
10 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Enforce Unix newlines
2 | *.css text eol=lf
3 | *.html text eol=lf
4 | *.js text eol=lf
5 | *.json text eol=lf
6 | *.less text eol=lf
7 | *.md text eol=lf
8 | *.svg text eol=lf
9 | *.yml text eol=lf
10 | # Don't diff or textually merge source maps
11 | *.map binary
12 |
13 | bootstrap-theme.css linguist-vendored=false
14 | bootstrap.css linguist-vendored=false
15 | bootstrap.js linguist-vendored=false
16 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | Bootstrap uses [GitHub's Releases feature](https://github.com/blog/1547-release-your-software) for its changelogs.
2 |
3 | See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap.
4 |
5 | Release announcement posts on [the official Bootstrap blog](http://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release.
6 |
--------------------------------------------------------------------------------
/test-infra/uncached-npm-install.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | set -e
3 | cd .. # /bootstrap/
4 | cp test-infra/npm-shrinkwrap.json npm-shrinkwrap.json
5 | # npm is flaky, so try multiple times
6 | MAXTRIES=3
7 | TRIES=1
8 | while ! npm install; do
9 | if [ $TRIES -ge $MAXTRIES ]; then
10 | exit 1
11 | fi
12 | TRIES=$(($TRIES + 1))
13 | echo "Retrying npm install (Try $TRIES of $MAXTRIES)..."
14 | done
15 | rm npm-shrinkwrap.json
16 |
--------------------------------------------------------------------------------
/less/mixins/responsive-visibility.less:
--------------------------------------------------------------------------------
1 | // Responsive utilities
2 |
3 | //
4 | // More easily include all the states for responsive-utilities.less.
5 | .responsive-visibility() {
6 | display: block !important;
7 | table& { display: table !important; }
8 | tr& { display: table-row !important; }
9 | th&,
10 | td& { display: table-cell !important; }
11 | }
12 |
13 | .responsive-invisibility() {
14 | display: none !important;
15 | }
16 |
--------------------------------------------------------------------------------
/docs/examples/grid/grid.css:
--------------------------------------------------------------------------------
1 | h4 {
2 | margin-top: 25px;
3 | }
4 | .row {
5 | margin-bottom: 20px;
6 | }
7 | .row .row {
8 | margin-top: 10px;
9 | margin-bottom: 0;
10 | }
11 | [class*="col-"] {
12 | padding-top: 15px;
13 | padding-bottom: 15px;
14 | background-color: #eee;
15 | background-color: rgba(86,61,124,.15);
16 | border: 1px solid #ddd;
17 | border: 1px solid rgba(86,61,124,.2);
18 | }
19 |
20 | hr {
21 | margin-top: 40px;
22 | margin-bottom: 40px;
23 | }
24 |
--------------------------------------------------------------------------------
/dist/js/npm.js:
--------------------------------------------------------------------------------
1 | // This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
2 | require('../../js/transition.js')
3 | require('../../js/alert.js')
4 | require('../../js/button.js')
5 | require('../../js/carousel.js')
6 | require('../../js/collapse.js')
7 | require('../../js/dropdown.js')
8 | require('../../js/modal.js')
9 | require('../../js/tooltip.js')
10 | require('../../js/popover.js')
11 | require('../../js/scrollspy.js')
12 | require('../../js/tab.js')
13 | require('../../js/affix.js')
--------------------------------------------------------------------------------
/docs/dist/js/npm.js:
--------------------------------------------------------------------------------
1 | // This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
2 | require('../../js/transition.js')
3 | require('../../js/alert.js')
4 | require('../../js/button.js')
5 | require('../../js/carousel.js')
6 | require('../../js/collapse.js')
7 | require('../../js/dropdown.js')
8 | require('../../js/modal.js')
9 | require('../../js/tooltip.js')
10 | require('../../js/popover.js')
11 | require('../../js/scrollspy.js')
12 | require('../../js/tab.js')
13 | require('../../js/affix.js')
--------------------------------------------------------------------------------
/docs/examples/tooltip-viewport/tooltip-viewport.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 1200px;
3 | }
4 | .tooltip {
5 | min-width: 250px;
6 | max-width: 500px;
7 | }
8 | .tooltip .tooltip-inner {
9 | min-width: 250px;
10 | max-width: 500px;
11 | min-height: 100px;
12 | text-align: left;
13 | }
14 | .container-viewport {
15 | position: absolute;
16 | top: 100px;
17 | right: 250px;
18 | left: 250px;
19 | height: 300px;
20 | background-color: #eee;
21 | }
22 | .btn-bottom {
23 | position: absolute;
24 | bottom: 0;
25 | left: 0;
26 | }
27 |
--------------------------------------------------------------------------------
/less/.csslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "adjoining-classes": false,
3 | "box-sizing": false,
4 | "box-model": false,
5 | "compatible-vendor-prefixes": false,
6 | "floats": false,
7 | "font-sizes": false,
8 | "gradients": false,
9 | "important": false,
10 | "known-properties": false,
11 | "outline-none": false,
12 | "qualified-headings": false,
13 | "regex-selectors": false,
14 | "shorthand": false,
15 | "text-indent": false,
16 | "unique-headings": false,
17 | "universal-selector": false,
18 | "unqualified-attributes": false
19 | }
20 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Ignore docs files
2 | _gh_pages
3 | _site
4 | .ruby-version
5 |
6 | # Numerous always-ignore extensions
7 | *.diff
8 | *.err
9 | *.log
10 | *.orig
11 | *.rej
12 | *.swo
13 | *.swp
14 | *.vi
15 | *.zip
16 | *~
17 |
18 | # OS or Editor folders
19 | ._*
20 | .cache
21 | .DS_Store
22 | .idea
23 | .project
24 | .settings
25 | .tmproj
26 | *.esproj
27 | *.sublime-project
28 | *.sublime-workspace
29 | nbproject
30 | Thumbs.db
31 |
32 | # Komodo
33 | .komodotools
34 | *.komodoproject
35 |
36 | # Folders to ignore
37 | bower_components
38 | node_modules
39 |
--------------------------------------------------------------------------------
/less/mixins/reset-text.less:
--------------------------------------------------------------------------------
1 | .reset-text() {
2 | font-family: @font-family-base;
3 | // We deliberately do NOT reset font-size.
4 | font-style: normal;
5 | font-weight: normal;
6 | letter-spacing: normal;
7 | line-break: auto;
8 | line-height: @line-height-base;
9 | text-align: left; // Fallback for where `start` is not supported
10 | text-align: start;
11 | text-decoration: none;
12 | text-shadow: none;
13 | text-transform: none;
14 | white-space: normal;
15 | word-break: normal;
16 | word-spacing: normal;
17 | word-wrap: normal;
18 | }
19 |
--------------------------------------------------------------------------------
/less/mixins/border-radius.less:
--------------------------------------------------------------------------------
1 | // Single side border-radius
2 |
3 | .border-top-radius(@radius) {
4 | border-top-right-radius: @radius;
5 | border-top-left-radius: @radius;
6 | }
7 | .border-right-radius(@radius) {
8 | border-bottom-right-radius: @radius;
9 | border-top-right-radius: @radius;
10 | }
11 | .border-bottom-radius(@radius) {
12 | border-bottom-right-radius: @radius;
13 | border-bottom-left-radius: @radius;
14 | }
15 | .border-left-radius(@radius) {
16 | border-bottom-left-radius: @radius;
17 | border-top-left-radius: @radius;
18 | }
19 |
--------------------------------------------------------------------------------
/docs/_layouts/home.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {% include header.html %}
6 |
7 |
8 | Skip to main content
2 |
3 |
4 |
A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
5 |
6 |
9 |
10 | {% highlight html %}
11 |
14 | {% endhighlight %}
15 |
2 |
3 |
4 |
Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.
5 |
10 |
We don't help organize or host translations, we just link to them.
11 |
Finished a new or better translation? Open a pull request to add it to our list.
12 |
2 |
3 |
4 |
5 |
Bootlint linter tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.
6 |
7 |
8 | {{ site.url }}/
9 | {{ site.time | date_to_xmlschema }}
10 | daily
11 | 1.0
12 |
13 | {% for page in site.html_pages %}
14 | {% if page.layout != "home" %}
15 |
16 | {{ site.url }}{{ page.url }}
17 | {{ site.time | date_to_xmlschema }}
18 | weekly
19 | 0.7
20 |
21 | {% endif %}
22 | {% endfor %}
23 |
24 |
--------------------------------------------------------------------------------
/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css:
--------------------------------------------------------------------------------
1 | /* Sticky footer styles
2 | -------------------------------------------------- */
3 | html {
4 | position: relative;
5 | min-height: 100%;
6 | }
7 | body {
8 | /* Margin bottom by footer height */
9 | margin-bottom: 60px;
10 | }
11 | .footer {
12 | position: absolute;
13 | bottom: 0;
14 | width: 100%;
15 | /* Set the fixed height of the footer here */
16 | height: 60px;
17 | background-color: #f5f5f5;
18 | }
19 |
20 |
21 | /* Custom page CSS
22 | -------------------------------------------------- */
23 | /* Not required for template or sticky footer method. */
24 |
25 | body > .container {
26 | padding: 60px 15px 0;
27 | }
28 | .container .text-muted {
29 | margin: 20px 0;
30 | }
31 |
32 | .footer > .container {
33 | padding-right: 15px;
34 | padding-left: 15px;
35 | }
36 |
37 | code {
38 | font-size: 80%;
39 | }
40 |
--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "twbs/bootstrap",
3 | "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
4 | "keywords": [
5 | "css",
6 | "js",
7 | "less",
8 | "mobile-first",
9 | "responsive",
10 | "front-end",
11 | "framework",
12 | "web"
13 | ],
14 | "homepage": "http://getbootstrap.com",
15 | "authors": [
16 | {
17 | "name": "Mark Otto",
18 | "email": "markdotto@gmail.com"
19 | },
20 | {
21 | "name": "Jacob Thornton",
22 | "email": "jacobthornton@gmail.com"
23 | }
24 | ],
25 | "support": {
26 | "issues": "https://github.com/twbs/bootstrap/issues"
27 | },
28 | "license": "MIT",
29 | "extra": {
30 | "branch-alias": {
31 | "dev-master": "3.3.x-dev"
32 | }
33 | },
34 | "replace": {
35 | "twitter/bootstrap": "self.version"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/less/close.less:
--------------------------------------------------------------------------------
1 | //
2 | // Close icons
3 | // --------------------------------------------------
4 |
5 |
6 | .close {
7 | float: right;
8 | font-size: (@font-size-base * 1.5);
9 | font-weight: @close-font-weight;
10 | line-height: 1;
11 | color: @close-color;
12 | text-shadow: @close-text-shadow;
13 | .opacity(.2);
14 |
15 | &:hover,
16 | &:focus {
17 | color: @close-color;
18 | text-decoration: none;
19 | cursor: pointer;
20 | .opacity(.5);
21 | }
22 |
23 | // Additional properties for button version
24 | // iOS requires the button element instead of an anchor tag.
25 | // If you want the anchor version, it requires `href="#"`.
26 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
27 | button& {
28 | padding: 0;
29 | cursor: pointer;
30 | background: transparent;
31 | border: 0;
32 | -webkit-appearance: none;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/less/thumbnails.less:
--------------------------------------------------------------------------------
1 | //
2 | // Thumbnails
3 | // --------------------------------------------------
4 |
5 |
6 | // Mixin and adjust the regular image class
7 | .thumbnail {
8 | display: block;
9 | padding: @thumbnail-padding;
10 | margin-bottom: @line-height-computed;
11 | line-height: @line-height-base;
12 | background-color: @thumbnail-bg;
13 | border: 1px solid @thumbnail-border;
14 | border-radius: @thumbnail-border-radius;
15 | .transition(border .2s ease-in-out);
16 |
17 | > img,
18 | a > img {
19 | &:extend(.img-responsive);
20 | margin-left: auto;
21 | margin-right: auto;
22 | }
23 |
24 | // Add a hover state for linked versions only
25 | a&:hover,
26 | a&:focus,
27 | a&.active {
28 | border-color: @link-color;
29 | }
30 |
31 | // Image captions
32 | .caption {
33 | padding: @thumbnail-caption-padding;
34 | color: @thumbnail-caption-color;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/package.js:
--------------------------------------------------------------------------------
1 | // package metadata file for Meteor.js
2 |
3 | /* jshint strict:false */
4 | /* global Package:true */
5 |
6 | Package.describe({
7 | name: 'twbs:bootstrap', // http://atmospherejs.com/twbs/bootstrap
8 | summary: 'The most popular front-end framework for developing responsive, mobile first projects on the web.',
9 | version: '3.3.5',
10 | git: 'https://github.com/twbs/bootstrap.git'
11 | });
12 |
13 | Package.onUse(function (api) {
14 | api.versionsFrom('METEOR@1.0');
15 | api.use('jquery', 'client');
16 | api.addFiles([
17 | 'dist/fonts/glyphicons-halflings-regular.eot',
18 | 'dist/fonts/glyphicons-halflings-regular.svg',
19 | 'dist/fonts/glyphicons-halflings-regular.ttf',
20 | 'dist/fonts/glyphicons-halflings-regular.woff',
21 | 'dist/fonts/glyphicons-halflings-regular.woff2'
22 | ], 'client', { isAsset: true });
23 | api.addFiles([
24 | 'dist/css/bootstrap.css',
25 | 'dist/js/bootstrap.js'
26 | ], 'client');
27 | });
28 |
--------------------------------------------------------------------------------
/docs/examples/signin/signin.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 40px;
3 | padding-bottom: 40px;
4 | background-color: #eee;
5 | }
6 |
7 | .form-signin {
8 | max-width: 330px;
9 | padding: 15px;
10 | margin: 0 auto;
11 | }
12 | .form-signin .form-signin-heading,
13 | .form-signin .checkbox {
14 | margin-bottom: 10px;
15 | }
16 | .form-signin .checkbox {
17 | font-weight: normal;
18 | }
19 | .form-signin .form-control {
20 | position: relative;
21 | height: auto;
22 | -webkit-box-sizing: border-box;
23 | -moz-box-sizing: border-box;
24 | box-sizing: border-box;
25 | padding: 10px;
26 | font-size: 16px;
27 | }
28 | .form-signin .form-control:focus {
29 | z-index: 2;
30 | }
31 | .form-signin input[type="email"] {
32 | margin-bottom: -1px;
33 | border-bottom-right-radius: 0;
34 | border-bottom-left-radius: 0;
35 | }
36 | .form-signin input[type="password"] {
37 | margin-bottom: 10px;
38 | border-top-left-radius: 0;
39 | border-top-right-radius: 0;
40 | }
41 |
--------------------------------------------------------------------------------
/less/utilities.less:
--------------------------------------------------------------------------------
1 | //
2 | // Utility classes
3 | // --------------------------------------------------
4 |
5 |
6 | // Floats
7 | // -------------------------
8 |
9 | .clearfix {
10 | .clearfix();
11 | }
12 | .center-block {
13 | .center-block();
14 | }
15 | .pull-right {
16 | float: right !important;
17 | }
18 | .pull-left {
19 | float: left !important;
20 | }
21 |
22 |
23 | // Toggling content
24 | // -------------------------
25 |
26 | // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
27 | .hide {
28 | display: none !important;
29 | }
30 | .show {
31 | display: block !important;
32 | }
33 | .invisible {
34 | visibility: hidden;
35 | }
36 | .text-hide {
37 | .text-hide();
38 | }
39 |
40 |
41 | // Hide from screenreaders and browsers
42 | //
43 | // Credit: HTML5 Boilerplate
44 |
45 | .hidden {
46 | display: none !important;
47 | }
48 |
49 |
50 | // For Affix plugin
51 | // -------------------------
52 |
53 | .affix {
54 | position: fixed;
55 | }
56 |
--------------------------------------------------------------------------------
/docs/_includes/components/breadcrumbs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Indicate the current page's location within a navigational hierarchy.
5 |
Separators are automatically added in CSS through :before and content.
6 |
7 |
8 | Home
9 |
10 |
11 | Home Library
13 |
14 |
15 | Home Library Data
18 |
19 |
20 | {% highlight html %}
21 |
22 | Home Library Data
25 |
26 | {% endhighlight %}
27 |
2 |
3 |
4 |
About transitions
5 |
For simple transition effects, include transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.
6 |
7 |
What's inside
8 |
Transition.js is a basic helper for transitionEnd events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.
9 |
10 |
Disabling transitions
11 |
Transitions can be globally disabled using the following JavaScript snippet, which must come after transition.js (or bootstrap.js or bootstrap.min.js, as the case may be) has loaded:
12 | {% highlight js %}
13 | $.support.transition = false
14 | {% endhighlight %}
15 |
2 |
3 |
4 |
Default well
5 |
Use the well as a simple effect on an element to give it an inset effect.
6 |
7 |
8 | Look, I'm in a well!
9 |
10 |
11 | {% highlight html %}
12 |
...
13 | {% endhighlight %}
14 |
Optional classes
15 |
Control padding and rounded corners with two optional modifier classes.
16 |
17 |
18 | Look, I'm in a large well!
19 |
20 |
21 | {% highlight html %}
22 |
...
23 | {% endhighlight %}
24 |
25 |
26 |
27 | Look, I'm in a small well!
28 |
29 |
30 | {% highlight html %}
31 |
...
32 | {% endhighlight %}
33 |
#{label}#\\1 ")
18 | end
19 |
20 | return input
21 | end
22 | end
23 | end
24 |
25 | Liquid::Template.register_filter(Jekyll::BugFilter)
--------------------------------------------------------------------------------
/less/pager.less:
--------------------------------------------------------------------------------
1 | //
2 | // Pager pagination
3 | // --------------------------------------------------
4 |
5 |
6 | .pager {
7 | padding-left: 0;
8 | margin: @line-height-computed 0;
9 | list-style: none;
10 | text-align: center;
11 | &:extend(.clearfix all);
12 | li {
13 | display: inline;
14 | > a,
15 | > span {
16 | display: inline-block;
17 | padding: 5px 14px;
18 | background-color: @pager-bg;
19 | border: 1px solid @pager-border;
20 | border-radius: @pager-border-radius;
21 | }
22 |
23 | > a:hover,
24 | > a:focus {
25 | text-decoration: none;
26 | background-color: @pager-hover-bg;
27 | }
28 | }
29 |
30 | .next {
31 | > a,
32 | > span {
33 | float: right;
34 | }
35 | }
36 |
37 | .previous {
38 | > a,
39 | > span {
40 | float: left;
41 | }
42 | }
43 |
44 | .disabled {
45 | > a,
46 | > a:hover,
47 | > a:focus,
48 | > span {
49 | color: @pager-disabled-color;
50 | background-color: @pager-bg;
51 | cursor: @cursor-disabled;
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/grunt/bs-commonjs-generator.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap Grunt task for the CommonJS module generation
3 | * http://getbootstrap.com
4 | * Copyright 2014-2015 Twitter, Inc.
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6 | */
7 |
8 | 'use strict';
9 |
10 | var fs = require('fs');
11 | var path = require('path');
12 |
13 | var COMMONJS_BANNER = '// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.\n';
14 |
15 | module.exports = function generateCommonJSModule(grunt, srcFiles, destFilepath) {
16 | var destDir = path.dirname(destFilepath);
17 |
18 | function srcPathToDestRequire(srcFilepath) {
19 | var requirePath = path.relative(destDir, srcFilepath).replace(/\\/g, '/');
20 | return 'require(\'' + requirePath + '\')';
21 | }
22 |
23 | var moduleOutputJs = COMMONJS_BANNER + srcFiles.map(srcPathToDestRequire).join('\n');
24 | try {
25 | fs.writeFileSync(destFilepath, moduleOutputJs);
26 | } catch (err) {
27 | grunt.fail.warn(err);
28 | }
29 | grunt.log.writeln('File ' + destFilepath.cyan + ' created.');
30 | };
31 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2011-2015 Twitter, Inc
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/docs/components.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Components
4 | slug: components
5 | lead: "Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more."
6 | ---
7 |
8 |
9 | {% include components/glyphicons.html %}
10 | {% include components/dropdowns.html %}
11 | {% include components/button-groups.html %}
12 | {% include components/button-dropdowns.html %}
13 | {% include components/input-groups.html %}
14 | {% include components/navs.html %}
15 | {% include components/navbar.html %}
16 | {% include components/breadcrumbs.html %}
17 | {% include components/pagination.html %}
18 | {% include components/labels.html %}
19 | {% include components/badges.html %}
20 | {% include components/jumbotron.html %}
21 | {% include components/page-header.html %}
22 | {% include components/thumbnails.html %}
23 | {% include components/alerts.html %}
24 | {% include components/progress-bars.html %}
25 | {% include components/media.html %}
26 | {% include components/list-group.html %}
27 | {% include components/panels.html %}
28 | {% include components/responsive-embed.html %}
29 | {% include components/wells.html %}
30 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | # Dependencies
2 | markdown: kramdown
3 | highlighter: rouge
4 |
5 | # Permalinks
6 | permalink: pretty
7 |
8 | # Server
9 | source: docs
10 | destination: _gh_pages
11 | host: 0.0.0.0
12 | port: 9001
13 | url: http://getbootstrap.com
14 | encoding: UTF-8
15 |
16 | # Custom vars
17 | current_version: 3.3.5
18 | repo: https://github.com/twbs/bootstrap
19 | sass_repo: https://github.com/twbs/bootstrap-sass
20 |
21 | download:
22 | source: https://github.com/twbs/bootstrap/archive/v3.3.5.zip
23 | dist: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip
24 | sass: https://github.com/twbs/bootstrap-sass/archive/v3.3.5.tar.gz
25 |
26 | blog: http://blog.getbootstrap.com
27 | expo: http://expo.getbootstrap.com
28 |
29 | cdn:
30 | css: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
31 | css_theme: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css
32 | js: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
33 |
--------------------------------------------------------------------------------
/docs/_includes/components/jumbotron.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
5 |
6 |
7 |
Hello, world!
8 |
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
9 |
Learn more
10 |
11 |
12 | {% highlight html %}
13 |
18 | {% endhighlight %}
19 |
To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.
20 | {% highlight html %}
21 |
26 | {% endhighlight %}
27 |
20 |
Migrating from v2.x to v3.x
21 |
Looking to migrate from an older version of Bootstrap to v3.x? Check out our migration guide .
22 |
2 |
3 |
4 |
Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
5 |
12 |
You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.
13 |
2 |
3 |
4 |
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
5 |
Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.
6 |
Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.
7 |
12 | {% highlight html %}
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | {% endhighlight %}
23 |
2 |
3 |
4 |
Bootstrap automatically adapts your pages for various screen sizes.
5 | Here's how to disable this feature so your page works like this non-responsive example .
6 |
7 |
Steps to disable page responsiveness
8 |
9 | Omit the viewport <meta> mentioned in the CSS docs
10 | Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
11 | If using navbars, remove all navbar collapsing and expanding behavior.
12 | For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
13 |
14 |
You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed).
15 | This disables the "mobile site" aspects of Bootstrap.
16 |
17 |
Bootstrap template with responsiveness disabled
18 |
We've applied these steps to an example. Read its source code to see the specific changes implemented.
19 |
20 | View non-responsive example
21 |
22 |
11 |
12 |
13 |
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.
14 |
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 .
15 |
See also: jQuery's browser bug workarounds
16 |
17 |
18 |
19 |
20 |
21 | Browser(s)
22 | Summary of bug
23 | Upstream bug(s)
24 | Bootstrap issue(s)
25 |
26 |
27 |
28 | {% for bug in site.data.browser-bugs %}
29 |
30 | {{ bug.browser }}
31 | {{ bug.summary | markdownify | bugify }}
32 | {{ bug.upstream_bug | bugify }}
33 | {{ bug.origin | bugify }}
34 |
35 | {% endfor %}
36 |
37 |
38 |
39 |
6 |
7 |
10 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/less/code.less:
--------------------------------------------------------------------------------
1 | //
2 | // Code (inline and block)
3 | // --------------------------------------------------
4 |
5 |
6 | // Inline and block code styles
7 | code,
8 | kbd,
9 | pre,
10 | samp {
11 | font-family: @font-family-monospace;
12 | }
13 |
14 | // Inline code
15 | code {
16 | padding: 2px 4px;
17 | font-size: 90%;
18 | color: @code-color;
19 | background-color: @code-bg;
20 | border-radius: @border-radius-base;
21 | }
22 |
23 | // User input typically entered via keyboard
24 | kbd {
25 | padding: 2px 4px;
26 | font-size: 90%;
27 | color: @kbd-color;
28 | background-color: @kbd-bg;
29 | border-radius: @border-radius-small;
30 | box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
31 |
32 | kbd {
33 | padding: 0;
34 | font-size: 100%;
35 | font-weight: bold;
36 | box-shadow: none;
37 | }
38 | }
39 |
40 | // Blocks of code
41 | pre {
42 | display: block;
43 | padding: ((@line-height-computed - 1) / 2);
44 | margin: 0 0 (@line-height-computed / 2);
45 | font-size: (@font-size-base - 1); // 14px to 13px
46 | line-height: @line-height-base;
47 | word-break: break-all;
48 | word-wrap: break-word;
49 | color: @pre-color;
50 | background-color: @pre-bg;
51 | border: 1px solid @pre-border-color;
52 | border-radius: @border-radius-base;
53 |
54 | // Account for some code outputs that place code tags in pre tags
55 | code {
56 | padding: 0;
57 | font-size: inherit;
58 | color: inherit;
59 | white-space: pre-wrap;
60 | background-color: transparent;
61 | border-radius: 0;
62 | }
63 | }
64 |
65 | // Enable scrollable blocks of code
66 | .pre-scrollable {
67 | max-height: @pre-scrollable-max-height;
68 | overflow-y: scroll;
69 | }
70 |
--------------------------------------------------------------------------------
/docs/assets/brand/bootstrap-punchout.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/less/mixins/buttons.less:
--------------------------------------------------------------------------------
1 | // Button variants
2 | //
3 | // Easily pump out default styles, as well as :hover, :focus, :active,
4 | // and disabled options for all buttons
5 |
6 | .button-variant(@color; @background; @border) {
7 | color: @color;
8 | background-color: @background;
9 | border-color: @border;
10 |
11 | &:focus,
12 | &.focus {
13 | color: @color;
14 | background-color: darken(@background, 10%);
15 | border-color: darken(@border, 25%);
16 | }
17 | &:hover {
18 | color: @color;
19 | background-color: darken(@background, 10%);
20 | border-color: darken(@border, 12%);
21 | }
22 | &:active,
23 | &.active,
24 | .open > .dropdown-toggle& {
25 | color: @color;
26 | background-color: darken(@background, 10%);
27 | border-color: darken(@border, 12%);
28 |
29 | &:hover,
30 | &:focus,
31 | &.focus {
32 | color: @color;
33 | background-color: darken(@background, 17%);
34 | border-color: darken(@border, 25%);
35 | }
36 | }
37 | &:active,
38 | &.active,
39 | .open > .dropdown-toggle& {
40 | background-image: none;
41 | }
42 | &.disabled,
43 | &[disabled],
44 | fieldset[disabled] & {
45 | &:hover,
46 | &:focus,
47 | &.focus {
48 | background-color: @background;
49 | border-color: @border;
50 | }
51 | }
52 |
53 | .badge {
54 | color: @background;
55 | background-color: @color;
56 | }
57 | }
58 |
59 | // Button sizes
60 | .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
61 | padding: @padding-vertical @padding-horizontal;
62 | font-size: @font-size;
63 | line-height: @line-height;
64 | border-radius: @border-radius;
65 | }
66 |
--------------------------------------------------------------------------------
/less/grid.less:
--------------------------------------------------------------------------------
1 | //
2 | // Grid system
3 | // --------------------------------------------------
4 |
5 |
6 | // Container widths
7 | //
8 | // Set the container width, and override it for fixed navbars in media queries.
9 |
10 | .container {
11 | .container-fixed();
12 |
13 | @media (min-width: @screen-sm-min) {
14 | width: @container-sm;
15 | }
16 | @media (min-width: @screen-md-min) {
17 | width: @container-md;
18 | }
19 | @media (min-width: @screen-lg-min) {
20 | width: @container-lg;
21 | }
22 | }
23 |
24 |
25 | // Fluid container
26 | //
27 | // Utilizes the mixin meant for fixed width containers, but without any defined
28 | // width for fluid, full width layouts.
29 |
30 | .container-fluid {
31 | .container-fixed();
32 | }
33 |
34 |
35 | // Row
36 | //
37 | // Rows contain and clear the floats of your columns.
38 |
39 | .row {
40 | .make-row();
41 | }
42 |
43 |
44 | // Columns
45 | //
46 | // Common styles for small and large grid columns
47 |
48 | .make-grid-columns();
49 |
50 |
51 | // Extra small grid
52 | //
53 | // Columns, offsets, pushes, and pulls for extra small devices like
54 | // smartphones.
55 |
56 | .make-grid(xs);
57 |
58 |
59 | // Small grid
60 | //
61 | // Columns, offsets, pushes, and pulls for the small device range, from phones
62 | // to tablets.
63 |
64 | @media (min-width: @screen-sm-min) {
65 | .make-grid(sm);
66 | }
67 |
68 |
69 | // Medium grid
70 | //
71 | // Columns, offsets, pushes, and pulls for the desktop device range.
72 |
73 | @media (min-width: @screen-md-min) {
74 | .make-grid(md);
75 | }
76 |
77 |
78 | // Large grid
79 | //
80 | // Columns, offsets, pushes, and pulls for the large desktop device range.
81 |
82 | @media (min-width: @screen-lg-min) {
83 | .make-grid(lg);
84 | }
85 |
--------------------------------------------------------------------------------
/docs/_includes/getting-started/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Start with this basic HTML template, or modify these examples . We hope you'll customize our templates and examples, adapting them to suit your needs.
5 |
6 |
Copy the HTML below to begin working with a minimal Bootstrap document.
7 | {% highlight html %}
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
Bootstrap 101 Template
16 |
17 |
18 |
19 |
20 |
21 |
22 |
26 |
27 |
28 |
Hello, world!
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | {% endhighlight %}
37 |
2 |
3 |
12 |
13 |
30 |
34 |
35 |
37 |
--------------------------------------------------------------------------------
/docs/examples/jumbotron-narrow/jumbotron-narrow.css:
--------------------------------------------------------------------------------
1 | /* Space out content a bit */
2 | body {
3 | padding-top: 20px;
4 | padding-bottom: 20px;
5 | }
6 |
7 | /* Everything but the jumbotron gets side spacing for mobile first views */
8 | .header,
9 | .marketing,
10 | .footer {
11 | padding-right: 15px;
12 | padding-left: 15px;
13 | }
14 |
15 | /* Custom page header */
16 | .header {
17 | padding-bottom: 20px;
18 | border-bottom: 1px solid #e5e5e5;
19 | }
20 | /* Make the masthead heading the same height as the navigation */
21 | .header h3 {
22 | margin-top: 0;
23 | margin-bottom: 0;
24 | line-height: 40px;
25 | }
26 |
27 | /* Custom page footer */
28 | .footer {
29 | padding-top: 19px;
30 | color: #777;
31 | border-top: 1px solid #e5e5e5;
32 | }
33 |
34 | /* Customize container */
35 | @media (min-width: 768px) {
36 | .container {
37 | max-width: 730px;
38 | }
39 | }
40 | .container-narrow > hr {
41 | margin: 30px 0;
42 | }
43 |
44 | /* Main marketing message and sign up button */
45 | .jumbotron {
46 | text-align: center;
47 | border-bottom: 1px solid #e5e5e5;
48 | }
49 | .jumbotron .btn {
50 | padding: 14px 24px;
51 | font-size: 21px;
52 | }
53 |
54 | /* Supporting marketing content */
55 | .marketing {
56 | margin: 40px 0;
57 | }
58 | .marketing p + h4 {
59 | margin-top: 28px;
60 | }
61 |
62 | /* Responsive: Portrait tablets and up */
63 | @media screen and (min-width: 768px) {
64 | /* Remove the padding we set earlier */
65 | .header,
66 | .marketing,
67 | .footer {
68 | padding-right: 0;
69 | padding-left: 0;
70 | }
71 | /* Space out the masthead */
72 | .header {
73 | margin-bottom: 30px;
74 | }
75 | /* Remove the bottom border on the jumbotron for visual effect */
76 | .jumbotron {
77 | border-bottom: 0;
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/grunt/sauce_browsers.yml:
--------------------------------------------------------------------------------
1 | [
2 | # Docs: https://saucelabs.com/docs/platforms/webdriver
3 |
4 | {
5 | browserName: "safari",
6 | platform: "OS X 10.10"
7 | },
8 | {
9 | browserName: "chrome",
10 | platform: "OS X 10.10"
11 | },
12 | {
13 | browserName: "firefox",
14 | platform: "OS X 10.10"
15 | },
16 |
17 | # Mac Opera not currently supported by Sauce Labs
18 |
19 | {
20 | browserName: "internet explorer",
21 | version: "11",
22 | platform: "Windows 8.1"
23 | },
24 | {
25 | browserName: "internet explorer",
26 | version: "10",
27 | platform: "Windows 8"
28 | },
29 | {
30 | browserName: "internet explorer",
31 | version: "9",
32 | platform: "Windows 7"
33 | },
34 | {
35 | browserName: "internet explorer",
36 | version: "8",
37 | platform: "Windows 7"
38 | },
39 |
40 | # { # Unofficial
41 | # browserName: "internet explorer",
42 | # version: "7",
43 | # platform: "Windows XP"
44 | # },
45 |
46 | {
47 | browserName: "chrome",
48 | platform: "Windows 8.1"
49 | },
50 | {
51 | browserName: "firefox",
52 | platform: "Windows 8.1"
53 | },
54 |
55 | # Win Opera 15+ not currently supported by Sauce Labs
56 |
57 | {
58 | browserName: "iphone",
59 | platform: "OS X 10.10",
60 | version: "8.2"
61 | },
62 |
63 | # iOS Chrome not currently supported by Sauce Labs
64 |
65 | # Linux (unofficial)
66 | {
67 | browserName: "chrome",
68 | platform: "Linux"
69 | },
70 | {
71 | browserName: "firefox",
72 | platform: "Linux"
73 | }
74 |
75 | # Android Chrome not currently supported by Sauce Labs
76 |
77 | # { # Android Browser (super-unofficial)
78 | # browserName: "android",
79 | # version: "4.0",
80 | # platform: "Linux"
81 | # }
82 | ]
83 |
--------------------------------------------------------------------------------
/less/alerts.less:
--------------------------------------------------------------------------------
1 | //
2 | // Alerts
3 | // --------------------------------------------------
4 |
5 |
6 | // Base styles
7 | // -------------------------
8 |
9 | .alert {
10 | padding: @alert-padding;
11 | margin-bottom: @line-height-computed;
12 | border: 1px solid transparent;
13 | border-radius: @alert-border-radius;
14 |
15 | // Headings for larger alerts
16 | h4 {
17 | margin-top: 0;
18 | // Specified for the h4 to prevent conflicts of changing @headings-color
19 | color: inherit;
20 | }
21 |
22 | // Provide class for links that match alerts
23 | .alert-link {
24 | font-weight: @alert-link-font-weight;
25 | }
26 |
27 | // Improve alignment and spacing of inner content
28 | > p,
29 | > ul {
30 | margin-bottom: 0;
31 | }
32 |
33 | > p + p {
34 | margin-top: 5px;
35 | }
36 | }
37 |
38 | // Dismissible alerts
39 | //
40 | // Expand the right padding and account for the close button's positioning.
41 |
42 | .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
43 | .alert-dismissible {
44 | padding-right: (@alert-padding + 20);
45 |
46 | // Adjust close link position
47 | .close {
48 | position: relative;
49 | top: -2px;
50 | right: -21px;
51 | color: inherit;
52 | }
53 | }
54 |
55 | // Alternate styles
56 | //
57 | // Generate contextual modifier classes for colorizing the alert.
58 |
59 | .alert-success {
60 | .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
61 | }
62 |
63 | .alert-info {
64 | .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
65 | }
66 |
67 | .alert-warning {
68 | .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
69 | }
70 |
71 | .alert-danger {
72 | .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
73 | }
74 |
--------------------------------------------------------------------------------
/docs/assets/brand/bootstrap-outline.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
12 |
13 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/js/tests/visual/alert.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Alert
8 |
20 |
21 |
24 |
25 |
26 | ×
27 | Holy guacamole! Best check yo self, you're not looking too good.
28 |
29 |
30 |
31 |
×
32 |
Oh snap! You got an error!
33 |
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
34 |
35 | Take this action
36 | Or do this
37 |
38 |
39 |
40 |
2 |
3 |
Bootstrap is released under the MIT license and is copyright {{ site.time | date: "%Y" }} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.
4 |
5 |
It requires you to:
6 |
7 | Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works
8 |
9 |
10 |
It permits you to:
11 |
12 | Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
13 | Use Bootstrap in packages or distributions that you create
14 | Modify the source code
15 | Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license
16 |
17 |
18 |
It forbids you to:
19 |
20 | Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
21 | Hold the creators or copyright holders of Bootstrap liable
22 | Redistribute any piece of Bootstrap without proper attribution
23 | Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
24 | Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question
25 |
26 |
27 |
It does not require you to:
28 |
29 | Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
30 | Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)
31 |
32 |
33 |
The full Bootstrap license is located in the project repository for more information.
34 |
2 |
3 |
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.
4 |
5 |
Box-sizing
6 |
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. Learn more about box model and sizing at CSS Tricks .
7 |
Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).
8 | {% highlight scss %}
9 | /* Box-sizing resets
10 | *
11 | * Reset individual elements or override regions to avoid conflicts due to
12 | * global box model settings of Bootstrap. Two options, individual overrides and
13 | * region resets, are available as plain CSS and uncompiled Less formats.
14 | */
15 |
16 | /* Option 1A: Override a single element's box model via CSS */
17 | .element {
18 | -webkit-box-sizing: content-box;
19 | -moz-box-sizing: content-box;
20 | box-sizing: content-box;
21 | }
22 |
23 | /* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
24 | .element {
25 | .box-sizing(content-box);
26 | }
27 |
28 | /* Option 2A: Reset an entire region via CSS */
29 | .reset-box-sizing,
30 | .reset-box-sizing *,
31 | .reset-box-sizing *:before,
32 | .reset-box-sizing *:after {
33 | -webkit-box-sizing: content-box;
34 | -moz-box-sizing: content-box;
35 | box-sizing: content-box;
36 | }
37 |
38 | /* Option 2B: Reset an entire region with a custom Less mixin */
39 | .reset-box-sizing {
40 | &,
41 | *,
42 | *:before,
43 | *:after {
44 | .box-sizing(content-box);
45 | }
46 | }
47 | .element {
48 | .reset-box-sizing();
49 | }
50 | {% endhighlight %}
51 |
2 |
3 |
4 |
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
5 |
6 |
7 |
Inbox 42
8 |
9 |
10 | Messages 4
11 |
12 |
13 | {% highlight html %}
14 |
Inbox 42
15 |
16 |
17 | Messages 4
18 |
19 | {% endhighlight %}
20 |
21 |
Self collapsing
22 |
When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.
23 |
24 |
25 |
Cross-browser compatibility
26 |
Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.
27 |
28 |
29 |
Adapts to active nav states
30 |
Built-in styles are included for placing badges in active states in pill navigations.
31 |
38 | {% highlight html %}
39 |
44 | {% endhighlight %}
45 |
2 |
3 |
4 |
Example
5 |
6 |
Example heading New
7 | Example heading New
8 | Example heading New
9 | Example heading New
10 | Example heading New
11 | Example heading New
12 |
13 | {% highlight html %}
14 |
Example heading New
15 | {% endhighlight %}
16 |
17 |
Available variations
18 |
Add any of the below mentioned modifier classes to change the appearance of a label.
19 |
20 | Default
21 | Primary
22 | Success
23 | Info
24 | Warning
25 | Danger
26 |
27 | {% highlight html %}
28 |
Default
29 |
Primary
30 |
Success
31 |
Info
32 |
Warning
33 |
Danger
34 | {% endhighlight %}
35 |
36 |
37 |
Have tons of labels?
38 |
Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219 .
39 |
40 |
Sticky Footer Template for Bootstrap
13 |
14 |
15 |
35 |
38 |
Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.
39 |
Use the sticky footer with a fixed navbar if need be, too.
40 |
Popover
8 |
20 |
21 |
24 |
25 |
26 | Popover on left
27 |
28 |
29 | Popover on top
30 |
31 |
32 | Popover on bottom
33 |
34 |
35 | Popover on right
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/js/tests/visual/carousel.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Carousel
8 |
20 |
21 |
24 |
25 |
26 |
27 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
45 |
46 |
48 |
49 |
50 |
Signin Template for Bootstrap
13 |
14 |
15 |
2 |
3 |
While Bootstrap is built on Less, it also has an official Sass port . We maintain it in a separate GitHub repository and handle updates with a conversion script.
4 |
5 |
What's included
6 |
Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.
7 |
8 |
9 |
10 |
11 |
12 | Path
13 | Description
14 |
15 |
16 |
17 |
18 | lib/Ruby gem code (Sass configuration, Rails and Compass integrations)
20 |
21 |
22 | tasks/Converter scripts (turning upstream Less to Sass)
24 |
25 |
26 | test/Compilation tests
28 |
29 |
30 | templates/Compass package manifest
32 |
33 |
34 | vendor/assets/Sass, JavaScript, and font files
36 |
37 |
38 | RakefileInternal tasks, such as rake and convert
40 |
41 |
42 |
43 |
44 |
Visit the Sass port's GitHub repository to see these files in action.
45 |
46 |
47 |
Installation
48 |
For information on how to install and use Bootstrap for Sass, consult the GitHub repository readme . It's the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.
49 |
50 | Bootstrap for Sass
51 |
52 |
2 |
3 |
4 |
Responsive images
5 |
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
6 |
To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.
7 |
8 |
SVG images and IE 8-10
9 |
In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
10 |
11 | {% highlight html %}
12 |
13 | {% endhighlight %}
14 |
15 |
Image shapes
16 |
Add classes to an <img> element to easily style images in any project.
17 |
18 |
Cross-browser compatibility
19 |
Keep in mind that Internet Explorer 8 lacks support for rounded corners.
20 |
21 |
26 | {% highlight html %}
27 |
28 |
29 |
30 | {% endhighlight %}
31 |
Skip to main content
23 |
24 |
25 |
26 | {{ content }}
27 |
28 | {% unless page.fullwidth == true %}
29 |
30 |
57 |
58 | {% endunless %}
59 |
60 |
Import Less components jQuery plugins Less variables
7 |
45 | Download Button
8 |
2 |
3 |
4 |
Inline
5 |
Wrap inline snippets of code with <code>.
6 |
7 | For example, <section> should be wrapped as inline.
8 |
9 | {% highlight html %}
10 | For example,
<section> should be wrapped as inline.
11 | {% endhighlight %}
12 |
13 |
14 |
Use the <kbd> to indicate input that is typically entered via keyboard.
15 |
16 | To switch directories, type cd followed by the name of the directory.ctrl + ,
19 | {% highlight html %}
20 | To switch directories, type
cd followed by the name of the directory.
21 | To edit settings, press
ctrl + ,
22 | {% endhighlight %}
23 |
24 |
Basic block
25 |
Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
26 |
27 |
<p>Sample text here...</p>
28 |
29 | {% highlight html %}
30 |
<p>Sample text here...</p>
31 | {% endhighlight %}
32 |
33 |
You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.
34 |
Variables
35 |
For indicating variables use the <var> tag.
36 |
37 |
y = m x + b
38 |
39 |
40 | {% highlight html %}
41 |
y =
m x +
b
42 | {% endhighlight %}
43 |
44 |
Sample output
45 |
For indicating blocks sample output from a program use the <samp> tag.
46 |
47 |
This text is meant to be treated as sample output from a computer program.
48 |
49 | {% highlight html %}
50 |
This text is meant to be treated as sample output from a computer program.
51 | {% endhighlight %}
52 |
9 | {% if page.layout == "home" %}
10 | {{ page.title }}
11 | {% else %}
12 | {{ page.title }} · Bootstrap
13 | {% endif %}
14 |
15 |
16 |
17 | {% if site.github %}
18 | Tooltip
8 |
20 |
21 |
24 |
25 |
Tight pants next level keffiyeh you probably 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 have 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 whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
26 |
27 |
28 |
29 | Tooltip on left
30 | Tooltip on top
31 | Tooltip on bottom
32 | Tooltip on right
33 |
34 |
35 |
2 |
3 |
4 |
Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.
5 |
6 |
Installing Grunt
7 |
To install Grunt, you must first download and install node.js (which includes npm). npm stands for node packaged modules and is a way to manage development dependencies through node.js.
8 |
9 | Then, from the command line:
10 |
11 | Install grunt-cli globally with npm install -g grunt-cli.
12 | Navigate to the root /bootstrap/ directory, then run npm install. npm will look at the package.json
13 |
14 |
15 |
When completed, you'll be able to run the various Grunt commands provided from the command line.
16 |
17 |
Available Grunt commands
18 |
grunt dist (Just compile CSS and JavaScript)
19 |
Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.
20 |
21 |
grunt watch (Watch)
22 |
Watches the Less source files and automatically recompiles them to CSS whenever you save a change.
23 |
24 |
grunt test (Run tests)
25 |
Runs JSHint and runs the QUnit tests headlessly in PhantomJS .
26 |
27 |
grunt docs (Build & test the docs assets)
28 |
Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via jekyll serve.
29 |
30 |
grunt (Build absolutely everything and run tests)
31 |
Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires Jekyll . Usually only necessary if you're hacking on Bootstrap itself.
32 |
33 |
Troubleshooting
34 |
Should you encounter problems with installing dependencies or running Grunt commands, first delete the /node_modules/ directory generated by npm. Then, rerun npm install.
35 |
2 | Download
3 |
4 |
5 | What's included
6 |
10 |
11 |
12 | Compiling CSS and JavaScript
13 |
18 |
19 |
20 | Basic template
21 |
22 |
23 | Examples
24 |
30 |
31 |
32 | Tools
33 |
36 |
37 |
38 | Community
39 |
40 |
41 | Disabling responsiveness
42 |
43 |
44 | Migrating from 2.x to 3.0
45 |
46 |
47 | Browser and device support
48 |
64 |
65 |
66 | Third party support
67 |
68 |
69 | Accessibility
70 |
71 |
72 | License FAQs
73 |
74 |
75 | Translations
76 |
77 |
--------------------------------------------------------------------------------
/docs/_includes/footer.html:
--------------------------------------------------------------------------------
1 |
3 |
19 |
20 |
22 |
23 |
24 |
25 |
26 | {% if site.github %}
27 |
28 | {% else %}
29 |
30 | {% endif %}
31 |
32 | {% if site.github %}
33 |
34 | {% else %}
35 | {% for file in site.data.configBridge.paths.docsJs %}
36 |
37 | {% endfor %}
38 | {% endif %}
39 |
40 | {% if page.slug == "customize" %}
41 |
42 | {% if site.github %}
43 |
44 | {% else %}
45 | {% for file in site.data.configBridge.paths.customizerJs %}
46 |
47 | {% endfor %}
48 | {% endif %}
49 | {% endif %}
50 |
51 |
52 |
53 |
54 |
56 |
68 |
--------------------------------------------------------------------------------
/js/tests/README.md:
--------------------------------------------------------------------------------
1 | ## How does Bootstrap's test suite work?
2 |
3 | Bootstrap uses [QUnit](http://api.qunitjs.com/), a powerful, easy-to-use JavaScript unit test framework. Each plugin has a file dedicated to its tests in `unit/.js`.
4 |
5 | * `unit/` contains the unit test files for each Bootstrap plugin.
6 | * `vendor/` contains third-party testing-related code (QUnit and jQuery).
7 | * `visual/` contains "visual" tests which are run interactively in real browsers and require manual verification by humans.
8 |
9 | To run the unit test suite via [PhantomJS](http://phantomjs.org/), run `grunt test-js`.
10 |
11 | To run the unit test suite via a real web browser, open `index.html` in the browser.
12 |
13 |
14 | ## How do I add a new unit test?
15 |
16 | 1. Locate and open the file dedicated to the plugin which you need to add tests to (`unit/.js`).
17 | 2. Review the [QUnit API Documentation](http://api.qunitjs.com/) and use the existing tests as references for how to structure your new tests.
18 | 3. Write the necessary unit test(s) for the new or revised functionality.
19 | 4. Run `grunt test-js` to see the results of your newly-added test(s).
20 |
21 | **Note:** Your new unit tests should fail before your changes are applied to the plugin, and should pass after your changes are applied to the plugin.
22 |
23 | ## What should a unit test look like?
24 |
25 | * Each test should have a unique name clearly stating what unit is being tested.
26 | * Each test should test only one unit per test, although one test can include several assertions. Create multiple tests for multiple units of functionality.
27 | * Each test should begin with [`assert.expect`](http://api.qunitjs.com/expect/) to ensure that the expected assertions are run.
28 | * Each test should follow the project's [JavaScript Code Guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#js)
29 |
30 | ### Example tests
31 |
32 | ```javascript
33 | // Synchronous test
34 | QUnit.test('should describe the unit being tested', function (assert) {
35 | assert.expect(1)
36 | var templateHTML = ''
37 | + '
× '
38 | + '
Template necessary for the test.
'
39 | + '
')
54 | .appendTo('#qunit-fixture')
55 | .on('shown.bs.tooltip', function () {
56 | assert.ok(true, '"shown" event was fired after calling "show"')
57 | done()
58 | })
59 | .bootstrapTooltip('show')
60 | })
61 | ```
62 |
--------------------------------------------------------------------------------
/less/mixins/forms.less:
--------------------------------------------------------------------------------
1 | // Form validation states
2 | //
3 | // Used in forms.less to generate the form validation CSS for warnings, errors,
4 | // and successes.
5 |
6 | .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
7 | // Color the label and help text
8 | .help-block,
9 | .control-label,
10 | .radio,
11 | .checkbox,
12 | .radio-inline,
13 | .checkbox-inline,
14 | &.radio label,
15 | &.checkbox label,
16 | &.radio-inline label,
17 | &.checkbox-inline label {
18 | color: @text-color;
19 | }
20 | // Set the border and box shadow on specific inputs to match
21 | .form-control {
22 | border-color: @border-color;
23 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
24 | &:focus {
25 | border-color: darken(@border-color, 10%);
26 | @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
27 | .box-shadow(@shadow);
28 | }
29 | }
30 | // Set validation states also for addons
31 | .input-group-addon {
32 | color: @text-color;
33 | border-color: @border-color;
34 | background-color: @background-color;
35 | }
36 | // Optional feedback icon
37 | .form-control-feedback {
38 | color: @text-color;
39 | }
40 | }
41 |
42 |
43 | // Form control focus state
44 | //
45 | // Generate a customized focus state and for any input with the specified color,
46 | // which defaults to the `@input-border-focus` variable.
47 | //
48 | // We highly encourage you to not customize the default value, but instead use
49 | // this to tweak colors on an as-needed basis. This aesthetic change is based on
50 | // WebKit's default styles, but applicable to a wider range of browsers. Its
51 | // usability and accessibility should be taken into account with any change.
52 | //
53 | // Example usage: change the default blue border and shadow to white for better
54 | // contrast against a dark gray background.
55 | .form-control-focus(@color: @input-border-focus) {
56 | @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
57 | &:focus {
58 | border-color: @color;
59 | outline: 0;
60 | .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
61 | }
62 | }
63 |
64 | // Form control sizing
65 | //
66 | // Relative text size, padding, and border-radii changes for form controls. For
67 | // horizontal sizing, wrap controls in the predefined grid classes. ``
68 | // element gets special love because it's special, and that's a fact!
69 | .input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
70 | height: @input-height;
71 | padding: @padding-vertical @padding-horizontal;
72 | font-size: @font-size;
73 | line-height: @line-height;
74 | border-radius: @border-radius;
75 |
76 | select& {
77 | height: @input-height;
78 | line-height: @input-height;
79 | }
80 |
81 | textarea&,
82 | select[multiple]& {
83 | height: auto;
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/js/tests/unit/alert.js:
--------------------------------------------------------------------------------
1 | $(function () {
2 | 'use strict';
3 |
4 | QUnit.module('alert plugin')
5 |
6 | QUnit.test('should be defined on jquery object', function (assert) {
7 | assert.expect(1)
8 | assert.ok($(document.body).alert, 'alert method is defined')
9 | })
10 |
11 | QUnit.module('alert', {
12 | beforeEach: function () {
13 | // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
14 | $.fn.bootstrapAlert = $.fn.alert.noConflict()
15 | },
16 | afterEach: function () {
17 | $.fn.alert = $.fn.bootstrapAlert
18 | delete $.fn.bootstrapAlert
19 | }
20 | })
21 |
22 | QUnit.test('should provide no conflict', function (assert) {
23 | assert.expect(1)
24 | assert.strictEqual($.fn.alert, undefined, 'alert was set back to undefined (org value)')
25 | })
26 |
27 | QUnit.test('should return jquery collection containing the element', function (assert) {
28 | assert.expect(2)
29 | var $el = $('
')
30 | var $alert = $el.bootstrapAlert()
31 | assert.ok($alert instanceof $, 'returns jquery collection')
32 | assert.strictEqual($alert[0], $el[0], 'collection contains element')
33 | })
34 |
35 | QUnit.test('should fade element out on clicking .close', function (assert) {
36 | assert.expect(1)
37 | var alertHTML = ''
38 | + '
× '
39 | + '
Holy guacamole! Best check yo self, you\'re not looking too good.
'
40 | + '
'
51 | + '
× '
52 | + '
Holy guacamole! Best check yo self, you\'re not looking too good.
'
53 | + '
')
67 | .on('close.bs.alert', function (e) {
68 | e.preventDefault()
69 | assert.ok(true, 'close event fired')
70 | done()
71 | })
72 | .on('closed.bs.alert', function () {
73 | assert.ok(false, 'closed event fired')
74 | })
75 | .bootstrapAlert('close')
76 | })
77 |
78 | })
79 |
--------------------------------------------------------------------------------
/less/mixins/grid-framework.less:
--------------------------------------------------------------------------------
1 | // Framework grid generation
2 | //
3 | // Used only by Bootstrap to generate the correct number of grid classes given
4 | // any value of `@grid-columns`.
5 |
6 | .make-grid-columns() {
7 | // Common styles for all sizes of grid columns, widths 1-12
8 | .col(@index) { // initial
9 | @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
10 | .col((@index + 1), @item);
11 | }
12 | .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
13 | @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
14 | .col((@index + 1), ~"@{list}, @{item}");
15 | }
16 | .col(@index, @list) when (@index > @grid-columns) { // terminal
17 | @{list} {
18 | position: relative;
19 | // Prevent columns from collapsing when empty
20 | min-height: 1px;
21 | // Inner gutter via padding
22 | padding-left: ceil((@grid-gutter-width / 2));
23 | padding-right: floor((@grid-gutter-width / 2));
24 | }
25 | }
26 | .col(1); // kickstart it
27 | }
28 |
29 | .float-grid-columns(@class) {
30 | .col(@index) { // initial
31 | @item: ~".col-@{class}-@{index}";
32 | .col((@index + 1), @item);
33 | }
34 | .col(@index, @list) when (@index =< @grid-columns) { // general
35 | @item: ~".col-@{class}-@{index}";
36 | .col((@index + 1), ~"@{list}, @{item}");
37 | }
38 | .col(@index, @list) when (@index > @grid-columns) { // terminal
39 | @{list} {
40 | float: left;
41 | }
42 | }
43 | .col(1); // kickstart it
44 | }
45 |
46 | .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
47 | .col-@{class}-@{index} {
48 | width: percentage((@index / @grid-columns));
49 | }
50 | }
51 | .calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
52 | .col-@{class}-push-@{index} {
53 | left: percentage((@index / @grid-columns));
54 | }
55 | }
56 | .calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
57 | .col-@{class}-push-0 {
58 | left: auto;
59 | }
60 | }
61 | .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
62 | .col-@{class}-pull-@{index} {
63 | right: percentage((@index / @grid-columns));
64 | }
65 | }
66 | .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
67 | .col-@{class}-pull-0 {
68 | right: auto;
69 | }
70 | }
71 | .calc-grid-column(@index, @class, @type) when (@type = offset) {
72 | .col-@{class}-offset-@{index} {
73 | margin-left: percentage((@index / @grid-columns));
74 | }
75 | }
76 |
77 | // Basic looping in LESS
78 | .loop-grid-columns(@index, @class, @type) when (@index >= 0) {
79 | .calc-grid-column(@index, @class, @type);
80 | // next iteration
81 | .loop-grid-columns((@index - 1), @class, @type);
82 | }
83 |
84 | // Create grid for specific class
85 | .make-grid(@class) {
86 | .float-grid-columns(@class);
87 | .loop-grid-columns(@grid-columns, @class, width);
88 | .loop-grid-columns(@grid-columns, @class, pull);
89 | .loop-grid-columns(@grid-columns, @class, push);
90 | .loop-grid-columns(@grid-columns, @class, offset);
91 | }
92 |
--------------------------------------------------------------------------------
/docs/examples/carousel/carousel.css:
--------------------------------------------------------------------------------
1 | /* GLOBAL STYLES
2 | -------------------------------------------------- */
3 | /* Padding below the footer and lighter body text */
4 |
5 | body {
6 | padding-bottom: 40px;
7 | color: #5a5a5a;
8 | }
9 |
10 |
11 | /* CUSTOMIZE THE NAVBAR
12 | -------------------------------------------------- */
13 |
14 | /* Special class on .container surrounding .navbar, used for positioning it into place. */
15 | .navbar-wrapper {
16 | position: absolute;
17 | top: 0;
18 | right: 0;
19 | left: 0;
20 | z-index: 20;
21 | }
22 |
23 | /* Flip around the padding for proper display in narrow viewports */
24 | .navbar-wrapper > .container {
25 | padding-right: 0;
26 | padding-left: 0;
27 | }
28 | .navbar-wrapper .navbar {
29 | padding-right: 15px;
30 | padding-left: 15px;
31 | }
32 | .navbar-wrapper .navbar .container {
33 | width: auto;
34 | }
35 |
36 |
37 | /* CUSTOMIZE THE CAROUSEL
38 | -------------------------------------------------- */
39 |
40 | /* Carousel base class */
41 | .carousel {
42 | height: 500px;
43 | margin-bottom: 60px;
44 | }
45 | /* Since positioning the image, we need to help out the caption */
46 | .carousel-caption {
47 | z-index: 10;
48 | }
49 |
50 | /* Declare heights because of positioning of img element */
51 | .carousel .item {
52 | height: 500px;
53 | background-color: #777;
54 | }
55 | .carousel-inner > .item > img {
56 | position: absolute;
57 | top: 0;
58 | left: 0;
59 | min-width: 100%;
60 | height: 500px;
61 | }
62 |
63 |
64 | /* MARKETING CONTENT
65 | -------------------------------------------------- */
66 |
67 | /* Center align the text within the three columns below the carousel */
68 | .marketing .col-lg-4 {
69 | margin-bottom: 20px;
70 | text-align: center;
71 | }
72 | .marketing h2 {
73 | font-weight: normal;
74 | }
75 | .marketing .col-lg-4 p {
76 | margin-right: 10px;
77 | margin-left: 10px;
78 | }
79 |
80 |
81 | /* Featurettes
82 | ------------------------- */
83 |
84 | .featurette-divider {
85 | margin: 80px 0; /* Space out the Bootstrap Tooltip Viewport Example for Bootstrap
13 |
14 |
15 | Shift Left
34 | Shift Right
35 | Shift Down
36 |
37 | Shift Up
38 |
39 |
40 | Shift Left
41 | Shift Down
42 |
43 | Shift Right
44 |
45 | Shift Up
46 |
47 |
48 |
49 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/docs/examples/blog/blog.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Globals
3 | */
4 |
5 | body {
6 | font-family: Georgia, "Times New Roman", Times, serif;
7 | color: #555;
8 | }
9 |
10 | h1, .h1,
11 | h2, .h2,
12 | h3, .h3,
13 | h4, .h4,
14 | h5, .h5,
15 | h6, .h6 {
16 | margin-top: 0;
17 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
18 | font-weight: normal;
19 | color: #333;
20 | }
21 |
22 |
23 | /*
24 | * Override Bootstrap's default container.
25 | */
26 |
27 | @media (min-width: 1200px) {
28 | .container {
29 | width: 970px;
30 | }
31 | }
32 |
33 |
34 | /*
35 | * Masthead for nav
36 | */
37 |
38 | .blog-masthead {
39 | background-color: #428bca;
40 | -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
41 | box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
42 | }
43 |
44 | /* Nav links */
45 | .blog-nav-item {
46 | position: relative;
47 | display: inline-block;
48 | padding: 10px;
49 | font-weight: 500;
50 | color: #cdddeb;
51 | }
52 | .blog-nav-item:hover,
53 | .blog-nav-item:focus {
54 | color: #fff;
55 | text-decoration: none;
56 | }
57 |
58 | /* Active state gets a caret at the bottom */
59 | .blog-nav .active {
60 | color: #fff;
61 | }
62 | .blog-nav .active:after {
63 | position: absolute;
64 | bottom: 0;
65 | left: 50%;
66 | width: 0;
67 | height: 0;
68 | margin-left: -5px;
69 | vertical-align: middle;
70 | content: " ";
71 | border-right: 5px solid transparent;
72 | border-bottom: 5px solid;
73 | border-left: 5px solid transparent;
74 | }
75 |
76 |
77 | /*
78 | * Blog name and description
79 | */
80 |
81 | .blog-header {
82 | padding-top: 20px;
83 | padding-bottom: 20px;
84 | }
85 | .blog-title {
86 | margin-top: 30px;
87 | margin-bottom: 0;
88 | font-size: 60px;
89 | font-weight: normal;
90 | }
91 | .blog-description {
92 | font-size: 20px;
93 | color: #999;
94 | }
95 |
96 |
97 | /*
98 | * Main column and sidebar layout
99 | */
100 |
101 | .blog-main {
102 | font-size: 18px;
103 | line-height: 1.5;
104 | }
105 |
106 | /* Sidebar modules for boxing content */
107 | .sidebar-module {
108 | padding: 15px;
109 | margin: 0 -15px 15px;
110 | }
111 | .sidebar-module-inset {
112 | padding: 15px;
113 | background-color: #f5f5f5;
114 | border-radius: 4px;
115 | }
116 | .sidebar-module-inset p:last-child,
117 | .sidebar-module-inset ul:last-child,
118 | .sidebar-module-inset ol:last-child {
119 | margin-bottom: 0;
120 | }
121 |
122 |
123 | /* Pagination */
124 | .pager {
125 | margin-bottom: 60px;
126 | text-align: left;
127 | }
128 | .pager > li > a {
129 | width: 140px;
130 | padding: 10px 20px;
131 | text-align: center;
132 | border-radius: 30px;
133 | }
134 |
135 |
136 | /*
137 | * Blog posts
138 | */
139 |
140 | .blog-post {
141 | margin-bottom: 60px;
142 | }
143 | .blog-post-title {
144 | margin-bottom: 5px;
145 | font-size: 40px;
146 | }
147 | .blog-post-meta {
148 | margin-bottom: 20px;
149 | color: #999;
150 | }
151 |
152 |
153 | /*
154 | * Footer
155 | */
156 |
157 | .blog-footer {
158 | padding: 40px 0;
159 | color: #999;
160 | text-align: center;
161 | background-color: #f9f9f9;
162 | border-top: 1px solid #e5e5e5;
163 | }
164 | .blog-footer p:last-child {
165 | margin-bottom: 0;
166 | }
167 |
--------------------------------------------------------------------------------
/docs/examples/starter-template/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Starter Template for Bootstrap
13 |
14 |
15 |
34 |
52 |
53 |
54 |
55 |
56 |
57 |
Bootstrap starter template
58 |
Use this document as a way to quickly start any new project.
59 |
60 |
61 |
2 |
3 |
4 |
Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.
5 |
6 |
7 |
jQuery required
8 |
Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template . Consult our bower.json to see which versions of jQuery are supported.
9 |
10 |
11 |
Precompiled Bootstrap
12 |
Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:
13 |
15 | {% highlight bash %}
16 | bootstrap/
17 | ├── css/
18 | │ ├── bootstrap.css
19 | │ ├── bootstrap.css.map
20 | │ ├── bootstrap.min.css
21 | │ ├── bootstrap.min.css.map
22 | │ ├── bootstrap-theme.css
23 | │ ├── bootstrap-theme.css.map
24 | │ ├── bootstrap-theme.min.css
25 | │ └── bootstrap-theme.min.css.map
26 | ├── js/
27 | │ ├── bootstrap.js
28 | │ └── bootstrap.min.js
29 | └── fonts/
30 | ├── glyphicons-halflings-regular.eot
31 | ├── glyphicons-halflings-regular.svg
32 | ├── glyphicons-halflings-regular.ttf
33 | ├── glyphicons-halflings-regular.woff
34 | └── glyphicons-halflings-regular.woff2
35 | {% endhighlight %}
36 |
38 |
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 (bootstrap.*.map) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.
39 |
40 |
Bootstrap source code
41 |
The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. More specifically, it includes the following and more:
42 | {% highlight bash %}
43 | bootstrap/
44 | ├── less/
45 | ├── js/
46 | ├── fonts/
47 | ├── dist/
48 | │ ├── css/
49 | │ ├── js/
50 | │ └── fonts/
51 | └── docs/
52 | └── examples/
53 | {% endhighlight %}
54 |
The less/, js/, and fonts/ are the source code for our CSS, JS, and icon fonts (respectively). 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.
55 |
34 | 
37 | 
40 |