Show Menu

Bootstrap Cheat Sheet by

Bootstrap 3
development     css     html     web     design     bootstrap

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>

Download the Bootstrap Cheat Sheet

3 Pages
//media.cheatography.com/storage/thumb/masonjo_bootstrap.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors!

Readability-Score.com is a collection of tools to make your writing better. More readabile content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!

 

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

, 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.. :)

sergio sergio, 07:39 6 Feb 15

thanks that is really good

Nick Nick, 14:13 27 Feb 15

Yo, copy and pasting your classes gives double -- in the class names? Any idea why this might be?

Narendra Gour Narendra Gour, 09:58 4 Aug 15

this is a nice notes for all thanks sirji

Zeeshan Raza Zeeshan Raza, 10:20 2 Oct 15

I have given a interview, in it a interviewer ask me, how can i give top-margin of 5px in bootstrap, tell me the class name, I told him, we can give by adding custom class. Because as i study and worked. I didn't see a class like that,

has bootstrap as top-margin or margin class? by default.

Jacob Jacob, 13:28 24 Feb 16

Here is a cheat sheet I put together that has a sortable index of all of the classes with descriptions. https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/

mwmoriarty mwmoriarty, 19:39 6 Aug 16

It is one of my goals to learn/ master Bootstrap. For me it is easier to dissect it into its component parts. The bootstrap.css is huge and involves normalize.css, glyphicons.css, and probably other components as well. Having a cheat sheet that breaks it down is very helpful. Thank you!

Jacob Jacob, 16:09 16 Sep 16

Here is a Bootstrap CSS classes desk reference pdf and a sortable table with descriptions to help sort through the list. You can find it here. https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

            HTML 5 Cheat Sheet by Smashing Magazine
          Web Programming Exam Cheat Sheet
            Bootstrap Glyphicons Cheat Sheet by James Croft