CSS
Typography
h1 small
h3 small
h5 small
.serif
b (bold)
strong
.small
i (italic)
ins
u (underline)
codevar
samp
kbd
.text-left
.text-center
.text-right
blockquote p
blockquote.blockquote-reverse p
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
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed vulputate velit. Nulla eget elit a arcu cursus tincidunt. Integer consectetur, libero et malesuada eleifend, elit arcu dignissim odio, non mollis mauris orci sit amet nisi. Aliquam neque nisi, scelerisque vitae imperdiet eu, eleifend in turpis. Etiam ultricies tristique mi, quis feugiat purus viverra sit amet. Sed eget blandit nibh, rhoncus pellentesque ipsum. Mauris ut odio nisl.
In odio enim, pulvinar in consectetur ac, egestas eu leo. Suspendisse facilisis gravida magna vitae viverra. Ut felis nibh, facilisis at condimentum ut, congue et dolor. Mauris elementum, purus at consectetur viverra, orci metus ultricies leo, eget pharetra risus enim non neque. Phasellus urna nulla, cursus vitae accumsan id, imperdiet in mauris. Sed vitae nisi dui. Aenean euismod luctus porttitor. Maecenas magna odio, placerat nec posuere at, tempor non nisi.
Cras sed dictum magna, a mollis elit. Suspendisse a fringilla diam. Cras sollicitudin eros nibh, nec volutpat nunc vestibulum vel. Proin vitae suscipit nulla. Nullam facilisis dapibus odio, facilisis ullamcorper ipsum consectetur eu. Fusce sit amet suscipit orci, porttitor aliquam mauris. In hac habitasse platea dictumst.
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 .text-violet
.text-gray-dark .text-primary-dark .text-success-dark .text-info-dark .text-warning-dark .text-danger-dark .text-violet-dark
.text-gray-light .text-primary-light .text-success-light .text-info-light .text-warning-light .text-danger-light .text-violet-light
.bg-primary .bg-success .bg-info .bg-warning .bg-danger .bg-violet
.border .border.border-primary .border.border-info .border.border-success .border.border-warning .border.border-danger
button.close →
.caret
.clearfix
.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
Loading icon
div class="loading-icon-rotation" add .loading-icon-center to center it on the page.
Pings and Areas
Use .ping to indicate general location on a map. Use varients to change color .ping-default .ping-primary .ping-success .ping-info .ping-warning .ping-success. Optionally use .breath to make the center glow.
Create Areas with .area and .area-default .area-primary .area-success .area-info .area-warning .area-success
Notches
New .notch class, use with .notch-bottom, .notch-primary, and etc.
.rsvp.notch.notch-bottom
.bg-primary.notch.notch-primary.notch-top
.vpadding-80.bg-success.notch.notch-success.notch-right
.vpadding-100.bg-gray-dark.notch.notch-gray-dark.notch-left
Chevrons
New ul.chevrons class, use with .chevron .chevron-active .chevron-complete and .chevron-disabled
- .chevron
- .chevron.chevron-active
- .chevron.chevron-disabled
- .chevron.chevron-disabled
Scroll Prompt
Use this set of classes to prompt users to scroll down longer pages. Note: it only comes in white.
Icons
Better icons that fit what we do. Created with IcoMoon.
Echo Logos
.icon-echo-logo
.echo-mark
.echo-mark-striped
.echo-spiral
Packages
.icon-package1
.icon-package2
.icon-package3
.icon-package4
.icon-package5
.icon-package6
.icon-package7
.icon-package8
.icon-package9
.icon-package10
.icon-weight
.icon-find-barcode
.icon-unbrella
.icon-fragile
.icon-pallet
Vehicles
.icon-truck1
.icon-truck2
.icon-truck3
.icon-truck4
.icon-boat
.icon-plane
.icon-container-ship
Users
.icon-headphone
.icon-headphone-guy
.icon-headphone-girl
Gestures
.icon-hold-gesture1
.icon-hold-gesture2
.icon-tap-gesture1
.icon-tap-gesture2
.icon-pull-gesture
.icon-push-gesture
User Interface
.icon-unfold-less
.icon-unfold-more
.icon-home
.icon-pencil
.icon-image
.icon-camera
.icon-music
.icon-play
.icon-folder-open
.icon-tag
.icon-cart
.icon-pin
.icon-pin2
.icon-map
.icon-map2
.icon-clock
.icon-clock2
.icon-calendar
.icon-spinner
.icon-search
.icon-zoomin
.icon-zoomout
.icon-lock
.icon-unlocked
.icon-cog
.icon-wand
.icon-trophy
.icon-road
.icon-lightning
.icon-switch
.icon-list
.icon-list2
.icon-numbered-list
.icon-menu
.icon-tree
.icon-cloud
.icon-cloud-download
.icon-cloud-upload
.icon-earth
.icon-link
.icon-attachment
.icon-bookmark
.icon-contrast
.icon-star
.icon-heart
.icon-thumbs-up
.icon-thumbs-down
.icon-info
.icon-close
.icon-checkmark
.icon-minus
.icon-plus
.icon-play2
.icon-pause
.icon-stop
.icon-backward
.icon-forward
.icon-first
.icon-last
.icon-previous
.icon-next
.icon-volume-high
.icon-volume-mute
.icon-loop
.icon-crop
.icon-scissors
.icon-bold
.icon-underline
.icon-italic
.icon-pilcrow
.icon-paragraph-left
.icon-paragraph-center
.icon-paragraph-right
.icon-paragraph-justify
.icon-indent-increase
.icon-indent-decrease
.icon-newtab
.icon-embed
.icon-code
.icon-clipboard-check
.icon-24hour
.icon-chronometer
.icon-compass
.icon-international-pin
.icon-send
.icon-clipboard
.icon-arrow-prev
.icon-arrow-next
.icon-more-horiz
.icon-more-vert
.icon-file
.icon-profile
.icon-file2
.icon-file3
.icon-file4
.icon-copy
.icon-copy2
.icon-libreoffice
.icon-file-pdf
.icon-file-openoffice
.icon-file-word
.icon-file-excel
.icon-file-zip
.icon-file-powerpoint
.icon-file-xml
.icon-file-css
.icon-calculate
Social and Organizations
.icon-share
.icon-googleplus
.icon-facebook
.icon-twitter
.icon-feed
.icon-vimeo
.icon-github
.icon-linkedin
.icon-pinterest
.icon-paypal
OS / Browser
.icon-apple
.icon-android
.icon-windows8
.icon-chrome
.icon-firefox
.icon-IE
.icon-opera
.icon-safari
Devices
.icon-laptop
.icon-mouse
.icon-phone-android
.icon-phone-iphone
.icon-tablet-android
.icon-tablet-mac
.icon-desktop
.icon-watch
Dropdowns
.dropdown ul.dropdown-menu
.dropdown.dropdown-gray-dark ul.dropdown-menu
Button groups
.btn-group
.btn-toolbar .btn-group
.btn-group.dropup
Input groups
.input-group
.input-group-lg
.input-group-sm
Breadcrumbs
ol.breadcrumb
Pagination
Labels & Badges
.label.label-default .label.label-primary .label.label-success .label.label-info .label.label-warning .label.label-danger
.badge.badge-white .badge.badge-primary .badge.badge-success .badge.badge-info .badge.badge-warning .badge.badge-danger
Jumbotron
.jumbotron
Page header
.page-header h3 small
Thumbnails with Captions
.thumbnail
.caption h3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed vulputate velit. Nulla eget elit a arcu cursus tincidunt.
.thumbnail.thumbnail-rotate
Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed vulputate velit. Nulla eget elit a arcu cursus tincidunt.
Button
.thumbnail.thumbnail-zoom-in
Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed vulputate velit. Nulla eget elit a arcu cursus tincidunt.
.thumbnail.thumbnail-bullseye
Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed vulputate velit. Nulla eget elit a arcu cursus tincidunt.
Alerts
Progress bars
Styles for pace.js are also included already
.progress
With bootstrap label
.progress .progress-bar.progress-bar-striped
.progress.active .progress-bar.progress-bar-striped
With .progress-bar-label
With .progress-lg
With .progress-sm
With .progress-xs
Media object
.media-body h4.media-heading
← a.pull-left img.media-object
.media-body h4.media-heading
← a.pull-left.media-middle img.media-object
.media .media-body h4.media-heading
← a.pull-left img.media-object-
li.media .media-body h4.media-heading
← a.pull-left.media-bottom img.media-object
.media .media-body h4.media-heading
← a.pull-left img.media-object -
li.media .media-body h4.media-heading
a.media-right img.media-object →
List group
ul.list-group
- li.list-group-item
- List item #2 .badge
- List item #3
div.list-group
Panels
.panel.panel-default
.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
Clockface
.clockface
Javascript
Incremental Slider
jquery.ui slider with exstention for incremental labels
$(function() {
$('#mySlider').labeledslider({
min: 0,
max: 100,
step: 20,
tickArray: [0, 20, 40, 60, 80, 100],
tickLabels: {
0:'7d',
20:'15d',
40:'30d',
60:'60d',
80:'90d',
100:'365d'
}
});
});
Sortable Drag & Drop List
jQuery.ui sortable list
-
Content #1
-
Content #2
-
Content #3
function swapUp(eventObject){
var curr = $(eventObject).closest('.ui-sortable-handle').attr('id');
var prev = $("#"+curr).prev().attr('id');
// swap
$("#"+prev).insertAfter("#"+curr);
}
function swapDown(eventObject){
var curr = $(eventObject).closest('.ui-sortable-handle').attr('id');
var next = $("#"+curr).next().attr('id');
// Swap
$("#"+next).insertBefore("#"+curr);
}
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-sortable-dropzone",
forcePlaceholderSize: true
});
$('.swap-down').click(function (e) {
e.preventDefault();
swapDown(this);
});
$('.swap-up').click(function (e) {
e.preventDefault();
swapUp(this);
});
});
Modals
.modal .modal-dialog .modal-content
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()
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"
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"
Methods: .button('toggle') .button('loading') .button('reset') .button(string)
Collapse
Via data attributes: data-toggle="collapse"
#accordion.panel-group
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
Responsive Carousel
Via data attributes: data-target="#carousel" data-slide data-slide-to data-ride
Via Javascript: $('.carousel').carousel()
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