Bootstrap Style Guide
Page depicting bootstrap uses.
CSS Typography - Headings
h1
h2
h3
h4
h5
h6
CSS Typography - Paragraph/Text
b (bold)
strong
.small
i (italic)
ins
u (underline)
code
var
samp
kbd
.text-left
.text-center
.text-right
blockquote p
blockquote.blockquote-reverse p
Lists
ul
- li
- List item
- ul li
- List item
- List item
ol
- List item
- List item
- List item
- List item
- List item
ul.list-unstyled
- List item
- List item
- List item
- List item
- List item
ul.list-inline
- List item
- List item
- List item
dl
- dt
- dd
- Term
- Description
Description
dl.dl-horizontal
- Term
- Description
- Long term will be truncated
- Description
Description
Tables
table.table
thead tr th | th | Header | Header |
---|---|---|---|
tbody tr td | td | Data | Data |
Data | Data | Data | Data |
.table-striped
Header | Header |
---|---|
Data | Data |
Data | Data |
.table-bordered
Header | Header |
---|---|
Data | Data |
Data | Data |
.table-hover
Header | Header |
---|---|
Data | Data |
Data | Data |
.table-condensed
Header | Header |
---|---|
Data | Data |
Data | Data |
div.table-responsive table.table
Header | Header | Header | Header | Header |
---|---|---|---|---|
td.active | td.success | td.info | td.warning | td.danger |
tr.active td | Applies the hover color to a particular row or cell | |||
tr.success td | Indicates a successful or positive action | |||
tr.info td | Indicates a neutral informative change or action | |||
tr.warning td | Indicates a warning that might need attention | |||
tr.danger td | Indicates a dangerous or potentially negative action |
Forms
form
form.form-inline
form.form-horizontal
Validation styles on form controls
Buttons
Images
.img-rounded
.img-circle
.img-thumbnail
.img-responsive
Helper classes
.text-muted .text-primary .text-success .text-info .text-warning .text-danger
.bg-success .bg-info .bg-warning .bg-danger
button.close →
.caret
.sr-only
: Hide an element to all devices except screen readers.
Components
Glyphicons
Glyphicons
classes: glyphicon glyphicon-*
- asterisk
- plus
- minus
- ok
- remove
- remove-circle
- ok-circle
- ban-circle
- copyright-mark
- registration-mark
- chevron-left
- chevron-right
- chevron-up
- chevron-down
- arrow-left
- arrow-right
- arrow-up
- arrow-down
- hand-left
- hand-right
- hand-up
- hand-down
- thumbs-up
- thumbs-down
- circle-arrow-left
- circle-arrow-right
- circle-arrow-up
- circle-arrow-down
- signal
- envelope
- inbox
- cloud
- cloud-download
- cloud-upload
- download-alt
- download
- upload
- transfer
- share-alt
- send
- retweet
- open
- save
- saved
- import
- export
- play
- pause
- stop
- eject
- fast-backward
- step-backward
- backward
- forward
- step-forward
- fast-forward
- zoom-in
- zoom-out
- fullscreen
- resize-full
- resize-small
- resize-vertical
- resize-horizontal
- eye-open
- eye-close
- check
- unchecked
- expand
- collapse-down
- collapse-up
- log-in
- log-out
- new-window
- edit
- share
- font
- bold
- italic
- header
- text-height
- text-width
- align-left
- align-center
- align-right
- align-justify
- indent-left
- indent-right
- list
- list-alt
- th-list
- th-large
- th
- filter
- sort
- sort-by-alphabet
- sort-by-alphabet-alt
- sort-by-order
- sort-by-order-alt
- sort-by-attributes
- sort-by-attributes-alt
- floppy-disk
- floppy-saved
- floppy-remove
- floppy-save
- floppy-open
- home
- dashboard
- tasks
- stats
- link
- comment
- calendar
- time
- user
- certificate
- qrcode
- barcode
- globe
- tower
- road
- tree-conifer
- tree-deciduous
- leaf
- heart
- heart-empty
- star
- star-empty
- flash
- fire
- search
- flag
- pencil
- wrench
- cog
- cutlery
- plane
- trash
- shopping-cart
- briefcase
- gift
- glass
- phone-alt
- earphone
- phone
- bullhorn
- bell
- hdd
- folder-close
- folder-open
- file
- tags
- tag
- book
- bookmark
- lock
- compressed
- magnet
- paperclip
- pushpin
- plus-sign
- minus-sign
- remove-sign
- ok-sign
- question-sign
- info-sign
- exclamation-sign
- warning-sign
- picture
- map-marker
- adjust
- tint
- move
- screenshot
- film
- camera
- facetime-video
- sd-video
- hd-video
- subtitles
- music
- headphones
- volume-off
- volume-down
- volume-up
- play-circle
- repeat
- record
- off
- random
- refresh
- sound-stereo
- sound-dolby
- sound-5-1
- sound-6-1
- sound-7-1
- credit-card
- euro
- usd
- gbp
Dropdowns
.dropdown ul.dropdown-menu
Button groups
.btn-group
.btn-toolbar .btn-group
.btn-group.dropup
Input groups
.input-group
.input-group-lg
.input-group-sm
Pagination
Thumbnails
.thumbnail
.thumbnail
.thumbnail
.thumbnail
Alerts
List Groups
ul.list-group
- li.list-group-item
- List item #2 .badge
- List item #3
div.list-group
List Group Example [div.list-group]
h4.list-group-item-heading
p.list-group-item-text
List group item heading
Paragraph
Panels
.panel.panel-default
.panel-heading h3.panel-title
.panel.panel-primary
.panel.panel-success
.panel.panel-info
.panel.panel-warning (with table)
Header | Header | Header |
---|---|---|
Data | Data | Data |
Data | Data | Data |
.panel.panel-danger (with list group)
- List item
- List item
- List item
Wells
Javascript
Tabs
Via data attributes: data-toggle="tab"
Content #1: .table-content .tab-pane.active
Content #2: .table-content .tab-pane
Content #1: .table-content .tab-pane.fade.in.active
Content #2: .table-content .tab-pane.fade
Tooltips
Usage: $('[data-toggle="tooltip"]').tooltip()
Popovers
Usage: $('[data-toggle="popover"]').popover()
Popover
You must initialize them yourself
Alerts
Via data attributes (close button): data-dismiss="alert"
Accordions
#accordion.panel-group
Carousel
.carousel.slide