Elements:Typography
Typography including headings, paragraphs, lists, quotes and more.
Headings
Headings are applied either with
h
tags or with
.h*
classes (
.h1
to
.h6
) allow any element to "display" like an heading.
h
tags
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Paragraphs using
.h*
classes
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Display headings
.display-1|2|3|4|5|6
classes allows for enlarged & bolder headings for use as page titles for example.
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Font size
.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
Inline text elements
Various text element/badge helpers.
mark
: You can use the mark badge to
highlight
text.
del
:
This line of text is meant to be treated as deleted text.
s
:
This line of text is meant to be treated as no longer accurate.
ins
:
This line of text is meant to be treated as an addition to the document.
u
:
This line of text will render as underlined
small
:
This line of text is meant to be treated as fine print.
strong
: This line rendered as bold text.
em
: This line rendered as italicized text.
Abbreviations
Use the
abbr
badge to hide text which is shown when any element is hovered.
attr
HTML
Blockquotes
Add the class
.blockquote
to
blockquote
elements to implment the default simnple styling, you can also use the
.blockquote-footer
class for citing the quote source.
Default
A well-known quote, contained in a blockquote element.
Align Center
A well-known quote, contained in a blockquote element.
Align Left
A well-known quote, contained in a blockquote element.
Alternative style Style
Add the class
.blockquote-bubble
to the
blockquote
element and the class
.blockquote-bubble-content
to any inner element to make the quote display like a speach bubble.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lists
Default Unordered Lists
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Default Ordered Lists
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Unstyled Lists
Add the class
.list-unstyled
to
ul
elements to remove all default styling from the list.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Inline Lists
Add the class
.list-inline
to the
ul
element and
.list-inline-item
to each list item.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Bordered Lists
Add the class
.list-bordered
to add a bottom border to each list item.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Large Lists
Add the class
.list-lg
to enlarge the font size and padding on list items.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Small Lists
Add the class
.list-sm
to decrease the font size and padding on list items.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Icons Lists
Add the class
.list-item-icon
to each icon in the list.
You can use all icons listed on the icons page.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Extras
Text alignment
.text-BREAKPOINT-ALIGN
Class
Adjust text alignment based on screenwidth using the format:
.text-BREAKPOINT-ALIGN
ie.
.text-sm|md|lg|xl-left|center|right
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Center aligned text on viewports sized SM (small) or wider.
Center aligned text on viewports sized MD (medium) or wider.
Center aligned text on viewports sized LG (large) or wider.
Center aligned text on viewports sized XL (extra-large) or wider.
Text case, weight & italics
Easily alter text case, weight & italics using these helper classes.
.text-lowercase
: Lowercased text.
.text-uppercase
: Uppercased text.
.text-capitalize
: CapiTaliZed text.
.font-monospace
: This is in monospace
.fw-bold
: Bold text.
.fw-bolder
: Bolder weight text (relative to the parent element).
.fw-normal
: Normal weight text.
.fw-light
: Light weight text.
.fw-lighter
: Lighter weight text (relative to the parent element).
.text-shadow
: Text with shadow.