{{_i}}Hyperlinks{{/i}}

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}	{{_i}}Usage{{/i}}
`@linkColor`	#08c	{{_i}}Default link text color{{/i}}
`@linkColorHover`	`darken(@linkColor, 15%)`	{{_i}}Default link text hover color{{/i}}

{{_i}}Grayscale colors{{/i}}

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}
`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#fff

{{_i}}Accent colors{{/i}}

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}
`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

{{_i}}Grid system{{/i}}

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}
`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@siteWidth`	`(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))`

{{_i}}Typography{{/i}}

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}
`@baseFontSize`	13px
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18px

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

Buttons

`@primaryButtonBackground`	`@linkColor`

Forms

`@placeholderText`	`@grayLight`

Navbar

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`

{{_i}}Form states and alerts{{/i}}

`@warningText`	#f3edd2
`@warningBackground`	#c09853
`@warningBorder`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@errorBorder`	#e9c7c7
`@successText`	#468847
`@successBackground`	#dff0d8
`@successBorder`	#cfe8c4
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7
`@infoBorder`	#bfe1f2

{{_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}}
`.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: 5px, @width: 5px`	{{_i}}Quickly set the height and width on one line{{/i}}
`.square()`	`@size: 5px`	{{_i}}Builds on `.size()` to set the width and height as same value{{/i}}
`.opacity()`	`@opacity: 100`	{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}
`.reset-filter()`	none	{{_i}}Resets any IE filter{{/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}}Provide a fixed-width (set with `@siteWidth`) container for holding your content{{/i}}
`.columns()`	`@columns: 1`	{{_i}}Build a grid column that spans any number of columns (defaults to 1 column){{/i}}
`.offset()`	`@columns: 1`	{{_i}}Offset a grid column with left margin that spans any number of columns{{/i}}
`.gridColumn()`	none	{{_i}}Make an element float like a grid column{{/i}}

CSS3 properties

{{_i}}Mixin{{/i}}	{{_i}}Parameters{{/i}}	{{_i}}Usage{{/i}}
`.border-radius()`	`@radius: 5px`	{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}
`.box-shadow()`	`@shadow: 0 1px 3px rgba(0,0,0,.25)`	{{_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 it's original size{{/i}}
`.translate()`	`@x: 0, @y: 0`	{{_i}}Move an element on the x and y planes{{/i}}
`.background-clip()`	`@clip`	{{_i}}Crop the backgroud 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}}
`.resizable()`	`@direction: both`	{{_i}}Make any element resizable on the right and bottom{{/i}}
`.content-columns()`	`@columnCount, @columnGap: @gridColumnGutter`	{{_i}}Make the content of any element use CSS3 columns{{/i}}

Backgrounds and gradients

{{_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 with npm by running the following command:{{/i}}

$ npm install less

{{_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 ./lib/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}}

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

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

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

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

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

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

{{_i}}Bootstrap variables {{/i}}

{{_i}}Hyperlinks{{/i}}

{{_i}}Grayscale colors{{/i}}

{{_i}}Accent colors{{/i}}

{{_i}}Grid system{{/i}}

{{_i}}Typography{{/i}}

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

Buttons

Forms

Navbar

{{_i}}Form states and alerts{{/i}}

{{_i}}Bootstrap mixins {{/i}}

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

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

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

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

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

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

Forms

Typography

Grid system

CSS3 properties

Backgrounds and gradients

{{_i}}Compiling Bootstrap with LESS{{/i}}

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

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

{{_i}}Command line{{/i}}

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

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

{{_i}}More Mac apps{{/i}}

Crunch

CodeKit

Simpless