Skip to main content

Typography

h1 small

.h2 small

h3 small

.h4 small
h5 small
.h6 small
.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

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-primary .bg-success .bg-info .bg-warning .bg-danger

button.close →

.caret

.clearfix

.pull-left
.pull-right

.center-block: Set an element to display: block and center via margin.

.show and .hidden: Showing and hiding content.
.invisible: Toggle only the visibility of an element.

.sr-only: Hide an element to all devices except screen readers.

.text-hide: Replace an element's text content with a background image.

Components

Glyphicons

Glyphicons classes: glyphicon glyphicon-*

.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

Addon Addon

.input-group-sm

Addon Addon

ul.nav.nav-tabs.nav-justified


ul.nav.nav-pills.nav-justified

.navbar.navbar-default .container-fluid

.navbar.navbar-inverse .container-fluid

Complex navbar with navbar-left, navbar-right and navbar-collapse.

ol.breadcrumb

Pagination

ul.pagination.pagination-lg
ul.pagination.pagination-sm

Labels

.label.label-default .label.label-primary .label.label-success .label.label-info .label.label-warning .label.label-danger

Jumbotron

.jumbotron

Heading

Paragraph

Button

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

Progress bars

.progress

.progress-bar
.progress-bar.progress-bar-success
.progress-bar.progress-bar-info
.progress-bar.progress-bar-warning
.progress-bar.progress-bar-danger

.progress .progress-bar.progress-bar-striped

.progress.active .progress-bar.progress-bar-striped

Media object

.media
.media-object

.media-body h4.media-heading

← a.media-left img.media-object

.media
.media-object

.media-body h4.media-heading

← a.media-left.media-middle img.media-object
.media-object

.media .media-body h4.media-heading

← a.media-left img.media-object

ul.media-list
  • .media-object

    li.media .media-body h4.media-heading

    ← a.media-left.media-bottom img.media-object
    .media-object

    .media .media-body h4.media-heading

    ← a.media-left img.media-object
  • li.media .media-body h4.media-heading

    a.media-right img.media-object →
    .media-object

List group

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

Modals

Via data attributes: data-toggle="modal" data-target="#modal" Launch modal

Via Javascript: $('#modal').modal() Launch modal

Large modal Small modal

Options: backdrop: true|false|'static' keyboard: true|false show: true|false remote: false|path

Methods: .modal('toggle') .modal('show') .modal('hide')

Events: show.bs.modal shown.bs.modal hide.bs.modal hidden.bs.modal loaded.bs.modal

Dropdowns

Via data attributes: data-toggle="dropdown"


Via Javascript: $('.dropdown-toggle').dropdown()(data-toggle="dropdown" still required)

Methods: .dropdown('toggle')

Events: show.bs.dropdown shown.bs.dropdown hide.bs.dropdown hidden.bs.dropdown

Tabs

Via data attributes: data-toggle="tab"

Content #1: .table-content .tab-pane.active

Content #2: .table-content .tab-pane

Via Javascript: $(this).tab('show')

Content #1: .table-content .tab-pane.fade.in.active

Content #2: .table-content .tab-pane.fade

Events: show.bs.tab shown.bs.tab

Tooltips

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

You must initialize them yourself

Options: animation: true|false html: false|true selector: false|string
title: ''|function container: false|string
placement: top|location|auto|function
trigger: hover focus|click|manual
delay: 0|{show:500, hide:100}

Methods: .tooltip('show') .tooltip('hide') .tooltip('toggle') .tooltip('destroy')

Events: show.bs.tooltip shown.bs.tooltip hide.bs.tooltip hidden.bs.tooltip

Popovers

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

Popover

You must initialize them yourself


Options: animation: true|false html: false|true selector: false|string
title: ''|function content: ''|function container: false|string
placement: right|location|auto|function
trigger: click|hover|focus|manual
delay: 0|{show:500, hide:100}

Methods: .popover('show') .popover('hide') .popover('toggle') .popover('destroy')

Events: show.bs.popover shown.bs.popover hide.bs.popover hidden.bs.popover

Alerts

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

.alert.alert-danger.fade.in

Via Javascript: $('.alert').alert()

Methods: .alert('close')

Events: close.bs.alert closed.bs.alert

Buttons

Stateful button: data-loading-text="Loading..." data-complete-text="Completed"


Single toggle:

Checkbox: data-toggle="buttons"

Radio: data-toggle="buttons"

Methods: .button('toggle') .button('loading') .button('reset') .button(string)

Collapse

Via data attributes: data-toggle="collapse"

Via Javascript: $(".collapse").collapse()

Options: parent: false|selector toggle: true|false

Methods: .collapse('toggle') .collapse('show') .collapse('hide')

Events: show.bs.collapse shown.bs.collapse hide.bs.collapse hidden.bs.collapse

Via data attributes: data-target="#carousel" data-slide data-slide-to data-ride

Via Javascript: $('.carousel').carousel()

.carousel.slide


Options: interval: 5000 pause: hover wrap: true|false

Methods: .carousel('cycle') .carousel('pause') .carousel(number) .carousel('prev') .carousel('next')

Events: slide.bs.carousel slid.bs.carousel

IDAHO STATE UNIVERSITY

921 South 8th Avenue
Pocatello, Idaho, 83209

Discover opportunity at Idaho State University