13.1 Typography - Alignment Alignment

Bootstrap comes with .text-*-left .text-*-right .text-*-center for responsive text alignment

13.2 Typography - Colors Text colors

.text-mulberry .text-purple .text-magenta .text-pink
.text-charcoal .text-slate .text-dove .text-stone .text-moon .text-bone
.text-red .text-orange .text-yellow .text-green .text-blue
.text-white .text-white .text-transparent .text-transparent

13.3 Typography - Colors Deprecated Text Colors Deprecated

.text-frost .text-fog .text-moonstone .text-snow

13.4 Typography - Decoration Text decoration on hover

  • .hover-underline
  • .hover-no-decoration
Examples
Default styling
Lorem ipsum
hover-underline
show underline decoration on hover
hover-no-decoration
show no decoration on hover 
  1. <a href="/" class="[modifier class]">
  2.     Lorem ipsum
  3. </a>

13.5 Typography - Headings Headings

H1. Heading 1

H2. Heading 2

H3. Heading 3

H4. Heading 4

H5. Heading 5

H6. Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt est deleniti harum culpa iure necessitatibus aperiam sunt sed quas laboriosam perferendis, ad atque ab velit ratione tempore quis, asperiores nostrum.

13.6 Typography - Light Text Light text for dark backgrounds

Example

Next level scenester High Life, Portland selfies 8-bit chia butcher put a bird on it seitan. Small batch bespoke post-ironic yr, skateboard health goth Truffaut banh mi viral put a bird on it fingerstache squid fashion axe cardigan chambray. Try-hard farm-to-table butcher, retro meh actually listicle beard viral four loko swag wolf. Try-hard farm-to-table roof party, ethical next level kale chips umami. 

  1. <div class="bg-frost">
  2.     <p class="text-light text-shadow">
  3.         Next level scenester High Life, Portland selfies 8-bit chia butcher put
  4.         a bird on it seitan. Small batch bespoke post-ironic yr, skateboard
  5.         health goth Truffaut banh mi viral put a bird on it fingerstache squid
  6.         fashion axe cardigan chambray. Try-hard farm-to-table butcher, retro meh
  7.         actually listicle beard viral four loko swag wolf. Try-hard
  8.         farm-to-table roof party, ethical next level kale chips umami.
  9.     </p>
  10. </div>

13.7 Typography - Line Height Line height variation

Next level scenester High Life, Portland selfies 8-bit chia butcher put a bird on it seitan. Small batch bespoke post-ironic yr, skateboard health goth Truffaut banh mi viral put a bird on it fingerstache squid fashion axe cardigan chambray. Try-hard farm-to-table butcher, retro meh actually listicle beard viral four loko swag wolf. Try-hard farm-to-table roof party, ethical next level kale chips umami.
Examples
Default styling
markup:
space-double
double-spaced text
markup: 
  1. markup:

13.8 Typography - Lists Lists

Unordered 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

Ordered List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unstyled list

  1. Use .list-unstyled
  2. This is a list, but there's no styling

Inline list

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Description List

Add .dl-horizontal to your <dl> tags for a horizontal description list with option .text-truncate to truncate text with an ellipsis

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

13.9 Typography - Placeholder Colors Placeholder Colors

13.10 Typography - Sizes Text sizes

  • .text-xsmall - $font-size-xs
  • .text-small - $font-size-sm
  • .text-base - $font-size-root
  • .text-large - $font-size-lg
  • .text-xlarge - $font-size-xl
  • .text-xxlarge - $font-size-xxl

This is xsmall text

This is small text

This is base size text

This is large text

This is xlarge text

This is xxlarge text

13.11 Typography - Text wrapping Text wrapping

Use .break-word for word-wrap: break word.

Use .nowrap for white-space: nowrap

13.12 Typography - Transformation Text transformation

Examples
Default styling
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente consequuntur accusantium, sunt officia dolor deserunt fugit blanditiis, praesentium, dolores aut ipsa nesciunt voluptate dolorem sint, doloribus iusto sequi eos. Earum!
text-capitalize
capitalize text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente consequuntur accusantium, sunt officia dolor deserunt fugit blanditiis, praesentium, dolores aut ipsa nesciunt voluptate dolorem sint, doloribus iusto sequi eos. Earum! 
  1. <div class="[modifier class]">
  2.     Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  3.     Sapiente consequuntur accusantium, sunt officia dolor
  4.     deserunt fugit blanditiis, praesentium, dolores aut ipsa
  5.     nesciunt voluptate dolorem sint, doloribus iusto sequi eos.
  6.     Earum!
  7. </div>

13.13 Typography - Weight Text weight

  • The default weight is book
  • .text-thin - 300 weight text
  • .text-book - 500 weight text
  • .text-bold - 700 weight text