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 |
---|---|
|
Shop Custom Page |
|
You are on the main page of our store |
|
Popular Products |
|
Striped T-shirt |
|
Shirts |
|
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
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- 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.
<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.
<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
.
<!-- 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.
<a href="#!" class="text-decoration-none">Non-underlined link</a>
Questions or feedback?
Let us know