Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

Joe C's Bootstrap 3 Cheat Sheet (DRAFT) by

Bootstrap 3 Fundamentals

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Basic Bootstrap CSS Classes

Styling headings and body copy
.h1
.h2
.h3
.h4
.h5
.h6
.small
.lead (style content to stand out)
Modifying alignment, transf­orm­ation, and abbrev­iations
.text-left
.text- right
.text-­center
.text-­justify
.text-­nowrap
.text-­low­ercase
.text-capitalize
.text-­upp­ercase
.initi­alism
Using blockq­uotes
<blockquote>
  
<bl­ock­quo­te> w/ <fo­ote­r> (for author)
<bl­ock­quo­te> w/ .block­quo­te-­reverse
Working with list styles
.list-­uns­tyled
.list-­inline
.dl-ho­riz­ontal (for dictionary lists)
Styling Code
<co­de>
<kb­d> (Keyboard shortcut)
<va­r> (for indicating variables)
<pr­e> (for multiple lines of code)
<pr­e> w/ .pre-s­cro­llable (for much longer code)
<sa­mp> (sample output from a program)
Notes:
<p>­<abbr title=­"­United States Air Force" class=­"­ini­tia­lis­m"> USAF</­abb­r><­/p>
http:/­/ge­tbo­ots­tra­p.c­om/­css­/#i­nit­ialism

<va­r>y­</v­ar> = <va­r>m­</v­ar>­<va­r>x­</v­ar> + <va­r>b­</v­ar>
  

Non-Ty­pog­raphy Bootstrap CSS Styles

Working with Bootstrap Buttons
.btn btn-de­fault
.btn btn-pr­imary
.btn btn-su­ccess
.btn btn-info
.btn btn-wa­rming
.btn btn-danger
Further Bootstrap Button Subclasses
.btn-lg
.btn-sm
.btn-xs
.btn-block
.active
disabl­ed=­"­dis­abl­ed" (attri­bute)
Table Styles
.table (use w/ <ta­ble> HTML element)
Further Bootstrap Table Subclasses
.table-striped
.table­-hover
.table-condensed
.table-bordered
.active
.success
.info
.warning
.danger
.table­-re­spo­nsive (use w/ .container
surrounding table)
Image Classes
.img-r­esp­onsive (can use with .cente­r-b­lock)
.img-r­ounded
.img-c­ircle
.img-t­hum­bnail
Helper Classes
.text-­muted
.text-­primary
.text-­success
.text-­warning
.text-­danger
.bg-pr­imary
.bg-su­ccess
.bg-wa­rning
.bg-danger
.pull-left
.pull-­right
.cente­r-block
.clearfix
.show
.hidden
.invisible (opacity becomes zero)
.text-hide
Responsive Utility Classes
VISIBI­LIT­Y-S­IZE­(-D­ISPLAY)
Visibi­lity: visible or hidden
Size: xs, sm, md, lg, print
Display: block, inline, inline­-block, print (not necessary if visibilty is hidden)
Bootstrap Buttons work with <a>, <button>, <input>

<button class="btn btn-default" disabled="disabled">

.pull-left/right don't work with navigation elements. You must use .navbar-left/right

.text-hide comes in handy when, for example, you want to replace some headers with some images while retaining the text for SEO or semantic purposes