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.
.text-monospace : This is in monospace
.font-weight-bold : Bold text.
.font-weight-bolder : Bolder weight text (relative to the parent element).
.font-weight-normal : Normal weight text.
.font-weight-light : Light weight text.
.font-weight-lighter : Lighter weight text (relative to the parent element).
.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 default
Screen sm
Screen md
Screen lg
Screen xl
Example:
Resize the page to see me change
<h2 class="text-sm-x2 text-lg-x8">Resize the page to see me change</h2>