bootstrap cheat sheet (very dense

bscs.txt

This Document
Assumes you have a basic knowledge of emmet-style coding, it was used to abbreviate much of this. Any time you see a pipe(|), it is indicating you can select one of a group of elemnts. Any time you see a ? preceding something, it means it is optional.

CS=(success|info|warning|danger)
CL=(primary|default|CS)
SZ=(lg|sm|xs)

All information retrieved from:
http://getbootstrap.com/

Resources:

http://bootswatch.com
http://bootsnipp.com
http://bootstrapzero.com
http://bootstraptaste.com
http://bootstrapstage.com
http://startbootstrap.com

Errata:
Please email me at [email protected] if you find any errors and I will adjust accordingly.

CSS
div.container(fixed)
div.container-fluid(fluid)
.row
.col-SZ-#
.col-SZ-offset-#
<small> or .small
p.lead (standout)
.text-(left|center|right|justify)
<abbr title=”attribute”>
.initialism(smaller font)
<address>
<blockquote>
  <footer><cite title=””>
.blockquote-reverse (right align)
ul.list-unstyled
ul.list-inline
dl.dl-horizontal
<code>|<kbd>|<pre>
Tables
table.table
table.table-striped
table.table-bordered
table.table-hover
table.table-condensed
tr/td.(CS|active)
table.table-responsive
Forms
<form role=”form”>
div.form-group
div.input-group
input.form-control
label.control-label
form.form-inline
form.form-horizontal
(Controls):text|password|datetime|datetime-local|date|month|time|week|number|email|url|search|tel|color
.checkbox-inline
.radio-inline
<select multiple>
.form-control-static (readonly)
<input disabled>
.has-warning|error|success
.help-block
div.glyphicon.glypphicon-ok.form-control-feedback
.input-SZ




Buttons (a, button, input)
.btn-(CL|link|block)
.btn-SZ
.active
<button disabled>
Images
img.img-responsive
img.img-(rounded|circle|thumbnail)
Helpers
p.text-(muted|CL)
p.bg-(CL)
<button type=”button” class=”close” aria-hidden=”true”>&times;</button>
span.caret
.pull-(left|right)
.center-block
.clearfix
.show
.hidden
.invisible
.(visible|hidden)-(SZ)
.(visible|hidden)-print
Components
Dropdowns
div.dropdown
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"><span class="caret">
ul.dropdown-menu aria-labelledby=”dropdownMenu1”>
ul.dropdown-menu-right
li.dropdown-header
li.divider
li.disabled
Button Groups
div.btn-group
div.btn-toolbar>5*div.btn-group
div.btn-group-(lg|sm|xs)
div.btn-group-vertical
div.btn-group.btn-group-justified
button.btn.btn-default.dropdown-toggle[data-toggle="dropdown"]>span.caret
div.btn-group.dropup

Input Groups
span.input-group-addon
div.input-group-SZ
span.input-group-addon>input:checkbox
div.input-group-btn>
button.dropdown-toggle
Nav, Breadcrumb, Pagination
ul.nav.nav-tabs
ul.nav.nav-pills
ul.nav.nav-pills.nav-stacked
ul.nav.nav-justified
a.dropdown-toggle[data-toggle=dropdown]
.navbar-form
.navbar-btn (vertical center)
.navbar-text
.navbar-link
.navbar-(left|right)
.navbar-fixed-bottom
.navbar-static-top
.navbar-inverse
ol.breadcrub>li.active
ul.pagination(?-(lg|sm))
ul.pager
ul.pager>li.prevous+li.next
Labels & Badges
span.label.label-(default|primary|success|info|warning|danger)
span.badge
Jumbotron, Page Header, Thumbnails
div.jumbotron
div.jumbotron>div.container
div.page-header>h1
a.thumbnail>img[data-src=”file/100%x100”
a.thumbnail>div.caption
Alerts & Progress Bars
div.alert.alert-(CS)
div.alert-dismissable>button.close
a.alert-link
div.progress.?progress-striped.?active.?progress-bar-(CS)><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
stack multiple bars in a .progress
List Groups and Panels
ul.list-group>li.list-group-item
div.list-group>a.list-group-item
li|a.list-group-item.list-group-item-(CS)|active
list group supports arbitrary html
div.panel.panel-default>div.panel-heading>h1.panel-title^div.panel-body
div.panel-footer
div.panel.panel-(CS)
div.well.?well-(lg|sm)
BS JS supports a bunch of other stuff too long for this sheet:
Transitions, Modals, Dropdowns, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel, Affix

glyphicon-asterisk
glyphicon-plus
glyphicon-euro
glyphicon-minus
glyphicon-cloud
glyphicon-envelope
glyphicon-pencil
glyphicon-glass
glyphicon-music
glyphicon-search
glyphicon-heart
glyphicon-star
glyphicon-star-empty
glyphicon-user
glyphicon-film
glyphicon-th-large
glyphicon-th
glyphicon-th-list
glyphicon-ok
glyphicon-remove
glyphicon-zoom-in
glyphicon-zoom-out
glyphicon-off
glyphicon-signal
glyphicon-cog
glyphicon-trash
glyphicon-home
glyphicon-file
glyphicon-time
glyphicon-road
glyphicon-download-alt
glyphicon-download
glyphicon-upload
glyphicon-inbox
glyphicon-play-circle
glyphicon-repeat
glyphicon-refresh
glyphicon-list-alt
glyphicon-lock
glyphicon-flag
glyphicon-headphones
glyphicon-volume-off
glyphicon-volume-down
glyphicon-volume-up
glyphicon-qrcode
glyphicon-barcode
glyphicon-tag
glyphicon-tags
glyphicon-book
glyphicon-bookmark
glyphicon-print
glyphicon-camera
glyphicon-font
glyphicon-bold
glyphicon-italic
glyphicon-text-height
glyphicon-text-width
glyphicon-align-left
glyphicon-align-center
glyphicon-align-right
glyphicon-align-justify
glyphicon-list
glyphicon-indent-left
glyphicon-indent-right
glyphicon-facetime-video
glyphicon-picture
glyphicon-map-marker
glyphicon-adjust
glyphicon-tint
glyphicon-edit
glyphicon-share
glyphicon-check
glyphicon-move
glyphicon-step-backward
glyphicon-fast-backward
glyphicon-backward
glyphicon-play
glyphicon-pause
glyphicon-stop
glyphicon-forward
glyphicon-fast-forward
glyphicon-step-forward
glyphicon-eject
glyphicon-chevron-left
glyphicon-chevron-right
glyphicon-plus-sign
glyphicon-minus-sign
glyphicon-remove-sign
glyphicon-ok-sign
glyphicon-question-sign
glyphicon-info-sign
glyphicon-screenshot
glyphicon-remove-circle
glyphicon-ok-circle
glyphicon-ban-circle
glyphicon-arrow-left
glyphicon-arrow-right
glyphicon-arrow-up
glyphicon-arrow-down
glyphicon-share-alt
glyphicon-resize-full
glyphicon-resize-small
glyphicon-exclamation-sign
glyphicon-gift
glyphicon-leaf
glyphicon-fire
glyphicon-eye-open
glyphicon-eye-close
glyphicon-warning-sign
glyphicon-plane
glyphicon-calendar
glyphicon-random
glyphicon-comment
glyphicon-magnet
glyphicon-chevron-up
glyphicon-chevron-down
glyphicon-retweet
glyphicon-shopping-cart
glyphicon-folder-close
glyphicon-folder-open
glyphicon-resize-vertical
glyphicon-resize-horizontal
glyphicon-hdd
glyphicon-bullhorn
glyphicon-bell
glyphicon-certificate
glyphicon-thumbs-up
glyphicon-thumbs-down
glyphicon-hand-right
glyphicon-hand-left
glyphicon-hand-up
glyphicon-hand-down
glyphicon-circle-arrow-right
glyphicon-circle-arrow-left
glyphicon-circle-arrow-up
glyphicon-circle-arrow-down
glyphicon-globe
glyphicon-wrench
glyphicon-tasks
glyphicon-filter
glyphicon-briefcase
glyphicon-fullscreen
glyphicon-dashboard
glyphicon-paperclip
glyphicon-heart-empty
glyphicon-link
glyphicon-phone
glyphicon-pushpin
glyphicon-usd
glyphicon-gbp
glyphicon-sort
glyphicon-sort-by-alphabet
glyphicon-sort-by-alphabet-alt
glyphicon-sort-by-order
glyphicon-sort-by-order-alt
glyphicon-sort-by-attributes
glyphicon-sort-by-attributes-alt
glyphicon-unchecked
glyphicon-expand
glyphicon-collapse-down
glyphicon-collapse-up
glyphicon-log-in
glyphicon-flash
glyphicon-log-out
glyphicon-new-window
glyphicon-record
glyphicon-save
glyphicon-open
glyphicon-saved
glyphicon-import
glyphicon-export
glyphicon-send
glyphicon-floppy-disk
glyphicon-floppy-saved
glyphicon-floppy-remove
glyphicon-floppy-save
glyphicon-floppy-open
glyphicon-credit-card
glyphicon-transfer
glyphicon-cutlery
glyphicon-header
glyphicon-compressed
glyphicon-earphone
glyphicon-phone-alt
glyphicon-tower
glyphicon-stats
glyphicon-sd-video
glyphicon-hd-video
glyphicon-subtitles
glyphicon-sound-stereo
glyphicon-sound-dolby
glyphicon-sound-5-1
glyphicon-sound-6-1
glyphicon-sound-7-1
glyphicon-copyright-mark
glyphicon-registration-mark
glyphicon-cloud-download
glyphicon-cloud-upload
glyphicon-tree-conifer
glyphicon-tree-deciduous