Show Menu
Cheatography
  1. Home >
  2. Programming >

Bootstrap Cheat Sheet by

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>
                   
 

Metadata

  • Languages:
  • Published: 29th April, 2014
  • Last Updated: 11th May, 2016
  • Rated: 5 stars based on 50 ratings

Favourited By

sebastian_t Juan manuel totalynobody macieljr kaankadirkilic Yodav mohanen danilovryu eGoddess TheLazyHatGuy Andrey99
and 59 more ...

Comments

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

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

Love this

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

it's awesome.. :)

thanks that is really good

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

this is a nice notes for all thanks sirji

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.

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/

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!

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/

Why can't I download the pdf file through the "Download this Cheat Sheet (PDF)" link? Thanks.

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Web Programming Exam Cheat Sheet
            Bootstrap Glyphicons Cheat Sheet by James Croft