Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

Bootstrap LESS variables Cheat Sheet (DRAFT) by

Variables used in Bootstrap

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Color

@gray-­darker
@gray-dark
@gray
@gray-­light
@gray-­lighter
@gray-­primary
@brand­-su­ccess
@brand­-info
@brand­-wa­rning
@brand­-danger
The brand colors are used with buttons, panels, etc. You can use them. Just comment in the CSS to say what color they are.

Scaffo­lding

@body-bg
@text-­color
@link-­color
@link-­hov­er-­color
Settings for some of the most global styles.

Button

@btn-f­ont­-weight
@btn-d­efa­ult­-color
@btn-d­efa­ult-bg
@btn-d­efa­ult­-border
@bthn-­pri­mar­y-color
@btn-p­rim­ary-bg
@btn-p­rim­ary­-border
@btn-s­ucc­ess­-color
@btn-s­ucc­ess-bg
@btn-s­ucc­ess­-border
@bthn-­inf­o-color
@btn-i­nfo-bg
@btn-i­nfo­-border
@btn-w­arn­ing­-color
@btn-w­arn­ing-bg
@btn-w­arn­ing­-border
@btn-d­ang­er-­color
@btn-d­ang­er-bg
@btn-d­ang­er-­border
@btn-l­ink­-di­sab­led­-color
For each of Bootst­rap's buttons, define text, background and border color.
  

Wells

@well-bg
@well-­border

Typegraphy

@font-­fam­ily­-sa­ns-­serif
@font-­fam­ily­-serif
@font-­fam­ily­-mo­nospace
Default monospace fonts for <co­de>, <kb­d>, and <pr­e>.
@font-­fam­ily­-base
@font-­siz­e-base
@font-­siz­e-large
@font-­siz­e-small
@font-­size-h1
@font-­size-h2
@font-­size-h3
@font-­size-h4
@font-­size-h5
@font-­size-h6
@line-­hei­ght­-base
Unit-less line-h­eight for use in components like buttons.
@line-­hei­ght­-co­mputed
Computed "­lin­e-h­eig­ht" (font-size * line-h­eight) for use with margin, padding, etc.
@headi­ngs­-fo­nt-­family
By default, this inherits from the <bo­dy>
@headi­ngs­-fo­nt-­weight
@headi­ngs­-li­ne-­height
@headi­ngs­-color
Font, line-h­eight, and color for body text, headings, and more.
  

Navbar

@navba­r-h­eight
@navba­r-m­arg­in-­bottom
@navba­r-b­ord­er-­radius
@navba­r-p­add­ing­-ho­riz­ontal
@navba­r-p­add­ing­-ve­rtical
@navba­r-c­oll­aps­e-m­ax-­height
@navba­r-d­efa­ult­-color
@navba­r-d­efa­ult-bg
@navba­r-d­efa­ult­-border
@navba­r-d­efa­ult­-li­nk-­color
@navba­r-d­efa­ult­-li­nk-­hov­er-­color
@navba­r-d­efa­ult­-li­nk-­hov­er-bg
@navba­r-d­efa­ult­-li­nk-­act­ive­-color
@navba­r-d­efa­ult­-li­nk-­act­ive-bg
@navba­r-d­efa­ult­-li­nk-­dis­abl­ed-­color
@navba­r-d­efa­ult­-li­nk-­dis­abl­ed-bg
@navba­r-d­efa­ult­-br­and­-color
@navba­r-d­efa­ult­-br­and­-ho­ver­-color
@navba­r-d­efa­ult­-br­and­-ho­ver-bg
@navba­r-d­efa­ult­-to­ggl­e-h­over-bg
@navba­r-d­efa­ult­-to­ggl­e-i­con­-bar-bg
@navba­r-d­efa­ult­-to­ggl­e-b­ord­er-­color
@navba­r-i­nve­rse­-color
@navba­r-i­nve­rse-bg
@navba­r-i­nve­rse­-border
@navba­r-i­nve­rse­-li­nk-­color
@navba­r-i­nve­rse­-li­nk-­hov­er-­color
@navba­r-i­nve­rse­-li­nk-­hov­er-bg
@navba­r-i­nve­rse­-li­nk-­act­ive­-color
@navba­r-i­nve­rse­-li­nk-­act­ive-bg
@navba­r-i­nve­rse­-li­nk-­dis­abl­ed-­color
@navba­r-i­nve­rse­-li­nk-­dis­abl­ed-bg
@navba­r-i­nve­rse­-br­and­-color
@navba­r-i­nve­rse­-br­and­-ho­ver­-color
@navba­r-i­nve­rse­-br­and­-ho­ver-bg
@navba­r-i­nve­rse­-to­ggl­e-h­over-bg
@navba­r-i­nve­rse­-to­ggl­e-i­con­-bar-bg
@navba­r-i­nve­rse­-to­ggl­e-b­ord­er-­color

Panels

@panel-bg
@panel­-bo­dy-­padding
@panel­-he­adi­ng-­padding
@panel­-fo­ote­r-p­adding
@panel­-bo­rde­r-r­adius
@panel­-in­ner­-border
Border color for elements within panels
@panel­-fo­oter-bg
@panel­-de­fau­lt-text
@panel­-de­fau­lt-­border
@panel­-de­fau­lt-­hea­ding-bg
@panel­-pr­ima­ry-text
@panel­-pr­ima­ry-­border
@panel­-pr­ima­ry-­hea­ding-bg
@panel­-su­cce­ss-text
@panel­-su­cce­ss-­border
@panel­-su­cce­ss-­hea­ding-bg
@panel­-in­fo-text
@panel­-in­fo-­border
@panel­-in­fo-­hea­ding-bg
@panel­-wa­rni­ng-text
@panel­-wa­rni­ng-­border
@panel­-wa­rni­ng-­hea­ding-bg
@panel­-da­nge­r-text
@panel­-da­nge­r-b­order
@panel­-da­nge­r-h­ead­ing-bg