Use semantically correct heading tags in order (h1-h6), to adhere to WCAG accessibility guidelines. If you need a different size than what is associated with the correct heading tag, you can use helper classes
for the style you need. Just add classes .h1, .h2, .h3 etc for the size you need.
All pages should have a page title, like seen on this page (Palette — Basics at the very top). For this, use <h1 class="page-title">.
Sometimes you'll need a section title, like the above Typography title. Use <h2 class="header-title"> with supplementary margin helpers, if needed, for proper positioning.
We rely on quite a lot of .cards, and to get the appropriate .card-header style, like seen in the examples in this style guide, you need to wrap the card header in a <h6 class="my-0">.
For “normal” text paragraphs, use the <p> tag. If you need muted text, for form help texts or any other text that needs less attention, add the .text-muted class to your text element.
<h1 class="page-title">Page Title</h1>
<h2 class="header-title">Section Title</h2>
<h6 class="my-0">Card Title</h6>
<h1> or <p class="h1"><h2> or <p class="h2"><h3> or <p class="h3"><h4> or <p class="h4"><h5> or <p class="h5"><h6> or <p class="h6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make ...<p>
<h1>What is Lorem Ipsum?</h1>
<h2>Where does it come from?</h2>
<h3>Yeah but where did it <em>really</em> come from?</h3>
<h4>Why do we use it?</h4>
<h5>Where can I get some?</h5>
<h6>The standard Lorem Ipsum</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Sometimes we need to tell the user to press ctrl alt delete (or other keys)
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p>Sometimes we need to tell the user to press <kbd>ctrl</kbd> <kbd>alt</kbd> <kbd>delete</kbd> (or other keys)</p>
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.
Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.
Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Info: Maecenas sed diam eget risus varius blandit sit amet non magna.
Warning: Etiam porta sem malesuada magna mollis euismod.
Danger: Donec ullamcorper nulla non metus auctor fringilla.
White: Etiam porta sem malesuada ultricies vehicula.
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-white bg-dark">Etiam porta sem malesuada ultricies vehicula.</p>
<a href="#" class="text-muted">Muted link</a>
<a href="#" class="text-primary">Primary link</a>
<a href="#" class="text-success">Success link</a>
<a href="#" class="text-info">Info link</a>
<a href="#" class="text-warning">Warning link</a>
<a href="#" class="text-danger">Danger link</a>
Similar to the text color classes, easily set the background of an element to any contextual class. Anchor components (links) will darken on hover, just like the text classes. Background utilities do not set color on text, so in some cases you’ll want to use .text-* utilities.
Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.
Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Info: Maecenas sed diam eget risus varius blandit sit amet non magna.
Warning: Etiam porta sem malesuada magna mollis euismod.
Danger: Donec ullamcorper nulla non metus auctor fringilla.
Dark: Cras mattis consectetur purus sit amet fermentum.
Faded: Cras mattis consectetur purus sit amet fermentum.
<p class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-dark text-white">Cras mattis consectetur purus sit amet fermentum.</p>
<p class="bg-faded">Cras mattis consectetur purus sit amet fermentum.</p>
Buttons and links are very separate concepts. Always use a <button> when clicking will trigger an action, and an <a href="{link}"> when clicking will change the view or take the user out of the
application.
The styling for buttons and links can be somewhat interchangeable. In fact you can make any element look like a button by adding the class .btn to an element. You can also make a button look like a link by combining the
classes .btn and .btn-link. Make sure the context is very clear if you use styling tricks like this though. We don't want to trick the user into thinking clicking something will do one thing and then we
do another.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-link">Link</button>
<p>Pretty much any element can look like a button:</p>
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-danger" type="reset" value="Reset">
<span class="btn btn-primary">Not a link or a button</span>
Outlined buttons with transparent background:
Button sizes:
<p>Outlined buttons with transparent background:</p>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<p>Button sizes:</p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
You can even make button groups:
And groups of button groups:
<p>You can even make button groups:</p>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<p>And groups of button groups:</p>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
We use Font Awesome for all inline icons in our apps and sites. Displaying an icon is as easy as finding the right class and putting it into an i tag. Like this: <i class="fa fa-bolt"></i> .
If you need to adjust the size of the icon, supplement with either of the helper classes for icon size: .fa-lg, .fa-2x, .fa-3x, .fa-4x, .fa-5x. If you have a list of icons and need them to line up with equal width, use
the helper class .fa-fw. Consult the Font Awesome 4.7.0 documentation if you need further modifications.
We have a few options for table styles, states, responsiveness and otherwise. If you are in doubt about which table style to use, please consult with a UX or front-end designer.
For simple, small tables with few and narrow columns, it should be sufficient to add the class .table to the <table> tag.
For tables with lots of rows and columns it’s recommended to add the classes .table-sm (less padding) and .table-hover to the <table> tag to save space while letting the user highlight entire
rows on mouse hover.
If you need to convey a state or special attention to a table row, there are several contextual classes you can use. Try adding one of the classes .table-success, .table-warning, .table-danger and .table-info to the row’s <tr>.
| # | First Name | Last Name |
|---|---|---|
| 1 | Henning | Støverud |
| 2 | Jagjit | Singh |
| 3 | Knut‑Erik | Lødding |
| 4 | Henning | Støverud |
| 5 | Jagjit | Singh |
| 6 | Knut‑Erik | Lødding |
| 7 | Henning | Støverud |
| 8 | Jagjit | Singh |
| 9 | Knut‑Erik | Lødding |
<table class="table">
<caption>Normal table (w/ row states)</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Henning</td>
<td>Støverud</td>
</tr>
<tr class="table-info">
<th scope="row">2</th>
<td>Jagjit</td>
<td>Singh</td>
</tr>
<tr class="table-danger">
<th scope="row">3</th>
<td>Knut‑Erik</td>
<td>Lødding</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Henning</td>
<td>Støverud</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Jagjit</td>
<td>Singh</td>
</tr>
<tr class="table-warning">
<th scope="row">6</th>
<td>Knut‑Erik</td>
<td>Lødding</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Henning</td>
<td>Støverud</td>
</tr>
<tr class="table-success">
<th scope="row">8</th>
<td>Jagjit</td>
<td>Singh</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Knut‑Erik</td>
<td>Lødding</td>
</tr>
</tbody>
</table>
| # | First Name | Last Name | First Name | Last Name | First Name | Last Name | First Name | Last Name | First Name | Last Name | First Name | Last Name | First Name | Last Name | First Name | Last Name |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Henning | Støverud | Henning | Støverud | Henning | Støverud | Henning | Støverud | Henning | Støverud | Henning | Støverud | Henning | Støverud | Henning | Støverud |
| 2 | Jagjit | Singh | Jagjit | Singh | Jagjit | Singh | Jagjit | Singh | Jagjit | Singh | Jagjit | Singh | Jagjit | Singh | Jagjit | Singh |
| 3 | Knut‑Erik | Lødding | Knut‑Erik | Lødding | Knut‑Erik | Lødding | Knut‑Erik | Lødding | Knut‑Erik | Lødding | Knut‑Erik | Lødding | Knut‑Erik | Lødding | Knut‑Erik | Lødding |
<table class="table table-responsive">
<caption>Responsive table</caption>
<thead>
<tr>
<th scope="col">#</th>
[...]
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
[...]
</tr>
<tr>
<th scope="row">2</th>
[...]
</tr>
<tr>
<th scope="row">3</th>
[...]
</tr>
</tbody>
</table>