Body Text
Responsive Typography
Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size
within a series of media queries. Bootstrap doesn’t do this for you, but it’s fairly easy to add if you need it.
Here’s an example of it in practice. Choose whatever font-size
s and media queries you wish.
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}
Lead text
An incresed size of text which is suppose to be a highlighted text. You can apply by adding class .lead
to wrapper element.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">
</p>
Inline elements
You can use the <mark>
tag to highlight text.
You can use the .mark
class to highlight text.
This line of text is meant to be treated as deleted text. Wrapped in <del>
tag.
This line of text is meant to be treated as no longer accurate. Wrapped in <s>
tag.
This line of text is meant to be treated as an addition to the document. Wrapped in <ins>
tag.
This line of text will render as underlined. Wrapped in <u>
tag.
This line of text is meant to be treated as fine print. Wrapped in <small>
tag.
This line of text is meant to be treated as fine print. Added .small
class.
This line rendered as bold text. Wrapped in <strong>
tag.
This line rendered as bold text. Wrapped in <b>
tag.
This line rendered as italicized text. Wrapped in <em>
tag.
This line rendered as italicized text. Wrapped in <i>
tag.
<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>
Abbreviations
Stylized implementation of HTML’s <abbr>
element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
Add class .initialism
to an abbreviation for a slightly smaller font-size.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Code
Inline code
To mark parts of text as a code inline, wrap it in <code>
tags.
Code blocks
Use <pre>
tags for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the .pre-scrollable
class, which will set a max-height of 340px and provide a y-axis scrollbar.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
Variables
For indicating variables use the <var>
tag.
y = mx + b
User Input
Use the <kbd>
to indicate input that is typically entered via keyboard.
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
Sample output
For indicating sample output from a program use the <samp>
tag.
This text is meant to be treated as sample output from a computer program.
<!-- Inline code -->
For example, <code><section></code> should be wrapped as inline.
<!-- Code blocks -->
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p></code></pre>
<!-- Variables -->
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
<!-- User Input -->
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
<!-- Sample output -->
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Blockquote
For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote">
around any HTML as the quote.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Adding a source
Add a <footer class="blockquote-footer">
for identifying the source. Wrap the name of the source work in <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alignment
Use text utility classes .text-left
, .text-center
, .text-right
or their responsive variants as needed to change the alignment of your blockquote.
Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<!-- With source -->
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<!-- Center aligned -->
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<!-- Right aligned -->
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Unstyled list
Remove the default list-style and left margin on list items (immediate children only) with class .list-unstyled
. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
- 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
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<ul>
<li>Phasellus iaculis neque</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
Inline list
Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline
and .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum
<li class="list-inline-item">Phasellus iaculis
<li class="list-inline-item">Nulla volutpat
</ul>
Description list
Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate
class to truncate the 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.
- Nesting
-
- Nested definition list
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
- Nested definition list
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
- Nested definition list
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>