{{_i}}Why LESS?{{/i}}

{{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

{{_i}}What's included?{{/i}}

{{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

{{_i}}Learn more{{/i}}

{{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

{{_i}}Variables{{/i}}

{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.{{/i}}

{{_i}}Mixins{{/i}}

{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}

{{_i}}Operations{{/i}}

{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/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
`@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

{{_i}}Components{{/i}}

{{_i}}Buttons{{/i}}

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@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`

{{_i}}About mixins{{/i}}

{{_i}}Basic mixins{{/i}}

{{_i}}A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.{{/i}}

.element {
  .clearfix();
}

{{_i}}Parametric mixins{{/i}}

{{_i}}A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.{{/i}}

.element {
  .border-radius(4px);
}

{{_i}}Easily add your own{{/i}}

{{_i}}Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.{{/i}}

{{_i}}So, go ahead and use the existing ones or feel free to add your own as you need.{{/i}}

{{_i}}Included mixins{{/i}}

{{_i}}Utilities{{/i}}

{{_i}}Mixin{{/i}}	{{_i}}Parameters{{/i}}	{{_i}}Usage{{/i}}
`.clearfix()`	none	{{_i}}Add to any parent to clear floats within{{/i}}
`.tab-focus()`	none	{{_i}}Apply the Webkit focus style and round Firefox outline{{/i}}
`.center-block()`	none	{{_i}}Auto center a block-level element using `margin: auto`{{/i}}
`.ie7-inline-block()`	none	{{_i}}Use in addition to regular `display: inline-block` to get IE7 support{{/i}}
`.size()`	`@height @width`	{{_i}}Quickly set the height and width on one line{{/i}}
`.square()`	`@size`	{{_i}}Builds on `.size()` to set the width and height as same value{{/i}}
`.opacity()`	`@opacity`	{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}

Forms

{{_i}}Mixin{{/i}}	{{_i}}Parameters{{/i}}	{{_i}}Usage{{/i}}
`.placeholder()`	`@color: @placeholderText`	{{_i}}Set the `placeholder` text color for inputs{{/i}}

Typography

{{_i}}Mixin{{/i}}	{{_i}}Parameters{{/i}}	{{_i}}Usage{{/i}}
`#font > #family > .serif()`	none	{{_i}}Make an element use a serif font stack{{/i}}
`#font > #family > .sans-serif()`	none	{{_i}}Make an element use a sans-serif font stack{{/i}}
`#font > #family > .monospace()`	none	{{_i}}Make an element use a monospace font stack{{/i}}
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	{{_i}}Easily set font size, weight, and leading{{/i}}
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	{{_i}}Set font family to serif, and control size, weight, and leading{{/i}}
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	{{_i}}Set font family to sans-serif, and control size, weight, and leading{{/i}}
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	{{_i}}Set font family to monospace, and control size, weight, and leading{{/i}}

Grid system

{{_i}}Mixin{{/i}}	{{_i}}Parameters{{/i}}	{{_i}}Usage{{/i}}
`.container-fixed()`	none	{{_i}}Create a horizontally centered container for holding your content{{/i}}
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	{{_i}}Generate a pixel grid system (container, row, and columns) with n columns and x pixel wide gutter{{/i}}
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	{{_i}}Generate a precent grid system with n columns and x % wide gutter{{/i}}
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	{{_i}}Generate the pixel grid system for `input` elements, accounting for padding and borders{{/i}}
`.makeColumn`	`@columns: 1, @offset: 0`	{{_i}}Turn any `div` into a grid column without the `.span*` classes{{/i}}

{{_i}}CSS3 properties{{/i}}

{{_i}}Mixin{{/i}}	{{_i}}Parameters{{/i}}	{{_i}}Usage{{/i}}
`.border-radius()`	`@radius`	{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}
`.box-shadow()`	`@shadow`	{{_i}}Add a drop shadow to an element{{/i}}
`.transition()`	`@transition`	{{_i}}Add CSS3 transition effect (e.g., `all .2s linear`){{/i}}
`.rotate()`	`@degrees`	{{_i}}Rotate an element n degrees{{/i}}
`.scale()`	`@ratio`	{{_i}}Scale an element to n times its original size{{/i}}
`.translate()`	`@x, @y`	{{_i}}Move an element on the x and y planes{{/i}}
`.background-clip()`	`@clip`	{{_i}}Crop the background of an element (useful for `border-radius`){{/i}}
`.background-size()`	`@size`	{{_i}}Control the size of background images via CSS3{{/i}}
`.box-sizing()`	`@boxmodel`	{{_i}}Change the box model for an element (e.g., `border-box` for a full-width `input`){{/i}}
`.user-select()`	`@select`	{{_i}}Control cursor selection of text on a page{{/i}}
`.backface-visibility()`	`@visibility: visible`	{{_i}}Prevent flickering of content when using CSS 3D transforms{{/i}}
`.resizable()`	`@direction: both`	{{_i}}Make any element resizable on the right and bottom{{/i}}
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	{{_i}}Make the content of any element use CSS3 columns{{/i}}

{{_i}}Backgrounds and gradients{{/i}}

{{_i}}Mixin{{/i}}	{{_i}}Parameters{{/i}}	{{_i}}Usage{{/i}}
`#translucent > .background()`	`@color: @white, @alpha: 1`	{{_i}}Give an element a translucent background color{{/i}}
`#translucent > .border()`	`@color: @white, @alpha: 1`	{{_i}}Give an element a translucent border color{{/i}}
`#gradient > .vertical()`	`@startColor, @endColor`	{{_i}}Create a cross-browser vertical background gradient{{/i}}
`#gradient > .horizontal()`	`@startColor, @endColor`	{{_i}}Create a cross-browser horizontal background gradient{{/i}}
`#gradient > .directional()`	`@startColor, @endColor, @deg`	{{_i}}Create a cross-browser directional background gradient{{/i}}
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	{{_i}}Create a cross-browser three-color background gradient{{/i}}
`#gradient > .radial()`	`@innerColor, @outerColor`	{{_i}}Create a cross-browser radial background gradient{{/i}}
`#gradient > .striped()`	`@color, @angle`	{{_i}}Create a cross-browser striped background gradient{{/i}}
`#gradientBar()`	`@primaryColor, @secondaryColor`	{{_i}}Used for buttons to assign a gradient and slightly darker border{{/i}}

{{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}}

{{_i}}Tools for compiling{{/i}}

{{_i}}Node with makefile{{/i}}

{{_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}}Command line{{/i}}

{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

$ lessc ./less/bootstrap.less > bootstrap.css

{{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

{{_i}}Javascript{{/i}}

{{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.{{/i}}

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

{{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

{{_i}}Unofficial Mac app{{/i}}

{{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}

{{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

{{_i}}Built with LESS{{/i}}