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
classes allows for enlarged & bolder headings for use as page titles for example.
Display 1
Display 2
Display 3
Display 4
Secondary heading text
To include secondary heading text you can include text wrapped in
small
tags. Use the
.d-block
class to make in show on the next line.
Fancy display heading With faded secondary text
Fancy display heading With faded secondary text
Lead Text
Add the
.lead
class to any
p
badge to enlarge the text and line height.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Default Align Right
Add the class
.text-right
to flip the quote to align right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Bubble 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.
Bubble Style Align Right
Add the class
.text-right
to flip the quote to align right.
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-justify
Align justify text: Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
.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-weight-bold
: Bold text.
.font-weight-normal
: Normal weight text.
.font-italic
: Italic text.
.text-fancy
: Normal text with something a bit text-fancy can be nice!.
.text-shadow
: Text with shadow.
Responsive Text Size
Screen xs
Screen sm
Screen md
Screen lg
Example:
Resize the page to see me change
<h2 class="font-xs-x2 font-md-x3">Resize the page to see me change</h2>