Style Guide

Headings

The <h1> through <h6> tags are designed to be used for page headings. These tags introduce font characteristics (font size, font color, typeface) and spacing (padding and margins).

However, if you want to display text with the font characterstics without using a heading tag, apply the similiarly named class to your element, for example to render a link to appear like the H3 tag <a class="h3">Click here</a>.

H1 Header Tag

H2 Header Tag

H3 Header Tag

H4 Header Tag

H5 Header Tag

H6 Header Tag

Buttons

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

<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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Headings

Buttons

Other