>> Questions or Comments: ac@tceq.texas.gov
You are here:

Bootstrap Style Guide

CSS Typography - Headings

h1

h2

h3

h4

h5
h6

CSS Typography - Paragraph/Text

.lead
b (bold)
strong
small
.small
em
i (italic)
del
s (strikethrough)
ins
u (underline)
code
var
samp
mark
kbd

.text-left

.text-center

.text-right

.text-justify

.text-lowercase .text-uppercase .text-capitalize

abbr .initialism

address strong
address
first.last@example.com

blockquote p

footer cite

blockquote.blockquote-reverse p

Someone famous in Source Title

Lists

ul

  • li
  • List item
    • ul li
    • List item
  • List item

ol

  1. List item
  2. List item
    1. List item
    2. List item
  3. 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 thHeaderHeader
tbody tr td tdDataData
DataDataDataData

.table-striped

HeaderHeader
DataData
DataData

.table-bordered

HeaderHeader
DataData
DataData

.table-hover

HeaderHeader
DataData
DataData

.table-condensed

HeaderHeader
DataData
DataData

div.table-responsive table.table

Header HeaderHeaderHeaderHeader
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

.help-block: Wrap labels and controls in .form-group for optimum spacing.

form.form-inline


form.form-horizontal



select.form-control[multiple]

p.form-control-static

Validation styles on form controls

Buttons

a

a.active a.disabled

Images

.img-rounded

.img-rounded

.img-circle

.img-circle

.img-thumbnail

.img-thumbnail

.img-responsive

.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
  • print

  • 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

.dropdown ul.dropdown-menu

Button groups

.btn-group


.btn-toolbar .btn-group


 

.btn-group.btn-group-justified

#1 #2 #3

.btn-group.dropup

Input groups

.input-group

.input-group-addon

.input-group-lg

$ .00

.input-group-sm

Addon Addon

Pagination

Thumbnails

.thumbnail

thumbnail

.caption h3

Paragraph

Button

.thumbnail

thumbnail

Caption

Paragraph

Button

.thumbnail

thumbnail

Caption

Paragraph

Button

.thumbnail

thumbnail

Caption

Paragraph

Button

Alerts

.alert.alert-dismissible
.alert.alert-success a.alert-link
.alert.alert-info a.alert-link
.alert.alert-warning a.alert-link
.alert.alert-danger a.alert-link

List Groups

ul.list-group

  • li.list-group-item
  • List item #2 .badge
  • List item #3

Panels

.panel.panel-default

.panel-heading

.panel-heading h3.panel-title

.panel-body

.panel.panel-primary

.panel-heading
.panel-body

.panel.panel-success

.panel-heading
.panel-body

.panel.panel-info

.panel-heading
.panel-body

.panel.panel-warning (with table)

.panel-heading
HeaderHeaderHeader
DataDataData
DataDataData

.panel.panel-danger (with list group)

.panel-heading
  • List item
  • List item
  • List item

Wells

.well.well-lg
.well
.well.well-sm

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()

You must initialize them yourself

Popovers

Usage: $('[data-toggle="popover"]').popover()

Popover

You must initialize them yourself

Alerts

Via data attributes (close button): data-dismiss="alert"

.alert.alert-danger.fade.in

Accordions

.carousel.slide