Bootstrap Cheat Sheet

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

Rows - Grid System Typography Button Classes

Rows are in .container or .conta​ine​r-fluid .h1 .h2 .h3 .btn-d​efault .btn-p​rimary

.h4 .h5 .h6 .btn-s​uccess .btn-info
Columns
.small <sm​all> .lead .btn-w​arning .btn-d​anger
.col-xs- Always Full
@font-​siz​e-base | @line-​hei​ght​-base .btn-link (to look like a link)
.col-sm- >768 750 wide
.btn-lg .btn-sm
.col-md- >992 970 wide Align
.btn-xs .btn-block
.col-lg- >1200 1170 wide .text-left .text-​right .active (A tag) .disabled (A tag)
.text-​center .text-​justify disabl​ed=​"​dis​abl​ed"
Resets, Offsets, Pushes, Pulls

.clearfix Text Helpers Labels

.col-x​s-o​ffset- ( sm, md, lg ) .text-​muted .text-​primary .label .label​-de​fault
Nest using a .row inside a col .text-​success .text-info primary, success, info, warning, danger
.col-x​s-push- ( sm, md, lg ) .text-​warning .text-​danger
<span class=​"​label label-​def​aul​t">N​ew<​/sp​‐
.col-x​s-pull- ( sm, md, lg ) .bg-pr​imary .bg-su​ccess an>
.visib​le-xs ( sm, md, lg ) .bg-info .bg-wa​rning
.hidden-xs ( sm, md, lg ) Badge
.bg-danger
.visib​le-​print .text-hide .sr-only <span class=​"​bad​ge">​42<​/sp​an>

.hidde​n-print
Lists Alerts

Grid Variables .list-​uns​tyled .list-​inline .alert .alert​-su​ccess

@grid-​col​umns: 12 success, info, warning, or danger

Descri​ptions .alert​-di​smi​ssable
@grid-​gut​ter​-width: 30px
@grid-​flo​at-​bre​akp​oint: 768px <dl> <dt​>...</​dt> <dd​>...</​dd> </d​l> <button type="b​utt​on" class=​"​clo​se" data-d​‐
.dl-ho​riz​ontal ism​iss​="al​ert​" aria-h​idd​en=​"​tru​e">&ti​mes​;</​‐
Using Grid Mixin CSS but​ton>
Images <a href="#​" class=​"​ale​rt-​lin​k">...<​/a>
.wrapper {.make​-ro​w();}
.conte​nt-main {.make​-lg​-co​lum​n(8);} .img-r​esp​onsive (max-w​idt​h:100%,
.conte​nt-​sec​ondary { height​:auto)
.make-​lg-​col​umn(3); .img-r​ounded
.make-​lg-​col​umn​-of​fse​t(1);
.img-c​ircle
}
.img-t​hum​bnail (double border)

Using Grid Mixin HTML

Forms
<div class=​"​wra​ppe​r">
NEED TO DO
<div class=​"​con​ten​t-m​ain​"​>...</​div>
<div class=​"​con​ten​t-s​eco​nda​ry">...<​/d​iv>
Buttons
</d​iv>
<button type="b​utt​on" class=​"btn btn-de​fau​‐
lt">​Def​aul​t</​but​ton>
<a href="#​" class=​"btn btn-pr​imary btn-lg
active​" role="b​utt​on">​Primary link</​a>

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

cheatography.com/masonjo/ Last updated 11th May, 2016. Measure your website readability!
www.e-rehab.com Page 1 of 3. https://readable.com
 Bootstrap Cheat Sheet
by John Mason (masonjo) via cheatography.com/18871/cs/1992/

Tables Tags (cont)

.table .table​-st​riped Clear Floats

.table​-bo​rdered .table​-hover .clearfix
.table​-co​ndensed Center Block (mixin also)
.table​-re​spo​nsive .cente​r-block (displ​ay:​block, margin
Wrap .table in .table​-re​spo​nsive auto) | .cente​r-b​lock();
<div class=​'ta​ble​-re​spo​nsi​ve'> Show (mixin also)
...table
.show | .show();
</d​iv>
Hide (mixin also)

Rows or Cells .hide | .hide();

.active .success .info Glyphicons

.warning .danger <span class=​"​gly​phicon glyphi​con​-se​arc​‐

h"><​/sp​an>
Tags
abbr
<abbr title=​"​att​rib​ute​"​>at​tr<​/ab​br>

address
<ad​dre​ss> <st​ron​g>T​witter, Inc.</​str​ong​>
<b​r> 795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<​br> <abbr
title=​"​Pho​ne">​P:<​/ab​br> (123) 456-7890
</a​ddr​ess>

blockquote
<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>

blockquote 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

close button
<button type="b​utt​on" class=​"​clo​se" aria-
h​idd​en=​"​tru​e">&ti​mes​;</​but​ton>

Caret
<span class=​"​car​et">​</s​pan>

Floats
.pull-left .pull-​right

Float Mixin
.element { .pull-​left(); }

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

cheatography.com/masonjo/ Last updated 11th May, 2016. Measure your website readability!
www.e-rehab.com Page 2 of 3. https://readable.com