Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.

Grayscale

Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.

Gray-Darker

HEX     #262626
RGB     38, 38, 38
CMYK  71% 65% 64% 69%
SCSS   $gray-darker

Gray-Dark

HEX     #2d2d2d
RGB     45 45 45
CMYK  70% 64% 63% 64%
SCSS   $gray-dark

Gray

HEX     #383838
RGB     56 56 56
CMYK  69% 62% 61% 54%
SCSS   $gray

Gray-Light

HEX     #444444
RGB     68 68 68
CMYK  67% 60% 59% 33% SCSS   $gray-light

Gray-Lighter

HEX     #5c5c5c
RGB     92 92 92
CMYK  61% 54% 53% 26% SCSS   $gray-lighter

Default Colors

Use any of these color variables as they are or reassign them to more meaningful variables for your project.

Brand-Primary

HEX     #2d99dc
RGB     45 153 220
CMYK  72% 29% 0% 0%
SCSS   $brand-primary

Brand-Info

HEX     #35bda8
RGB     53 189 168
CMYK  70% 0% 44% 0%
SCSS   $brand-info

Brand-Success

HEX     #86b34d
RGB     134 179 77
CMYK  54% 9% 96% 0%
SCSS   $brand-success

Brand-Warning

HEX     #e66c40
RGB     230 108 64
CMYK  5% 70% 86% 0%
SCSS   $brand-warning

Brand-Danger

HEX     #cb3e4b
RGB     203 62 75
CMYK  14% 90% 70% 3%
SCSS   $brand-danger

Custom Colors

Different colors used especially in charts, graphs and custom configurations for different buttons, panels, or sliders.

Brand-Cerulean

HEX     #08a5e1
RGB     8 165 225
CMYK  73% 20% 0% 0%
SCSS   $brand-cerulan

Brand-Curious-Blue

HEX     #08a5e1
RGB     42 136 197
CMYK  79% 39% 0% 0%
SCSS   $brand-curious-blue

Brand-Endaveour

HEX     #0058a1
RGB     0 88 161
CMYK  97% 74% 3% 0%
SCSS   $brand-endaveour

Brand-Minsk

HEX     #343286
RGB     51 50 134
CMYK  98% 100% 9% 1%
SCSS   $brand-minsk

Brand-Eminence

HEX     #732c86
RGB     115 44 134
CMYK  67% 100% 7% 1%
SCSS   $brand-eminence

Brand-Violet-Eggplant

HEX     #a82084
RGB     168 32 132
CMYK  37% 100% 7% 0%
SCSS   $brand-violet-eggplant

Brand-Mint-Freen

HEX     #78fd9a
RGB     120 253 154
CMYK  46% 0% 63% 0%
SCSS   $brand-mint-green

Brand-Aquamarine

HEX     #68fee0
RGB     104-254-224
CMYK  46% 0% 26% 0%
SCSS   $brand-aquamarine

Brand-Malibu

HEX     #6bc1fd
RGB     107 193 253
CMYK  49% 13% 0% 0%
SCSS   $brand-malibu

Brand-Dodger-Blue

HEX     #5b73fc
RGB     91 115 253
CMYK  73% 62% 0% 0%
SCSS   $brand-dodger-blue

Brand-Heliotrope

HEX     #a072fc
RGB     53% 63% 0% 0%
CMYK  (87%,65%,76%,87%)
SCSS   $brand-heliotrope

Brand-Perfume

HEX     #f384fc
RGB     243 132 252
CMYK  18% 53% 0% 0%
SCSS   $brand-perfume

Lead Body Copy

Make a paragraph stand out by adding .lead.

Example

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Body Copy

Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Basic Body

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

example with .small class

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

A simple shell for an .h1 to appropriately space out and segment sections of content on a page. It can utilize the .h1's default .small element, as well as most other components (with additional styles).

Examples

HR Headers

Very good to use especially for headers in tablet or mobile. 3 examples below.

Examples

HR Text Left

HR Text Center

HR Text Right

Display Headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading - a larger, slightly more opinionated heading style.

Examples

Display 1

Display 2

Display 3

Display 4

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Examples Defaults

This is an example of Muted Text.

This is an example of Normal Text.

This is an example of White Text.

This is an example of Primary Text.

This is an example of Success Text.

This is an example of Info Text.

This is an example of Warning Text.

This is an example of Danger Text.

Examples Custom Colors

This is an example of Cerulean Text.

This is an example of Curious Blue Text.

This is an example of Endaveour Text.

This is an example of Minsk Text.

This is an example of Eminence Text.

This is an example of Violet Eggplant Text.

This is an example of Mint Green Text.

This is an example of Aquamarine Text.

This is an example of Dodger Blue Text.

This is an example of Heliotrope Text.

This is an example of Perfume Text.

Examples Grays Colors

This is an example of Gray Darker Text.

This is an example of Gray Dark Text.

This is an example of Gray Text.

This is an example of Gray Light Text.

This is an example of Gray Lighter Text.

Inline Body Text

Marked Text: You can use the mark tag to highlight text.

Deleted Text: ~~This line of text is meant to be treated as deleted text.~~

Strikethrough Text: ~~This line of text is meant to be treated as no longer accurate.~~

Inserted Text: This line of text is meant to be treated as an addition to the document.

Underlined Text: This line of text will render as underlined

Small Text: This line of text is meant to be treated as fine print.

Bold Text: The following snippet of text is rendered as bold text.

Italics Text: The following snippet of text is rendered as italicized text.

Basic Abbreviation: An abbreviation of the word attribute is attr.

Initialism: HTML is the best thing since sliced bread.

Transform Classes: Lowercased text. / Uppercased text. / Capitalized text.

Descriptions

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Blackquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Code

<p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla.</p>

To switch directories, type cd followed by the name of the directory. To edit settings, press ctrl + ,

Inline

For example, <section> should be wrapped as inline.

This text is meant to be treated as sample output from a computer program.

Variables

y = mx + b

Colors Options

Use any of the available button classes to quickly create a styled button.

Examples Default

Examples Custom Colors

Examples Gray Colors

Colors Outline Options

To an existing button, add the class .btn-outline

Examples Default Outline

Examples Custom Colors Outline

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

Examples

Create block level buttons—those that span the full width of a parent— by adding .btn-block .

Examples

Active States

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active . However, you may use .active on <buttons>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

Button Element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

Examples

Anchor Element

Add the .active class to <a> buttons.

Examples

Primary Link Link

Disabled State

Add the disabled attribute to <button> buttons..

Examples

Buttons Groups

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups..

Examples

Justified Button Groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

Examples

Vertical Variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

Example

Basic Example

Wrap a series of buttons with .btn in .btn-group .

Examples

Button Toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components. .

Examples

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Examples

Button Dropdowns

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Single Button

Turn a button into a dropdown toggle with some basic markup changes.

Examples

Split Button

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

Examples

Dropup Variation

Trigger dropdown menus above elements by adding .dropup to the parent.

Examples

Sizing

Button dropdowns work with buttons of all sizes.

Examples

Button with Icons

Add button in class next to the text <i class="fa fa-fw fa-gear">

Toolbar Only with Icons

Example

Buttons Only Icons

Example

Buttons with Icons

Example

Buttons button.js

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Default Pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Example

Disabled and Active States

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

Example

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

Example

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Default Pager

By default, the pager centers links.

Example

Aligned Links

Alternatively, you can align each link to the sides:

Example

Optional Disabled State

Pager links also use the general .disabled utility class from the pagination.

Example

Images Shapes

Add classes to an <img> element to easily style images in any project.

Examples

Thumbnails

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more. If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as Masonry, Isotope, or Salvattore.

Examples

Custom Content

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

Examples

Thumbnail Label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Accept Cancel

Thumbnail Label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Accept Cancel

Thumbnail Label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Accept Cancel

Thumbnails

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.

Example

Hello, World!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn More

They are often used within the dashboard. Practically - on each sub-page is available. It should be familiar with the existing options.

Sizes

There are versions available default, that is avatar, large avatar avatar-lg & small avatar avatar-sm

Examples

Status Icon with Label

Just add the class label <span class="label label-warning">3</span>

Examples

Mixed Status with Label

Just add the class label <span class="label label-warning">3</span> & <i class="avatar-status bg-danger avatar-status-bottom">

Examples

Status Top Icon

You can add as: Available avatar-status bg-success or Away bg-warning, Busy bg-danger etc.

Examples

Status Icon with Badge

Just add the class label <span class="badge">3</span>

Examples

Icon Avatar

Just add the class label <i class='avatar-content fa fa-user'>

Examples

Status Bottom Icon

Simply add the class avatar-status-bottom for example: <i class="avatar-status bg-success avatar-status-bottom">

Examples

Mixed Status with Badge

Just add the class label <span class="badge">3</span> & <i class="avatar-status bg-danger avatar-status-bottom">

Examples

Text Avatar

Just add the class label <i class='avatar-content fa fa-user'>

Examples

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

Example

Modify the look of the navbar by adding .navbar-inverse.

Example

Brand Image

Replace the navbar brand with your own image by swapping the text for an <img>. Since the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.

Example

Forms

Place form content within .navbar-form for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content. As a heads up, .navbar-form shares much of its code with .form-inline via mixin. Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.

Example

Buttons

Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar.

Example

Text

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

Example

Non-Nav Links

For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.

Example

Component Alignment

Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.

These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.

Fixed to Top

Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.

Example

Fixed Bottom

Add .navbar-fixed-bottom and include a .container or .container-fluid to center and pad navbar content.

Example

Static Top

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top and include a .container or .container-fluid to center and pad navbar content.

Example

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

examples

Well Done! You successfully read this important alert message.

Heads Up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh Snap! Change a few things up and try submitting again.

Well Done! You successfully read this important alert message.

Heads Up! This alert needs your attention, but it's not super important.

Warning!Better check yourself, you're not looking too good.

Oh Snap!Change a few things up and try submitting again.

Dismissible Alerts

Build on any alert by adding an optional .alert-dismissible and close button.

examples

Well Done! You successfully read this important alert message.

Heads Up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh Snap! Change a few things up and try submitting again.

Well Done! You successfully read this important alert message.

Heads Up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh Snap! Change a few things up and try submitting again.

With Simple Icon

examples

Well Done! You successfully read this important alert message.

Heads Up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh Snap! Change a few things up and try submitting again.

With Alternative Icon

examples

Well Done! You successfully read this important alert message.

Heads Up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh Snap! Change a few things up and try submitting again.

Alerts with Header & Buttons

examples

Well Done!

You successfully read this important alert message.

Heads Up!

This alert needs your attention, but it's not super important.

Warning!

Better check yourself, you're not looking too good.

Oh Snap!

Change a few things up and try submitting again.

Alerts with Icons, Header & Buttons

examples

Well Done!

You successfully read this important alert message.

Heads Up!

This alert needs your attention, but it's not super important.

Warning!

Better check yourself, you're not looking too good.

Oh Snap!

Change a few things up and try submitting again.

Alerts with Header & Buttons v2

examples

Well Done!

You successfully read this important alert message.

Heads Up!

This alert needs your attention, but it's not super important.

Warning!

Better check yourself, you're not looking too good.

Oh Snap!

Change a few things up and try submitting again.

Alerts with Icons, Header & Buttons v2

examples

Well Done!

You successfully read this important alert message.

Heads Up!

This alert needs your attention, but it's not super important.

Warning!

Better check yourself, you're not looking too good.

Oh Snap!

Change a few things up and try submitting again.

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults..

Static Example

A rendered modal with header, body, and set of actions in the footer.

Example

Live Demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Optional Sizes

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog .

Using the Grid System

To take advantage of the Bootstrap grid system within a modal, just nest .rows within the .modal-body and then use the normal grid system classes.

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Basic Example

Default progress bar.

Example

With Label

Remove the <span> with .sr-only class from within the progress bar to show a visible percentage.

Example

60%

Minimal Width

To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.

Example

10%

Contextual Alternatives

Progress bars use some of the same button and alert classes for consistent styles.

Example

Striped

Uses a gradient to create a striped effect. Not available in IE9 and below.

Example

Animated

Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.

Example

Stacked

Place multiple bars into the same .progress to stack them.

Example

Slim 3px Version

Add .h-3 to .progress-bar.

Example

Slim 6px Version

Add .h-6 to .progress-bar.

Example

Slim 9px Version

Add .h-9 to .progress-bar.

Example

Badges

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

Default Examples

To already existing class .badge add an additional class .badge-success

examples

1 2 3 4 5

Outlines Examples

To already existing class .badge add an additional class .badge-outline

examples

1 2 3 4 5

Badges Inside Button & Link

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

examples

Inbox 42

Adapts to Active Nav States

Built-in styles are included for placing badges in active states in pill navigations.

examples

Badges with Icons

To already existing class .badge add an additional class .badge-with-icon

examples

1 2 3 4 5

Badges Status with Avatar

For avatar control class is .avatar-status & position .avatar-top or .avatar-bottom.

examples

Labels

Available Colors Variations

To already existing class .label add an additional class .label-success

examples

Default Primary Success Info Warning Danger

Outlines Examples

To already existing class .label add an additional class .label-outline

examples

Default Primary Success Info Warning Danger

Labels Pills

To already existing class .label add an additional class .label-pill

examples

Default Primary Success Info Warning Danger

Headers with Label

If you add to the .h1 to .h6 then you get the result as below. Just add the <span class=”label label-outline label-primary”>

.h1 Example Heading New

.h2 Example Heading New

.h3 Example Heading New

.h4 Example Heading New

.h5 Example Heading New

.h6 Example Heading New

Indicate the current page's location within a navigational hierarchy.

Basic Elements

Separators are automatically added in CSS through :before and content.

Examples

With Icon(s)

Instead of text, add icon with a set of Font Awesome: <i class="fa fa-home">

Examples

Without Background

To an existing class <ol class="breadcrumb> add class .no-bg.

Examples

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

Tabs

Note the .nav-tabs class requires the .nav base class.

Example

Tabs Justified

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

Examples

Tabs with Dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Example

Tabs Alternative

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Example

Pills

Take that same HTML, but use .nav-pills instead:

Example

Pills Justified

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

Examples

Pills Stacked

Pills are also vertically stackable. Just add .nav-stacked.

Example

Disabled Links

For any nav component (tabs or pills), add .disabled for gray links and no hover effects.

Examples

Pills with Dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Examples

Tooltips tooltip.js
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage. Tooltips with zero-length titles are never displayed.

Example

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Static Tooltip

Four options are available: top, right, bottom, and left aligned.

Example

Color Versions

All 22 colors are available. Just to add to the .tooltip-inner class .bg-primary

Example

Four Directions

Four options are available: top, right, bottom, and left aligned.

Example

Popovers popover.js

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Popovers whose both title and content are zero-length are never displayed.

Static Popover

Four options are available: top, right, bottom, and left aligned.

Examples

Color Versions

All 22 colors are available. Just to add to the .popover class .b-primary

Four Directions

Four options are available: top, right, bottom, and left aligned.

Example

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Basic Example

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

Example

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Badges

Add the badges component to any list group item and it will automatically be positioned on the right.

Example

14 Cras justo odio
Dapibus ac facilisis in
2Morbi leo risus
9Porta ac consectetur ac
Vestibulum at eros

Linked Items

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

Example

14 Cras justo odio Dapibus ac facilisis in 2 Morbi leo risus 9 Porta ac consectetur ac Vestibulum at eros

Button Items

List group items may be buttons instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element. Don't use the standard .btn classes here.

Example

Disabled Items

Add .disabled to a .list-group-item to gray it out to appear disabled.

Example

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Contextual Classes

Use contextual classes to style list items, default or linked. Also includes .active state.

Example

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

Custom Content

Add nearly any HTML within, even for linked list groups like the one below.

Example

List group item heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

List group item heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

List group item heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Custom Content - Users Media

Just add the <div class="media">

Example

Amina Upton

Global Markets Consultant

Busy

Halie Breitenberg

Legacy Brand Consultant

Online

Madison Klocko

Customer Web Planner

Offline

Lauriane Schmitt

National Assurance Officer

Away

Custom Content - Files Media

Another example with Files. Just add the <div class="media">

Example

borders_action_items_bandwidth.skd
by Deborah Hegmann · 171.00 Kb

books_frozen_australian_dollar.afp
by Elnora Kreiger · 359.00 Kb

tasty_soft_mouse.txt
by Murphy Stroman · 987.00 Kb

belize_connect_soap.hps
by Julian Hartmann · 518.00 Kb

Individual form controls automatically receive some global styling. All textual input, textarea, and select elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Basic Elements

Individual form controls automatically receive some global styling.

Examples

Checkboxes & Radios

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Examples

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize

Examples

Form Elements Options

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input

Basic Examples

.00

$ .00

Basic Examples

with Dropdowns

Segmented Buttons

Validation States

To use, add .has-warning, .has-error, or .has-success to the parent element.

Validation States

Input with Success

Input with Warning

Input with Error

Validation States with icons

Input group with Success

Input group with Warning

Input group with Error

It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Basic Example

For styling—light padding and only horizontal dividers—add the base class .table to any table.

Project	Deadline	Leader + Team	Budget	Status	Actions
Intelligent Fresh Towels Kerluke and Sons	Wednesday Overdue	Tomas Bailey Hauck Inc	$ 100.00 Paid	payment	Send Email Call Show Profile
Awesome Fresh Cheese Bauch, Hettinger and Kutch	Thursday In 6 Days	Virgie Lehner Zieme - Durgan	$ 581.00 Paid	withdrawal	Send Email Call Show Profile
Unbranded Fresh Table West - Kessler	Thursday In 6 Days	Garrett Brown Hackett Inc	$ 341.00 Paid	withdrawal	Send Email Call Show Profile
Small Steel Car Lowe, Kilback and Bernier	Friday In 6 Days	Katelynn Braun Smitham, Kuvalis and Hessel	$ 680.00 Paid	withdrawal	Send Email Call Show Profile

Striped Example

Use .table-striped to add zebra-striping to any table row within the tbody

#	First Name	Last Name	E-mail	Nick	Role
1	Thea	Lehner	Retha_Kilback15@yahoo.com	Jeanie31	Liason
2	Bridget	Nienow	Ali63@hotmail.com	Vernice3	Designer
3	Chloe	Grimes	Franco_Huels33@yahoo.com	Carmela82	Assistant
4	Don	Schiller	Dorris1@hotmail.com	Misael90	Planner

Hover Example

Add .table-hover to enable a hover state on table rows within a tbody

#	Product Name	Stats	Last Month
1	Handcrafted Wooden Computer	5,3,9,6,5,9,7,3,5,2	27.87%
2	Sleek Granite Keyboard	5,3,2,-1,-3,-2,2,3,5,2	54.09%
3	Unbranded Metal Hat	0,-3,-6,-4,-5,-4,-7,-3,-5,-2	0.17%
4	Intelligent Steel Keyboard	5,3,2,-1,-3,-2,2,3,5,2	100.98%

Borderd Example

Add .table-bordered for borders on all sides of the table and cells.

Ticket	Completion	Create	Deadline
Horizontal content-based model	60% Complete	June 15, Thursday, 2015	January 28, Thursday, 2016
Managed hybrid success	60% Complete	March 15, Wednesday, 2015	November 28, Tuesday, 2016
Front-line background functionalities	60% Complete	December 15, Monday, 2015	March 28, Friday, 2016
Advanced national challenge	60% Complete	April 15, Wednesday, 2015	March 28, Monday, 2016

Condensed Example

Add .table-condensed to make tables more compact by cutting cell padding in half.

#	Name	Price	Date
Invoice #0717	Javon Lakin	$ 49.00	April 15, Wednesday, 2015
Invoice #7635	Erling Lubowitz	$ 737.00	December 15, Saturday, 2015
Invoice #6718	Rachel Pfeffer	$ 385.00	March 15, Sunday, 2015
Invoice #9395	Keagan Ferry	$ 477.00	November 15, Saturday, 2015

Responsive Example

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).

ID	Name	Amount	Payment
#5417	Ethelyn Lesch	$ 569.00	withdrawal
#4780	Arlene Lowe	$ 527.00	payment
#7940	Brooks Green	$ 204.00	payment
#9534	Laisha Gislason	$ 752.00	payment

Contextual Example

Use contextual classes to color table rows or individual cells.

Invoice	Name	Date	Price	Status	Country
#5101	Baylee Collins	April 15, Monday, 2015	$ 953.00	Checking Account	Guatemala
#7186	Harry Kihn	May 15, Wednesday, 2015	$ 593.00	Auto Loan Account	Peru
#8569	Landen Schneider	November 15, Thursday, 2015	$ 662.00	Savings Account	Saint Barthelemy
#3148	Joanne Schamberger	November 15, Thursday, 2015	$ 455.00	Savings Account	Nicaragua
#9354	Orlando Gottlieb	November 15, Thursday, 2015	$ 593.00	Savings Account	Central African Republic
#5020	Elna Hyatt	August 15, Thursday, 2015	$ 851.00	Savings Account	Madagascar
#8566	Kayley Frami	May 15, Saturday, 2015	$ 551.00	Credit Card Account	Lesotho
#4035	Cary Heathcote	June 15, Wednesday, 2015	$ 385.00	Checking Account	Guadeloupe
#6125	Nathan Bogisich	September 15, Saturday, 2015	$ 676.00	Money Market Account	Hungary

Panel with Border Primary

Panel with Border Primary