Edit these docs

Typography

eCommerce typography

Typography and text utilities dedicated to building eCommerce homepages.

Basic composition

Main website heading (h1)

Website subheading (h4)

Section heading (h3)

Component heading (h5)

Component subheading

(p + .small .text-muted .text-uppercase)

Component second subheading (h6)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit saepe iure perspiciatis, veniam facilis asperiores deleniti at?

Component heading (h5)

Component subheading

(p + .small .text-muted .text-uppercase)

Component second subheading (h6)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit saepe iure perspiciatis, veniam facilis asperiores deleniti at?

Component heading (h5)

Component subheading

(p + .small .text-muted .text-uppercase)

Component second subheading (h6)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit saepe iure perspiciatis, veniam facilis asperiores deleniti at?

How typography may look on the shop page

Shop Custom Page

You are on the main page of our store

Popular Products

Striped T-shirt

Shirts

13.99 $

This paragraph describes the product. You can place detailed information about the product here so that the customer knows what he is buying. It is worth mentioning here all the advantages of a given item.

Orange dress

Dresses

21.49 $

This paragraph describes the product. You can place detailed information about the product here so that the customer knows what he is buying. It is worth mentioning here all the advantages of a given item.

Mountain boots

Shoes

140.00 $

This paragraph describes the product. You can place detailed information about the product here so that the customer knows what he is buying. It is worth mentioning here all the advantages of a given item.



        <!--Section: Content-->
        <section class="text-center">

          <h1>Shop Custom Page</h1>

          <h4>You are on the main page of our store</h4>

          <hr class="my-4">

          <h3>Popular Products</h3>

          <hr class="my-4">

          <!--Grid row-->
          <div class="row">

            <!--Grid column-->
            <div class="col-lg-4 col-md-12 mb-4">

              <h5>Striped T-shirt</h5>

              <p class="small text-muted text-uppercase mb-2">Shirts</p>

              <h6>13.99 $</h6>

              <p>This paragraph describes the product. You can place detailed information about the product here so that
                the customer knows what he is buying. It is worth mentioning here all the advantages of a given item.</p>

            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-lg-4 col-md-6 mb-4">

              <h5>Orange dress</h5>

              <p class="small text-muted text-uppercase mb-2">Dresses</p>

              <h6>21.49 $</h6>

              <p>This paragraph describes the product. You can place detailed information about the product here so that
                the customer knows what he is buying. It is worth mentioning here all the advantages of a given item.</p>

            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-lg-4 col-md-6 mb-4">

              <h5>Mountain boots</h5>

              <p class="small text-muted text-uppercase mb-2">Shoes</p>

              <h6>140.00 $</h6>

              <p>This paragraph describes the product. You can place detailed information about the product here so that
                the customer knows what he is buying. It is worth mentioning here all the advantages of a given item.</p>

            </div>
            <!--Grid column-->

          </div>
          <!--Grid row-->

        </section>
        <!--Section: Content-->

Headings

Heading Example

Page main heading

Shop Custom Page

Page subheading

You are on the main page of our store

Section heading

Popular Products

Component heading
Striped T-shirt

Component subheading

Shirts

Component 2nd subheading
13.99 $
 


          <h1>Shop Custom Page</h1>
          <h4>You are on the main page of our store</h4>
          <h3>Popular Products</h3>
          <h5>Striped T-shirt</h5>
          <p class="small text-muted text-uppercase">Shirts</p>
          <h6>13.99 $</h6>

Muted text

Fancy display heading With faded secondary text 



          <h3>
            <strong>Fancy display heading</strong>
            <small class="text-muted">With faded secondary text</small>
          </h3>

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.



          <p>You can use the mark tag to <mark>highlight</mark> text.</p>
          <p><del>This line of text is meant to be treated as deleted text.</del></p>
          <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
          <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
          <p><u>This line of text will render as underlined</u></p>
          <p><small>This line of text is meant to be treated as fine print.</small></p>
          <p><strong>This line rendered as bold text.</strong></p>
          <p><em>This line rendered as italicized text.</em></p>

Notes

Note primary: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note secondary: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note success: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note danger: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note warning: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note info: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note light: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?



          <p class="note note-primary"><strong>Note primary:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing
            elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat
            illo rem id nisi consequatur esse, sint perspiciatis soluta porro?</p>
    
          <p class="note note-secondary"><strong>Note secondary:</strong> Lorem, ipsum dolor sit amet consectetur
            adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
            delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?</p>
    
          <p class="note note-success"><strong>Note success:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing
            elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat
            illo rem id nisi consequatur esse, sint perspiciatis soluta porro?</p>
    
          <p class="note note-danger"><strong>Note danger:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing
            elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat
            illo rem id nisi consequatur esse, sint perspiciatis soluta porro?</p>
    
          <p class="note note-warning"><strong>Note warning:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing
            elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat
            illo rem id nisi consequatur esse, sint perspiciatis soluta porro?</p>
    
          <p class="note note-info"><strong>Note info:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo
            rem id nisi consequatur esse, sint perspiciatis soluta porro?</p>
    
          <p class="note note-light"><strong>Note light:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing
            elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat
            illo rem id nisi consequatur esse, sint perspiciatis soluta porro?</p>

Lists

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit 


            <ul>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit
            </ul>

Ordered

  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 


            <ol>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit
            </ol>

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit 


            <ul class="list-unstyled">
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit
            </ul>

Text utilities

Text alignment

It’s easy to realign text to components with text alignment classes.

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.



            <p class="text-justify">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.</p>

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.



            <p class="text-left">Left aligned text on all viewport sizes.</p>
            <p class="text-center">Center aligned text on all viewport sizes.</p>
            <p class="text-right">Right aligned text on all viewport sizes.</p>

            <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
            <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
            <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
            <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Text wrapping and overflow

Wrap text with a .text-wrap class.

This text should wrap. 


            <div class="badge badge-primary text-wrap" style="width: 6rem;">
              This text should wrap.
            </div>

You can prevent text from wrapping with a .text-nowrap class.

This text should overflow the parent. 


        <div class="text-nowrap bd-highlight" style="width: 8rem;">
          This text should overflow the parent.
        </div>

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi. 


        <!-- Block level -->
        <div class="row">
          <div class="col-2 text-truncate">
            Praeterea iter est quasdam res quas ex communi.
          </div>
        </div>

        <!-- Inline level -->
        <span class="d-inline-block text-truncate" style="max-width: 150px;">
          Praeterea iter est quasdam res quas ex communi.
        </span>

Word break

Prevent long strings of text from breaking your components’ layout by using .text-break to set overflow-wrap: break-word (and word-break: break-word for IE & Edge compatibility).

mdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbdbmdbdbmdb 



        <p class="text-break">mdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbmdbdbmdbdbmdb</p>

Text transform

You can transform text in components with text capitalization classes.

Lowercase text.

Uppercase text.

CapiTaliZed text.



        <p class="text-lowercase">Lowercased text.</p>
        <p class="text-uppercase">Uppercased text.</p>
        <p class="text-capitalize">CapiTaliZed text.</p>

Note how text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

Font weight and italics

Quickly change the weight (boldness) of text or italicize text.

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.



        <p class="font-weight-bold">Bold text.</p>
        <p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
        <p class="font-weight-normal">Normal weight text.</p>
        <p class="font-weight-light">Light weight text.</p>
        <p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
        <p class="font-italic">Italic text.</p>

Monospace

It’s straightforward to change a selection to our monospace font stack with .text-monospace.

This is in monospace



        <p class="text-monospace">This is in monospace</p>

Reset color

Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.

Muted text with a reset link. 



        <p class="text-muted">
          Muted text with a <a href="#!" class="text-reset">reset link</a>.
        </p>

Text decoration

Remove a text decoration with a .text-decoration-none class.

Non-underlined link 


        <a href="#!" class="text-decoration-none">Non-underlined link</a>