Global Colours

These are global styles that can be used for global combo classes

Solid button colours & hover

Outline button colours & hover

Content

Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Headings

H1. Heading

H2. Heading

H3. Heading

H4. Heading

H5. Heading

H6. Heading

Display headings

Display 1

Display 2

Display 3

Display 4

Text alignment

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lead paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inline text elements

This line rendered as italicized text.

This line of text will render as underlined

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

This line of text is meant to be treated as deleted text.

This line rendered as bold text.

You can use the mark tag to highlight text.

Blockquotes

Lists no bullets

• Curabitur est gravida et libero vitae dictum.
• Prima luce, cum quibus.
• Quam diu etiam furor iste tuus nos eludet?
• Curabitur est gravida et libero vitae dictum.

Lists

• Curabitur est gravida et libero vitae dictum.
• Prima luce, cum quibus.
• Quam diu etiam furor iste tuus nos eludet?
• Curabitur est gravida et libero vitae dictum.

Inline lists

• Curabitur est gravida
• Prima luce
• Quam diu etiam
• Curabitur est

Description list alignment

Images

Components

Alerts

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

Alert colours

Alert link colours

Alert

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.

Link color

Use the .alert-link utility class to quickly provide matching colored links within any alert.

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Dismissing

On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.
To animate alerts when dismissing them, be sure to add the .fade and .show classes.
You can see this in action with a live demo:

Badges

Documentation and examples for badges, our small count and labeling component.

Default badge

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Here's a default Badge

Badge colours

Badge hover colours

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Pill badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

Links

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Solid buttons

Outline buttons

Button states

Button groups

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Default card

List groups

Links in a list

The kitchen sink

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

• List item
• List item
• List item

Button Text

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

• List item
• List item
• List item

Button Text

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

• List item
• List item
• List item

Alignment