Skip to main content

The Bootstrap Framework

We use a framework called Bootstrap. The framework allows pages to be responsive and adjust to the size of the screen on which they are viewed.

The following display shows how Bootstrap's native elements are displayed with our style sheet.

 

 

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