Styles
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes.
typography
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.
Normal
Example
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Strong
Example
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Emphasized
Example
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
body text
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.
body modifiers
Status Colours
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.
Line Margins
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
Weaker Font Weight
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.
Stronger Font Weight
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.
transformations
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.
block quotes
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
tables
basic
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
| # | 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 |
striped
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 |
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.
input
Example
A longer block of help text that breaks onto a new line and may extend beyond one line.
field status
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