Skip to Content
Questions or Comments: info@tceq.texas.gov

Bootstrap Style Guide

Page depicting bootstrap uses.

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

.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


.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

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

.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
Header Header Header
Data Data Data
Data Data Data

.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