Show Menu

Bootstrap Cheat Sheet by masonjo

Bootstrap 3

Rows - Grid System

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

Columns

.col-xs-AlwaysFull
.col-sm->768750 wide
.col-md->992970 wide
.col-lg->12001170 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

Descriptions

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

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.