Styles

Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes.

typography

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.

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

All standard text within the <body> has a consistent design.

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.

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

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

The following snippet of text is highlighted text.

Applying a class of .text-muted .text-muted-dark .text-muted-light .text-primary .text-warning .text-danger .text-success .text-info to an element will change the colour of the text to the required status colour.

Example

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Applying a class of .line-normal .line-loose .line-looser .line-tight .line-tighter to a block element will change the amount of bottom margin that is provided to that element. This is useful if elements need to be closer together to provide an association of data or if they need to be further apart to create a visual separation.

Example

This line has a normal margin to the block of text below

This is the block of text below


This line has a tight margin to the block of text below

This is the block of text below


This line has a tighter margin to the block of text below

This is the block of text below


This line has a loose margin to the block of text below

This is the block of text below


This line has a looser margin to the block of text below

This is the block of text below


Applying a class of .text-weaker to an element will reduce the weight of the font to a lighter style.

Example

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Applying a class of .text-stronger to an element will increase the weight of the font to the boldest style.

Example

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Transform text in components with text capitalization classes and neatly crop text with .ellipsize

Example

Lowercased text.

Uppercased text.

Capitalized text.

This text will be cropped and ellipsized. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

For quoting blocks of content from another source within your document.

Example

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

Someone famous in Source Title
Example

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

Someone famous in Source Title

buttons

Provide a filled styled button.

Example

Provide an outlined styled button.

Example

Provide a filled, disabled button.

Example

Provide varying sizes of buttons for specific use cases.

tables

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. 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.

Example
Optional table caption.
# First Name Last Name Username
1 Joe Blogs @jblogs
2 Jane Doe @jdoe
3 Harry Henderson @hhenderson
4 Bob Manchino @bmanchino
5 Tim Malarky @tmalarky
6 Lisa Nimmo @Lnimmo

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

Example
# First Name Last Name Username
1 Joe Blogs @jblogs
2 Jane Doe @jdoe
3 Harry Henderson @hhenderson
4 Bob Manchino @bmanchino
5 Tim Malarky @tmalarky
6 Lisa Nimmo @Lnimmo

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

Example
# First Name Last Name Username
1 Joe Blogs @jblogs
2 Jane Doe @jdoe
3 Harry Henderson @hhenderson
4 Bob Manchino @bmanchino
5 Tim Malarky @tmalarky
6 Lisa Nimmo @Lnimmo

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

Example
# First Name Last Name Username
1 Joe Blogs @jblogs
2 Jane Doe @jdoe
3 Harry Henderson @hhenderson
4 Bob Manchino @bmanchino
5 Tim Malarky @tmalarky
6 Lisa Nimmo @Lnimmo

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.

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

Example
An warning message for the above element that breaks onto a new line and may extend beyond one line
An error message for the above element that breaks onto a new line and may extend beyond one line
An success message for the above element that breaks onto a new line and may extend beyond one line