Loading. Please Wait.

#### Colors

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.

#### Typography

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

# Example Page Header Subtext for Header

##### 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.

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

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

#### Buttons

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

Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3

Examples Radio

Radio 1 Radio 2 Radio 3
Radio 1 Radio 2 Radio 3

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

#### Paginations & Pager

##### 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 & Thumbs

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

#### Avatars

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

1
2
3

##### 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
2
3

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

1
2
3

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

1
2
3

##### Text Avatar

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

Examples

MK
TO
ZS

#### Navbars

##### Default Navbar

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

##### Inverted Navbar

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

#### Alerts

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

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

#### Modal Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit nesciunt, cum, vitae nobis laudantium iure, veritatis quod dicta quos voluptas vel a obcaecati voluptatem id? Error fugiat ullam eum, quas in voluptates vitae eos qui, exercitationem reprehenderit commodi facilis veritatis necessitatibus accusantium, dolore perferendis natus. In nulla corporis soluta tenetur?

##### 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.

#### Modal title

#### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

#### Popover in a modal

This button should trigger a popover on click.

#### Tooltips in a modal

This link and that link should have tooltips on hover.

#### Overflowing text to show scroll behavior

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Optional Sizes

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

#### Modal Large

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem eveniet porro quam magni quos ea officia voluptas voluptatum, praesentium quo temporibus, debitis ipsum dicta reprehenderit autem ab repudiandae excepturi? Tenetur sapiente sequi inventore placeat vel, fugit minus commodi possimus repellendus doloribus, cupiditate nam, ratione quae quia porro sunt veniam? Facilis temporibus officia dolore nihil excepturi, velit enim quam natus possimus esse libero eligendi, ullam quia ab tenetur qui! Autem saepe consequatur unde voluptatum earum nostrum. Dolores fugit nostrum perferendis non quasi pariatur tempore quidem numquam necessitatibus provident rem aut voluptate consequuntur, tenetur, quos saepe ipsum sit optio nulla totam. Non.

#### Modal Small

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem eveniet porro quam magni quos ea officia voluptas voluptatum, praesentium quo temporibus, debitis ipsum dicta reprehenderit autem ab repudiandae excepturi? Tenetur sapiente sequi inventore placeat vel, fugit minus commodi possimus repellendus doloribus, cupiditate nam, ratione quae quia porro sunt veniam?

##### 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.

#### Modal title

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-2 .col-md-offset-4
.col-md-6 .col-md-offset-3
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6

#### Progress Bars

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 & Labels

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

#### Breacrumps

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

#### Tabs & Pills

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 & Popovers

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

Tooltip on the left
Tooltip on the top
Tooltip on the bottom
Tooltip on the right

##### Color Versions

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

Example

Tooltip Primary Left
Tooltip Info Top
Tooltip Success Bottom
Tooltip Warning Left
Tooltip Danger Left

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

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

#### Forms

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

Normal Input
Help Text
A block of help text that breaks onto a new line and may extend beyond one line.
Placeholder
Disabled Input
Textarea
Static Control

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

Checkboxes & Radios
Option one is this and that—be sure to include why it's great
Option two is disabled
Option one is this and that—be sure to include why it's great
Option two can be something else and selecting it will deselect option one
Option three is disabled
Inline Checkboxes
One Two Three
One Two Three
Select
Multiple Select
Checkboxes with Helpers
Checkbox with Success
Checkbox with Warning
Checkbox with Error

##### Sizing

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

Examples

Column Sizing
Large Label
Default Label
Small Label

##### 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
@
(success)
Input group with Warning
@
(success)
Input group with Error
@
(success)

#### Tables

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 |
Awesome Fresh Cheese Bauch, Hettinger and Kutch | Thursday In 6 Days | Virgie Lehner Zieme - Durgan | $ 581.00 Paid | withdrawal |
Unbranded Fresh Table West - Kessler | Thursday In 6 Days | Garrett Brown Hackett Inc | $ 341.00 Paid | withdrawal |
Small Steel Car Lowe, Kilback and Bernier | Friday In 6 Days | 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

#### Panels

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

### Panel with Button

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

Well Done!
You successfully read this important alert message.
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

Heads Up!
This alert needs your attention, but it's not super important.
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

Oh Snap!
Change a few things up and try submitting again.
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

Warning!
Better check yourself, you're not looking too good.
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

Show/Hide Fixed

Header Layout

Show/Hide

Sidebar Options

Show/Hide
Fixed Aside

Content View

Footer Options

Show/Hide Fixed

Main Color

Primary
Info
Success
Warning
Danger

Navbar

Dark
Light
Like Main Color

Sidebar

Dark
Light
Like Main Color