Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
-
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
+
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
+
Lead body copy
+
Make a paragraph stand out by adding .lead.
+
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
@@ -1272,7 +1275,7 @@ For example, <code>section</code> should be wrapped as inline.
@@ -1590,7 +1593,7 @@ For example, <code>section</code> should be wrapped as inline.
<i class="icon-search icon-white"></i>
-
There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
+
There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
Heads up!
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
diff --git a/docs/components.html b/docs/components.html
index 1678e58aa5..55eb2e4a13 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -24,6 +24,7 @@
+
Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.
-<div class="tabbable"> <-- Only required for left/right tabs -->
+<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
@@ -1665,7 +1666,7 @@
-
@@ -1688,7 +1689,7 @@
Example alerts
Wrap your message and an optional close icon in a div with simple class.
-
+
Warning! Best check yo self, you're not looking too good.
@@ -1697,10 +1698,10 @@
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
-
Heads up! iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a button element with the data attribute, which we have opted to do for our docs.
+
Heads up! iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.
Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.
-
+
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
@@ -1719,7 +1720,7 @@
Error or danger
-
+
Oh snap! Change a few things up and try submitting again.
@@ -1731,7 +1732,7 @@
Success
-
+
Well done! You successfully read this important alert message.
@@ -1743,7 +1744,7 @@
Information
-
+
Heads up! This alert needs your attention, but it's not super important.
Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.
The alerts plugin works on regular alert messages, and block messages.
-
+
Holy guacamole! Best check yo self, you're not looking too good.
-
+
Oh snap! You got an error!
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.
@@ -1371,7 +1348,7 @@ $('#myCollapsible').on('hidden', function () {
Markup
Data attributes are used for the previous and next conrols. Check out the example markup below.
Bootstrap variables LESS variables, their values, and usage guidelines
-
-
-
Scaffolding and links
-
-
-
-
@bodyBackground
-
@white
-
Page background color
-
-
-
-
@textColor
-
@grayDark
-
Default text color for entire body, headings, and more
-
-
-
-
@linkColor
-
#08c
-
Default link text color
-
-
-
-
@linkColorHover
-
darken(@linkColor, 15%)
-
Default link text hover color
-
-
-
-
-
Grid system
-
-
-
-
@gridColumns
-
12
-
-
-
@gridColumnWidth
-
60px
-
-
-
@gridGutterWidth
-
20px
-
-
-
@fluidGridColumnWidth
-
6.382978723%
-
-
-
@fluidGridGutterWidth
-
2.127659574%
-
-
-
-
Typography
-
-
-
-
@sansFontFamily
-
"Helvetica Neue", Helvetica, Arial, sans-serif
-
-
-
@serifFontFamily
-
Georgia, "Times New Roman", Times, serif
-
-
-
@monoFontFamily
-
Menlo, Monaco, "Courier New", monospace
-
+
Scaffolding and links
+
+
+
+
@bodyBackground
+
@white
+
Page background color
+
+
+
+
@textColor
+
@grayDark
+
Default text color for entire body, headings, and more
+
+
+
+
@linkColor
+
#08c
+
Default link text color
+
+
+
+
@linkColorHover
+
darken(@linkColor, 15%)
+
Default link text hover color
+
+
+
+
+
Grid system
+
+
+
+
@gridColumns
+
12
+
+
+
@gridColumnWidth
+
60px
+
+
+
@gridGutterWidth
+
20px
+
+
+
@fluidGridColumnWidth
+
6.382978723%
+
+
+
@fluidGridGutterWidth
+
2.127659574%
+
+
+
+
Typography
+
+
+
+
@sansFontFamily
+
"Helvetica Neue", Helvetica, Arial, sans-serif
+
+
+
@serifFontFamily
+
Georgia, "Times New Roman", Times, serif
+
+
+
@monoFontFamily
+
Menlo, Monaco, "Courier New", monospace
+
-
-
@baseFontSize
-
13px
-
Must be pixels
-
-
-
@baseFontFamily
-
@sansFontFamily
-
-
-
@baseLineHeight
-
18px
-
Must be pixels
-
-
-
@altFontFamily
-
@serifFontFamily
-
+
+
@baseFontSize
+
13px
+
Must be pixels
+
+
+
@baseFontFamily
+
@sansFontFamily
+
+
+
@baseLineHeight
+
18px
+
Must be pixels
+
+
+
@altFontFamily
+
@serifFontFamily
+
+
+
+
@headingsFontFamily
+
inherit
+
+
+
@headingsFontWeight
+
bold
+
+
+
@headingsColor
+
inherit
+
+
+
+
Tables
+
+
+
+
@tableBackground
+
transparent
+
+
+
@tableBackgroundAccent
+
#f9f9f9
+
+
+
@tableBackgroundHover
+
#f5f5f5
+
+
+
@tableBorder
+
ddd
+
+
+
+
+
Grayscale colors
+
+
+
+
@black
+
#000
+
+
+
+
@grayDarker
+
#222
+
+
+
+
@grayDark
+
#333
+
+
+
+
@gray
+
#555
+
+
+
+
@grayLight
+
#999
+
+
+
+
@grayLighter
+
#eee
+
+
+
+
@white
+
#fff
+
+
+
+
+
Accent colors
+
+
+
+
@blue
+
#049cdb
+
+
+
+
@green
+
#46a546
+
+
+
+
@red
+
#9d261d
+
+
+
+
@yellow
+
#ffc40d
+
+
+
+
@orange
+
#f89406
+
+
+
+
@pink
+
#c3325f
+
+
+
+
@purple
+
#7a43b6
+
+
+
+
-
-
@headingsFontFamily
-
inherit
-
-
-
@headingsFontWeight
-
bold
-
-
-
@headingsColor
-
inherit
-
-
-
-
Tables
-
-
-
-
@tableBackground
-
transparent
-
-
-
@tableBackgroundAccent
-
#f9f9f9
-
-
-
@tableBackgroundHover
-
#f5f5f5
-
-
-
@tableBorder
-
ddd
-
-
-
-
-
-
Grayscale colors
-
-
-
-
@black
-
#000
-
-
-
-
@grayDarker
-
#222
-
-
-
-
@grayDark
-
#333
-
-
-
-
@gray
-
#555
-
-
-
-
@grayLight
-
#999
-
-
-
-
@grayLighter
-
#eee
-
-
-
-
@white
-
#fff
-
-
-
-
-
Accent colors
-
-
-
-
@blue
-
#049cdb
-
-
-
-
@green
-
#46a546
-
-
-
-
@red
-
#9d261d
-
-
-
-
@yellow
-
#ffc40d
-
-
-
-
@orange
-
#f89406
-
-
-
-
@pink
-
#c3325f
-
-
-
-
@purple
-
#7a43b6
-
-
-
-
-
-
Components
-
-
-
Buttons
-
-
-
-
@btnBackground
-
@white
-
-
-
-
@btnBackgroundHighlight
-
darken(@white, 10%)
-
-
-
-
@btnBorder
-
darken(@white, 20%)
-
-
-
-
@btnPrimaryBackground
-
@linkColor
-
-
-
-
@btnPrimaryBackgroundHighlight
-
spin(@btnPrimaryBackground, 15%)
-
-
+
Buttons
+
+
+
+
@btnBackground
+
@white
+
+
+
+
@btnBackgroundHighlight
+
darken(@white, 10%)
+
+
+
+
@btnBorder
+
darken(@white, 20%)
+
+
-
-
@btnInfoBackground
-
#5bc0de
-
-
-
-
@btnInfoBackgroundHighlight
-
#2f96b4
-
-
+
+
@btnPrimaryBackground
+
@linkColor
+
+
+
+
@btnPrimaryBackgroundHighlight
+
spin(@btnPrimaryBackground, 15%)
+
+
-
-
@btnSuccessBackground
-
#62c462
-
-
-
-
@btnSuccessBackgroundHighlight
-
51a351
-
-
+
+
@btnInfoBackground
+
#5bc0de
+
+
+
+
@btnInfoBackgroundHighlight
+
#2f96b4
+
+
-
-
@btnWarningBackground
-
lighten(@orange, 15%)
-
-
-
-
@btnWarningBackgroundHighlight
-
@orange
-
-
+
+
@btnSuccessBackground
+
#62c462
+
+
+
+
@btnSuccessBackgroundHighlight
+
51a351
+
+
-
-
@btnDangerBackground
-
#ee5f5b
-
-
-
-
@btnDangerBackgroundHighlight
-
#bd362f
-
-
+
+
@btnWarningBackground
+
lighten(@orange, 15%)
+
+
+
+
@btnWarningBackgroundHighlight
+
@orange
+
+
-
-
@btnInverseBackground
-
@gray
-
-
-
-
@btnInverseBackgroundHighlight
-
@grayDarker
-
-
-
-
-
Forms
-
-
-
-
@placeholderText
-
@grayLight
-
-
-
@inputBackground
-
@white
-
-
-
@inputBorder
-
#ccc
-
-
-
@inputBorderRadius
-
3px
-
-
-
@inputDisabledBackground
-
@grayLighter
-
-
-
@formActionsBackground
-
#f5f5f5
-
-
-
-
Form states and alerts
-
-
-
-
@warningText
-
#c09853
-
-
-
-
@warningBackground
-
#f3edd2
-
-
-
-
@errorText
-
#b94a48
-
-
-
-
@errorBackground
-
#f2dede
-
-
-
-
@successText
-
#468847
-
-
-
-
@successBackground
-
#dff0d8
-
-
-
-
@infoText
-
#3a87ad
-
-
-
-
@infoBackground
-
#d9edf7
-
-
-
-
-
-
-
Navbar
-
-
-
-
@navbarHeight
-
40px
-
-
-
-
@navbarBackground
-
@grayDarker
-
-
-
-
@navbarBackgroundHighlight
-
@grayDark
-
-
+
+
@btnDangerBackground
+
#ee5f5b
+
+
+
+
@btnDangerBackgroundHighlight
+
#bd362f
+
+
-
-
@navbarText
-
@grayLight
-
-
-
-
@navbarLinkColor
-
@grayLight
-
-
-
-
@navbarLinkColorHover
-
@white
-
-
-
-
@navbarLinkColorActive
-
@navbarLinkColorHover
-
-
-
-
@navbarLinkBackgroundHover
-
transparent
-
-
-
-
@navbarLinkBackgroundActive
-
@navbarBackground
-
-
+
+
@btnInverseBackground
+
@gray
+
+
+
+
@btnInverseBackgroundHighlight
+
@grayDarker
+
+
+
+
+
Forms
+
+
+
+
@placeholderText
+
@grayLight
+
+
+
@inputBackground
+
@white
+
+
+
@inputBorder
+
#ccc
+
+
+
@inputBorderRadius
+
3px
+
+
+
@inputDisabledBackground
+
@grayLighter
+
+
+
@formActionsBackground
+
#f5f5f5
+
+
+
+
Form states and alerts
+
+
+
+
@warningText
+
#c09853
+
+
+
+
@warningBackground
+
#f3edd2
+
+
+
+
@errorText
+
#b94a48
+
+
+
+
@errorBackground
+
#f2dede
+
+
+
+
@successText
+
#468847
+
+
+
+
@successBackground
+
#dff0d8
+
+
+
+
@infoText
+
#3a87ad
+
+
+
+
@infoBackground
+
#d9edf7
+
+
+
+
+
+
Navbar
+
+
+
+
@navbarHeight
+
40px
+
+
+
+
@navbarBackground
+
@grayDarker
+
+
+
+
@navbarBackgroundHighlight
+
@grayDark
+
+
+
+
+
@navbarText
+
@grayLight
+
+
+
+
@navbarLinkColor
+
@grayLight
+
+
+
+
@navbarLinkColorHover
+
@white
+
+
+
+
@navbarLinkColorActive
+
@navbarLinkColorHover
+
+
+
+
@navbarLinkBackgroundHover
+
transparent
+
+
+
+
@navbarLinkBackgroundActive
+
@navbarBackground
+
+
+
+
+
@navbarSearchBackground
+
lighten(@navbarBackground, 25%)
+
+
+
+
@navbarSearchBackgroundFocus
+
@white
+
+
+
+
@navbarSearchBorder
+
darken(@navbarSearchBackground, 30%)
+
+
+
+
@navbarSearchPlaceholderColor
+
#ccc
+
+
+
+
@navbarBrandColor
+
@navbarLinkColor
+
+
+
+
+
Dropdowns
+
+
+
+
@dropdownBackground
+
@white
+
+
+
@dropdownBorder
+
rgba(0,0,0,.2)
+
+
+
@dropdownLinkColor
+
@grayDark
+
+
+
@dropdownLinkColorHover
+
@white
+
+
+
@dropdownLinkBackgroundHover
+
@linkColor
+
+
+
@@dropdownDividerTop
+
#e5e5e5
+
+
+
@@dropdownDividerBottom
+
@white
+
+
+
+
Hero unit
+
+
+
+
@heroUnitBackground
+
@grayLighter
+
+
+
+
@heroUnitHeadingColor
+
inherit
+
+
+
+
@heroUnitLeadColor
+
inhereit
+
+
+
+
-
-
@navbarSearchBackground
-
lighten(@navbarBackground, 25%)
-
-
-
-
@navbarSearchBackgroundFocus
-
@white
-
-
-
-
@navbarSearchBorder
-
darken(@navbarSearchBackground, 30%)
-
-
-
-
@navbarSearchPlaceholderColor
-
#ccc
-
-
-
-
@navbarBrandColor
-
@navbarLinkColor
-
-
-
-
-
Dropdowns
-
-
-
-
@dropdownBackground
-
@white
-
-
-
@dropdownBorder
-
rgba(0,0,0,.2)
-
-
-
@dropdownLinkColor
-
@grayDark
-
-
-
@dropdownLinkColorHover
-
@white
-
-
-
@dropdownLinkBackgroundHover
-
@linkColor
-
-
-
-
Hero unit
-
-
-
-
@heroUnitBackground
-
@grayLighter
-
-
-
-
@heroUnitHeadingColor
-
inherit
-
-
-
-
@heroUnitLeadColor
-
inhereit
-
-
-
-
-
-
@@ -810,7 +812,7 @@
#grid > .fluid()
@fluidGridColumnWidth, @fluidGridGutterWidth
-
Generate a precent grid system with n columns and x % wide gutter
+
Generate a percent grid system with n columns and x % wide gutter
#grid > .input()
@@ -899,6 +901,11 @@
@columnCount, @columnGap: @gridGutterWidth
Make the content of any element use CSS3 columns
+
+
.hyphens()
+
@mode: auto
+
CSS3 hyphenation when you want it (includes word-wrap: break-word)
+
Backgrounds and gradients
@@ -975,8 +982,8 @@
Node with makefile
-
Install the LESS command line compiler and uglify-js globally with npm by running the following command:
-
$ npm install -g less uglify-js
+
Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:
+
$ npm install -g less jshint recess uglify-js
Once installed just run make from the root of your bootstrap directory and you're all set.
Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).
The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.
-
It also has four responsive variations for various devices and resolutions: phone, tablet portrait, tablet landscape and small desktops, and large widescreen desktops.
+
The default grid system provided in Bootstrap utilizes 12 columns that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
-
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
+
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
+
{{_i}}Lead body copy{{/i}}
+
{{_i}}Make a paragraph stand out by adding .lead.{{/i}}
+
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
@@ -1195,7 +1197,7 @@
@@ -1513,7 +1515,7 @@
<i class="icon-search icon-white"></i>
-
{{_i}}There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.{{/i}}
+
{{_i}}There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.{{/i}}
{{_i}}Heads up!{{/i}}
{{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}}
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 8e81a95df0..b1f8589981 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -736,7 +736,7 @@
{{_i}}Straightforward markup{{/i}}
{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}
-<div class="tabbable"> <-- Only required for left/right tabs -->
+<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
<li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
@@ -1252,7 +1252,7 @@
{{_i}}Success{{/i}}
{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}
-
+
{{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}}
@@ -1620,10 +1620,10 @@
<strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
-
{{_i}}Heads up!{{/i}} {{_i}}iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a button element with the data attribute, which we have opted to do for our docs.{{/i}}
+
{{_i}}Heads up!{{/i}} {{_i}}iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}
{{_i}}Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.{{/i}}
-
+
{{_i}}Warning!{{/i}}
{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
@@ -1642,7 +1642,7 @@
{{_i}}Error or danger{{/i}}
-
+
{{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}}
@@ -1654,7 +1654,7 @@
{{_i}}Success{{/i}}
-
+
{{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}}
@@ -1666,7 +1666,7 @@
{{_i}}Information{{/i}}
-
+
{{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}}
{{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}
{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}
{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}
{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.{{/i}}
{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}
-
+
{{_i}}Holy guacamole!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}}
-
+
{{_i}}Oh snap! You got an error!{{/i}}
{{_i}}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.{{/i}}
@@ -1294,7 +1270,7 @@ $('#myCollapsible').on('hidden', function () {
{{_i}}Markup{{/i}}
{{_i}}Data attributes are used for the previous and next conrols. Check out the example markup below.{{/i}}
{{_i}}Bootstrap variables LESS variables, their values, and usage guidelines{{/i}}
-
-
-
{{_i}}Scaffolding and links{{/i}}
-
-
-
-
@bodyBackground
-
@white
-
{{_i}}Page background color{{/i}}
-
-
-
-
@textColor
-
@grayDark
-
{{_i}}Default text color for entire body, headings, and more{{/i}}
-
-
-
-
@linkColor
-
#08c
-
{{_i}}Default link text color{{/i}}
-
-
-
-
@linkColorHover
-
darken(@linkColor, 15%)
-
{{_i}}Default link text hover color{{/i}}
-
-
-
-
-
{{_i}}Grid system{{/i}}
-
-
-
-
@gridColumns
-
12
-
-
-
@gridColumnWidth
-
60px
-
-
-
@gridGutterWidth
-
20px
-
-
-
@fluidGridColumnWidth
-
6.382978723%
-
-
-
@fluidGridGutterWidth
-
2.127659574%
-
-
-
-
{{_i}}Typography{{/i}}
-
-
-
-
@sansFontFamily
-
"Helvetica Neue", Helvetica, Arial, sans-serif
-
-
-
@serifFontFamily
-
Georgia, "Times New Roman", Times, serif
-
-
-
@monoFontFamily
-
Menlo, Monaco, "Courier New", monospace
-
+
{{_i}}Scaffolding and links{{/i}}
+
+
+
+
@bodyBackground
+
@white
+
{{_i}}Page background color{{/i}}
+
+
+
+
@textColor
+
@grayDark
+
{{_i}}Default text color for entire body, headings, and more{{/i}}
+
+
+
+
@linkColor
+
#08c
+
{{_i}}Default link text color{{/i}}
+
+
+
+
@linkColorHover
+
darken(@linkColor, 15%)
+
{{_i}}Default link text hover color{{/i}}
+
+
+
+
+
{{_i}}Grid system{{/i}}
+
+
+
+
@gridColumns
+
12
+
+
+
@gridColumnWidth
+
60px
+
+
+
@gridGutterWidth
+
20px
+
+
+
@fluidGridColumnWidth
+
6.382978723%
+
+
+
@fluidGridGutterWidth
+
2.127659574%
+
+
+
+
{{_i}}Typography{{/i}}
+
+
+
+
@sansFontFamily
+
"Helvetica Neue", Helvetica, Arial, sans-serif
+
+
+
@serifFontFamily
+
Georgia, "Times New Roman", Times, serif
+
+
+
@monoFontFamily
+
Menlo, Monaco, "Courier New", monospace
+
-
-
@baseFontSize
-
13px
-
Must be pixels
-
-
-
@baseFontFamily
-
@sansFontFamily
-
-
-
@baseLineHeight
-
18px
-
Must be pixels
-
-
-
@altFontFamily
-
@serifFontFamily
-
+
+
@baseFontSize
+
13px
+
Must be pixels
+
+
+
@baseFontFamily
+
@sansFontFamily
+
+
+
@baseLineHeight
+
18px
+
Must be pixels
+
+
+
@altFontFamily
+
@serifFontFamily
+
+
+
+
@headingsFontFamily
+
inherit
+
+
+
@headingsFontWeight
+
bold
+
+
+
@headingsColor
+
inherit
+
+
+
+
{{_i}}Tables{{/i}}
+
+
+
+
@tableBackground
+
transparent
+
+
+
@tableBackgroundAccent
+
#f9f9f9
+
+
+
@tableBackgroundHover
+
#f5f5f5
+
+
+
@tableBorder
+
ddd
+
+
+
+
+
{{_i}}Grayscale colors{{/i}}
+
+
+
+
@black
+
#000
+
+
+
+
@grayDarker
+
#222
+
+
+
+
@grayDark
+
#333
+
+
+
+
@gray
+
#555
+
+
+
+
@grayLight
+
#999
+
+
+
+
@grayLighter
+
#eee
+
+
+
+
@white
+
#fff
+
+
+
+
+
{{_i}}Accent colors{{/i}}
+
+
+
+
@blue
+
#049cdb
+
+
+
+
@green
+
#46a546
+
+
+
+
@red
+
#9d261d
+
+
+
+
@yellow
+
#ffc40d
+
+
+
+
@orange
+
#f89406
+
+
+
+
@pink
+
#c3325f
+
+
+
+
@purple
+
#7a43b6
+
+
+
+
-
-
@headingsFontFamily
-
inherit
-
-
-
@headingsFontWeight
-
bold
-
-
-
@headingsColor
-
inherit
-
-
-
-
{{_i}}Tables{{/i}}
-
-
-
-
@tableBackground
-
transparent
-
-
-
@tableBackgroundAccent
-
#f9f9f9
-
-
-
@tableBackgroundHover
-
#f5f5f5
-
-
-
@tableBorder
-
ddd
-
-
-
-
-
-
{{_i}}Grayscale colors{{/i}}
-
-
-
-
@black
-
#000
-
-
-
-
@grayDarker
-
#222
-
-
-
-
@grayDark
-
#333
-
-
-
-
@gray
-
#555
-
-
-
-
@grayLight
-
#999
-
-
-
-
@grayLighter
-
#eee
-
-
-
-
@white
-
#fff
-
-
-
-
-
{{_i}}Accent colors{{/i}}
-
-
-
-
@blue
-
#049cdb
-
-
-
-
@green
-
#46a546
-
-
-
-
@red
-
#9d261d
-
-
-
-
@yellow
-
#ffc40d
-
-
-
-
@orange
-
#f89406
-
-
-
-
@pink
-
#c3325f
-
-
-
-
@purple
-
#7a43b6
-
-
-
-
-
-
{{_i}}Components{{/i}}
-
-
-
{{_i}}Buttons{{/i}}
-
-
-
-
@btnBackground
-
@white
-
-
-
-
@btnBackgroundHighlight
-
darken(@white, 10%)
-
-
-
-
@btnBorder
-
darken(@white, 20%)
-
-
-
-
@btnPrimaryBackground
-
@linkColor
-
-
-
-
@btnPrimaryBackgroundHighlight
-
spin(@btnPrimaryBackground, 15%)
-
-
+
{{_i}}Buttons{{/i}}
+
+
+
+
@btnBackground
+
@white
+
+
+
+
@btnBackgroundHighlight
+
darken(@white, 10%)
+
+
+
+
@btnBorder
+
darken(@white, 20%)
+
+
-
-
@btnInfoBackground
-
#5bc0de
-
-
-
-
@btnInfoBackgroundHighlight
-
#2f96b4
-
-
+
+
@btnPrimaryBackground
+
@linkColor
+
+
+
+
@btnPrimaryBackgroundHighlight
+
spin(@btnPrimaryBackground, 15%)
+
+
-
-
@btnSuccessBackground
-
#62c462
-
-
-
-
@btnSuccessBackgroundHighlight
-
51a351
-
-
+
+
@btnInfoBackground
+
#5bc0de
+
+
+
+
@btnInfoBackgroundHighlight
+
#2f96b4
+
+
-
-
@btnWarningBackground
-
lighten(@orange, 15%)
-
-
-
-
@btnWarningBackgroundHighlight
-
@orange
-
-
+
+
@btnSuccessBackground
+
#62c462
+
+
+
+
@btnSuccessBackgroundHighlight
+
51a351
+
+
-
-
@btnDangerBackground
-
#ee5f5b
-
-
-
-
@btnDangerBackgroundHighlight
-
#bd362f
-
-
+
+
@btnWarningBackground
+
lighten(@orange, 15%)
+
+
+
+
@btnWarningBackgroundHighlight
+
@orange
+
+
-
-
@btnInverseBackground
-
@gray
-
-
-
-
@btnInverseBackgroundHighlight
-
@grayDarker
-
-
-
-
-
{{_i}}Forms{{/i}}
-
-
-
-
@placeholderText
-
@grayLight
-
-
-
@inputBackground
-
@white
-
-
-
@inputBorder
-
#ccc
-
-
-
@inputBorderRadius
-
3px
-
-
-
@inputDisabledBackground
-
@grayLighter
-
-
-
@formActionsBackground
-
#f5f5f5
-
-
-
-
{{_i}}Form states and alerts{{/i}}
-
-
-
-
@warningText
-
#c09853
-
-
-
-
@warningBackground
-
#f3edd2
-
-
-
-
@errorText
-
#b94a48
-
-
-
-
@errorBackground
-
#f2dede
-
-
-
-
@successText
-
#468847
-
-
-
-
@successBackground
-
#dff0d8
-
-
-
-
@infoText
-
#3a87ad
-
-
-
-
@infoBackground
-
#d9edf7
-
-
-
-
-
-
-
{{_i}}Navbar{{/i}}
-
-
-
-
@navbarHeight
-
40px
-
-
-
-
@navbarBackground
-
@grayDarker
-
-
-
-
@navbarBackgroundHighlight
-
@grayDark
-
-
+
+
@btnDangerBackground
+
#ee5f5b
+
+
+
+
@btnDangerBackgroundHighlight
+
#bd362f
+
+
-
-
@navbarText
-
@grayLight
-
-
-
-
@navbarLinkColor
-
@grayLight
-
-
-
-
@navbarLinkColorHover
-
@white
-
-
-
-
@navbarLinkColorActive
-
@navbarLinkColorHover
-
-
-
-
@navbarLinkBackgroundHover
-
transparent
-
-
-
-
@navbarLinkBackgroundActive
-
@navbarBackground
-
-
+
+
@btnInverseBackground
+
@gray
+
+
+
+
@btnInverseBackgroundHighlight
+
@grayDarker
+
+
+
+
+
{{_i}}Forms{{/i}}
+
+
+
+
@placeholderText
+
@grayLight
+
+
+
@inputBackground
+
@white
+
+
+
@inputBorder
+
#ccc
+
+
+
@inputBorderRadius
+
3px
+
+
+
@inputDisabledBackground
+
@grayLighter
+
+
+
@formActionsBackground
+
#f5f5f5
+
+
+
+
{{_i}}Form states and alerts{{/i}}
+
+
+
+
@warningText
+
#c09853
+
+
+
+
@warningBackground
+
#f3edd2
+
+
+
+
@errorText
+
#b94a48
+
+
+
+
@errorBackground
+
#f2dede
+
+
+
+
@successText
+
#468847
+
+
+
+
@successBackground
+
#dff0d8
+
+
+
+
@infoText
+
#3a87ad
+
+
+
+
@infoBackground
+
#d9edf7
+
+
+
+
+
+
{{_i}}Navbar{{/i}}
+
+
+
+
@navbarHeight
+
40px
+
+
+
+
@navbarBackground
+
@grayDarker
+
+
+
+
@navbarBackgroundHighlight
+
@grayDark
+
+
+
+
+
@navbarText
+
@grayLight
+
+
+
+
@navbarLinkColor
+
@grayLight
+
+
+
+
@navbarLinkColorHover
+
@white
+
+
+
+
@navbarLinkColorActive
+
@navbarLinkColorHover
+
+
+
+
@navbarLinkBackgroundHover
+
transparent
+
+
+
+
@navbarLinkBackgroundActive
+
@navbarBackground
+
+
+
+
+
@navbarSearchBackground
+
lighten(@navbarBackground, 25%)
+
+
+
+
@navbarSearchBackgroundFocus
+
@white
+
+
+
+
@navbarSearchBorder
+
darken(@navbarSearchBackground, 30%)
+
+
+
+
@navbarSearchPlaceholderColor
+
#ccc
+
+
+
+
@navbarBrandColor
+
@navbarLinkColor
+
+
+
+
+
{{_i}}Dropdowns{{/i}}
+
+
+
+
@dropdownBackground
+
@white
+
+
+
@dropdownBorder
+
rgba(0,0,0,.2)
+
+
+
@dropdownLinkColor
+
@grayDark
+
+
+
@dropdownLinkColorHover
+
@white
+
+
+
@dropdownLinkBackgroundHover
+
@linkColor
+
+
+
@@dropdownDividerTop
+
#e5e5e5
+
+
+
@@dropdownDividerBottom
+
@white
+
+
+
+
{{_i}}Hero unit{{/i}}
+
+
+
+
@heroUnitBackground
+
@grayLighter
+
+
+
+
@heroUnitHeadingColor
+
inherit
+
+
+
+
@heroUnitLeadColor
+
inhereit
+
+
+
+
-
-
@navbarSearchBackground
-
lighten(@navbarBackground, 25%)
-
-
-
-
@navbarSearchBackgroundFocus
-
@white
-
-
-
-
@navbarSearchBorder
-
darken(@navbarSearchBackground, 30%)
-
-
-
-
@navbarSearchPlaceholderColor
-
#ccc
-
-
-
-
@navbarBrandColor
-
@navbarLinkColor
-
-
-
-
-
{{_i}}Dropdowns{{/i}}
-
-
-
-
@dropdownBackground
-
@white
-
-
-
@dropdownBorder
-
rgba(0,0,0,.2)
-
-
-
@dropdownLinkColor
-
@grayDark
-
-
-
@dropdownLinkColorHover
-
@white
-
-
-
@dropdownLinkBackgroundHover
-
@linkColor
-
-
-
-
{{_i}}Hero unit{{/i}}
-
-
-
-
@heroUnitBackground
-
@grayLighter
-
-
-
-
@heroUnitHeadingColor
-
inherit
-
-
-
-
@heroUnitLeadColor
-
inhereit
-
-
-
-
-
-
@@ -733,7 +734,7 @@
#grid > .fluid()
@fluidGridColumnWidth, @fluidGridGutterWidth
-
{{_i}}Generate a precent grid system with n columns and x % wide gutter{{/i}}
+
{{_i}}Generate a percent grid system with n columns and x % wide gutter{{/i}}
#grid > .input()
@@ -822,6 +823,11 @@
@columnCount, @columnGap: @gridGutterWidth
{{_i}}Make the content of any element use CSS3 columns{{/i}}
+
+
.hyphens()
+
@mode: auto
+
{{_i}}CSS3 hyphenation when you want it (includes word-wrap: break-word){{/i}}
+
{{_i}}Backgrounds and gradients{{/i}}
@@ -898,8 +904,8 @@
{{_i}}Node with makefile{{/i}}
-
{{_i}}Install the LESS command line compiler and uglify-js globally with npm by running the following command:{{/i}}
-
$ npm install -g less uglify-js
+
{{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}
+
$ npm install -g less jshint recess uglify-js
{{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}
{{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}
{{_i}}The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.{{/i}}
-
{{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, tablet landscape and small desktops, and large widescreen desktops.{{/i}}
+
{{_i}}The default grid system provided in Bootstrap utilizes 12 columns that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. {{/i}}
This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.