Bootstrap Cheat Sheet

by John Mason (masonjo) via cheatography.com/18871/cs/1992/

Rows - Grid System Using Grid Mixin HTML Images

Rows are in .container or .conta​ine​r-fluid <div class=​"​wra​ppe​r"> .img-r​esp​onsive (max-w​idt​h:100%,

<div class=​"​con​ten​t-m​ain​"​>...</​div> height​:auto)
Columns <div class=​"​con​ten​t-s​eco​nda​ry">...<​/d​iv>
.img-r​ounded
</d​iv>
.col-xs- Always Full .img-c​ircle

.col-sm- >768 750 wide Typography .img-t​hum​bnail (double border)

.col-md- >992 970 wide

.h1 .h2 .h3
Forms
.col-lg- >1200 1170 wide
.h4 .h5 .h6
NEED TO DO
.small <sm​all> .lead
Resets, Offsets, Pushes, Pulls
@font-​siz​e-base | @line-​hei​ght​-base Buttons
.clearfix

.col-x​s-o​ffset- (sm, md, lg) <button type="b​utt​on" class=​"btn btn-

Align
de​fau​lt">​Def​aul​t</​but​ton>
Nest using a .row inside a col
.text-left .text-​right <a href="#​" class=​"btn btn-pr​imary btn-lg
.col-x​s-push- (sm, md, lg) active​" role="b​utt​on">​Primary link</​a>
.text-​center .text-​justify
.col-x​s-pull- (sm, md, lg)
Button Classes
.visib​le-xs (sm, md, lg) Text Helpers

.hidden-xs (sm, md, lg) .btn-d​efault .btn-p​rimary

.text-​muted .text-​primary
.visib​le-​print .btn-s​uccess .btn-info
.text-​success .text-info
.hidde​n-print .btn-w​arning .btn-d​anger
.text-​warning .text-​danger
.btn-link (to look like a link)
.bg-pr​imary .bg-su​ccess
Grid Variables
.btn-lg .btn-sm
.bg-info .bg-wa​rning
@grid-​col​umns: 12 .btn-xs .btn-block
.bg-danger
@grid-​gut​ter​-width: 30px .active (A tag) .disabled (A tag)
.tex​t-h​ide .sr-​only
@grid-​flo​at-​bre​akp​oint: 768px disabl​ed=​"​dis​abl​ed"

Lists
Using Grid Mixin CSS Labels
.list-​uns​tyled .list-​inline
.wrapper {.make​-ro​w();} .label .label​-de​fault
.conte​nt-main {.make​-lg​-co​lum​n(8);}
Descri​ptions primary, success, info, warning, danger
.conte​nt-​sec​ondary {
.make-​lg-​col​umn(3); <dl> <dt​>...</​dt> <dd​>...</​dd> </d​l> <span class=​"​label label-​def​aul​t">N​ew<​/sp​an>
.make-​lg-​col​umn​-of​fse​t(1); .dl-ho​riz​ontal
} Badge

<span class=​"​bad​ge">​42<​/sp​an>

By John Mason (masonjo) Published 29th April, 2014. Sponsored by CrosswordCheats.com

cheatography.com/masonjo/ Last updated 1st June, 2014. Learn to solve cryptic crosswords!
www.e-rehab.com Page 1 of 3. http://crosswordcheats.com
 Bootstrap Cheat Sheet
by John Mason (masonjo) via cheatography.com/18871/cs/1992/

Alerts

.alert .alert​-su​ccess

success, info, warning, or danger

.alert​-di​smi​ssable

<button type="b​utt​on" class=​"​clo​se" data-d​ism​iss​="al​ert​" aria-

h​idd​en=​"​tru​e">&ti​mes​;</​but​ton>

<a href="#​" class=​"​ale​rt-​lin​k">...<​/a>

By John Mason (masonjo) Published 29th April, 2014. Sponsored by CrosswordCheats.com

cheatography.com/masonjo/ Last updated 1st June, 2014. Learn to solve cryptic crosswords!
www.e-rehab.com Page 2 of 3. http://crosswordcheats.com
 Bootstrap Cheat Sheet
by John Mason (masonjo) via cheatography.com/18871/cs/1992/

Tables Tags (cont)

.table .table​-st​riped close button

.table​-bo​rdered .table​-hover <button type="b​utt​on" class=​"​clo​se" aria-

.table​-co​ndensed h​idd​en=​"​tru​e">&ti​mes​;</​but​ton>

.table​-re​spo​nsive Caret

Wrap .table in .table​-re​spo​nsive <span class=​"​car​et">​</s​pan>

<div class=​'ta​ble​-re​spo​nsi​ve'> Floats
...table
.pull-left .pull-​right
</d​iv>
Float Mixin
Rows or Cells .element { .pull-​left(); }

.active .success .info Clear Floats

.warning .danger .clearfix

Center Block (mixin also)

Tags
.cente​r-block (displ​ay:​block, margin auto) |
abbr
.cente​r-b​lock();
<abbr title=​"​att​rib​ute​"​>at​tr<​/ab​br>
Show (mixin also)
addr​ess
.show | .show();
<ad​dre​ss> <st​ron​g>T​witter, Inc.</​str​ong​>
Hide (mixin also)
<b​r> 795 Folsom Ave, Suite 600<br> San
Francisco, CA 94107<​br> <abbr .hide | .hide();
title=​"​Pho​ne">​P:<​/ab​br> (123) 456-7890
Glyp​hic​ons
</a​ddr​ess>
<span class=​"​gly​phicon glyphi​con​-
bloc​kqu​ote se​arc​h"><​/sp​an>
<bl​ock​quo​te> <p>​Lorem ipsum dolor sit
amet, consec​tetur adipiscing elit.
Intege​r</​p> </b​loc​kqu​ote>

blockquote footer

<fo​ote​r>S​omeone famous in <cite

title=​"​Source Title">​Source
Title<​/ci​te>​</f​oot​er>

bloc​kqu​ote right justify

.block​quo​te-​reverse

code

<co​de>​&l​t;s​ect​ion​&g​t;<​/co​de>

kbd Keyboard Entry

<kb​d>c​d</​kbd>

.pre-s​cro​llable

Max Height 350px box, with y-axis scrollbar.

Used with pre tag

By John Mason (masonjo) Published 29th April, 2014. Sponsored by CrosswordCheats.com

cheatography.com/masonjo/ Last updated 1st June, 2014. Learn to solve cryptic crosswords!
www.e-rehab.com Page 3 of 3. http://crosswordcheats.com