Loading. Please Wait.

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.

Default Colors

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

Custom Colors

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

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

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

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.

Checkbox / Radio
Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.

Examples Checkboxes

Examples Radio

Stateful
Add data-loading-text="Loading..." to use a loading state on a button.

Example

Single Toggle
Add data-toggle="button" to activate toggling on a single button.

Example

Pagination

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

Pager

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

100%x180 100%x180 100%x180
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

100%x200

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

100%x200

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

100%x200

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

Avatar
Avatar
Avatar
Status Icon with Label

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

Examples

1 Avatar
2 Avatar
3 Avatar
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

1 Avatar
2 Avatar
3 Avatar
Status Top Icon

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

Examples

Avatar
Avatar
Avatar
Status Icon with Badge

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

Examples

1 Avatar
2 Avatar
3 Avatar
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

Avatar
Avatar
Avatar
Mixed Status with Badge

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

Examples

1 Avatar
2 Avatar
3 Avatar
Text Avatar

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

Examples

MK
TO
ZS

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

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

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

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

Example

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

Example

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

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.

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

Dismissible Alerts

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

examples

With Simple Icon

examples

With Alternative Icon

examples

Alerts with Header & Buttons

examples

Alerts with Icons, Header & Buttons

examples

Alerts with Header & Buttons v2

examples

Alerts with Icons, Header & Buttons v2

examples

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

60% Complete
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

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
Striped

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

Example

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
Animated

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

Example

45% Complete
Stacked

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

Example

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Slim 3px Version

Add .h-3 to .progress-bar.

Example

45% Complete
Slim 6px Version

Add .h-6 to .progress-bar.

Example

45% Complete
Slim 9px Version

Add .h-9 to .progress-bar.

Example

45% Complete
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

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

Popover Top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover Right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover Bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover Left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Color Versions

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

Popover Primary Top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover Info Right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover Success Bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover Warning Left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover Danger Left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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

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

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

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

A block of help text that breaks onto a new line and may extend beyond one line.

email@example.com

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

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

Validation States

Validation States with icons

@
(success)
@
(success)
@
(success)

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
Avatar
Tomas Bailey
Hauck Inc
$ 100.00
Paid
payment
Awesome Fresh Cheese
Bauch, Hettinger and Kutch
Thursday
In 6 Days
Avatar
Virgie Lehner
Zieme - Durgan
$ 581.00
Paid
withdrawal
Unbranded Fresh Table
West - Kessler
Thursday
In 6 Days
Avatar
Garrett Brown
Hackett Inc
$ 341.00
Paid
withdrawal
Small Steel Car
Lowe, Kilback and Bernier
Friday
In 6 Days
Avatar
Katelynn Braun
Smitham, Kuvalis and Hessel
$ 680.00
Paid
withdrawal
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 Actions
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
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Border Info

Panel with Border Info
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Border Success

Panel with Border Success
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Border Left Gray Lighter

Panel with Border Left Gray Lighter
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Border Left Warning

Panel with Border Left Warning
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Border Left Danger

Panel with Border Left Danger
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel without Background

Panel heading without title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel without Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia!

Panel Collapse with Close

Panel Collapse with Close
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Basic Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel heading without title

Panel heading without title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Title

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with footer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Primary Title

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Primary Title

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Info Title

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Warning Title

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Danger Title

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Primary Title with Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Success Title with Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Info Title with Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Warning Title with Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Danger Title with Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Primary Top Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Success Top Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Info Top Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Warning Top Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Danger Top Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Primary Bottom Heading Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Success Bottom Heading Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Info Top Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Warning Bottom Heading Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Danger Bottom Heading Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel without Background

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel without Background 2px Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel without Background 3px Border

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Left Border Primary

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Left Border Success

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Left Border Info

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Left Border Warning

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Left Border Danger

Panel Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Description

Panel Title with Description

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Label

Panel with Label

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Badge

Panel with 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Link

Panel with Link

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Button

Panel with Button

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Buttons Groups

Panel with Buttons Groups

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Input

Panel with Input

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Dropdown

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel Options

Panel Options

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Icon

Panel with Icon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Alert Success

Panel with Alert Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Alert Info

Panel with Alert Info

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Alert Warning

Panel with Alert Warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Alert Danger

Panel with Alert Danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Pagination

Panel with Pagination

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Panel with Options

Panel with Options

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam ullam, atque eveniet enim mollitia fugit quo aut molestiae voluptas!

Navbar Options

Header Layout

Sidebar Options

Content View

Footer Options

Main Color

Navbar

Sidebar