Show Menu

Bootstrap Cheat Sheet by masonjo

Bootstrap 3

Rows - Grid System

Rows are in .container or .conta­ine­r-fluid

Columns

.col-xs-
Always
Full
.col-sm-
>768
750 wide
.col-md-
>992
970 wide
.col-lg-
>1200
1170 wide

Resets, Offsets, Pushes, Pulls

.clearfix
.col-x­s-o­ffset- (sm, md, lg)
Nest using a .row inside a col
.col-x­s-push- (sm, md, lg)
.col-x­s-pull- (sm, md, lg)
.visib­le-xs (sm, md, lg)
.hidden-xs (sm, md, lg)
.visib­le-­print
.hidde­n-print

Grid Variables

@grid-­col­umns:
12
@grid-­gut­ter­-width:
30px
@grid-­flo­at-­bre­akp­oint:
768px

Using Grid Mixin CSS

.wrapper {.make­-ro­w();}
.conte­nt-main {.make­-lg­-co­lum­n(8);}
.conte­nt-­sec­ondary {
.make-­lg-­col­umn(3);
.make-­lg-­col­umn­-of­fse­t(1);
}

Using Grid Mixin HTML

<div class=­"­wra­ppe­r">
<div class=­"­con­ten­t-m­ain­"­>...</­div>
<div class=­"­con­ten­t-s­eco­nda­ry">...<­/d­iv>
</d­iv>
 

Typography

.h1
.h2
.h3
.h4
.h5
.h6
.small
<sm­all>
.lead
@font-­siz­e-base | @line-­hei­ght­-base

Align

.text-left
.text-­right
.text-­center
.text-­justify

Text Helpers

.text-­muted
.text-­primary
.text-­success
.text-info
.text-­warning
.text-­danger
.bg-pr­imary
.bg-su­ccess
.bg-info
.bg-wa­rning
.bg-danger
.tex­t-h­ide
.sr-­only

Lists

.list-­uns­tyled
.list-­inline

Descri­ptions

<dl> <dt­>...</­dt> <dd­>...</­dd> </d­l>
.dl-ho­riz­ontal

Images

.img-r­esp­onsive (max-w­idt­h:100%, height­:auto)
.img-r­ounded
.img-c­ircle
.img-t­hum­bnail (double border)

Forms

NEED TO DO
 

Buttons

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

Button Classes

.btn-d­efault
.btn-p­rimary
.btn-s­uccess
.btn-info
.btn-w­arning
.btn-d­anger
.btn-link (to look like a link)
.btn-lg
.btn-sm
.btn-xs
.btn-block
.active (A tag)
.disabled (A tag)
disabl­ed=­"­dis­abl­ed"

Labels

.label
.label­-de­fault
primary, success, info, warning, danger
<span class=­"­label label-­def­aul­t">N­ew<­/sp­an>

Badge

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

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>

Tables

.table
.table­-st­riped
.table­-bo­rdered
.table­-hover
.table­-co­ndensed
.table­-re­spo­nsive
Wrap .table in .table­-re­spo­nsive
<div class=­'ta­ble­-re­spo­nsi­ve'>
...table
</d­iv>

Rows or Cells

.active
.success
.info
.warning
.danger

Tags

abbr
<abbr title=­"­att­rib­ute­"­>at­tr<­/ab­br>
addr­ess
<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>
bloc­kqu­ote
<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
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(); }
Clear Floats
.clearfix
Center Block (mixin also)
.cente­r-block (displ­ay:­block, margin auto) | .cente­r-b­lock();
Show (mixin also)
.show | .show();
Hide (mixin also)
.hide | .hide();
Glyp­hic­ons
<span class=­"­gly­phicon glyphi­con­-se­arc­h"><­/sp­an>
 

Share This Cheat Sheet!

Favourited by 5 Members:

chrysa SkyeBella DeeJRoth xtiam57 BobGuzek

Comments

DaveChild DaveChild, 18:51 29 Apr 14

Great cheat sheet! I've been working with Bootstrap a bit recently and this is going to be really handy.

mrjasonetaylor mrjasonetaylor, 14:01 30 Apr 14

Came to find this, was happy to see it on the homepage!

OH YEA OH YEA, 09:25 21 Jul 14

Love this

hamburg hamburg, 22:36 28 Jul 14

Update.. http://www.cheatography.com/hamburg/cheat-sheets/optional-and-official-bootstrap-classes-v3-2x/

kuyseng kuyseng, 13:47 29 Nov 14

it's awesome.. :)

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.