Bootstrap4 Typography
Bootstrap 4 Default Settings
Bootstrap 4's defaultfont-sizeis 16px,line-heightis 1.5.
The defaultfont-familyis "Helvetica Neue", Helvetica, Arial, sans-serif.
Furthermore, all<p>elementsmargin-top: 0 、 margin-bottom: 1rem (16px)。
<h1> - <h6>
Bootstrap defines styles for all HTML headings (h1 to h6). See the example below:
Example
<div class="container">
<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
<h2>h2 Bootstrap heading (2rem = 32px)</h2>
<h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
<h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
<h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
<h6>h6 Bootstrap heading (1rem = 16px)</h6>
</div>
Try it yourself »
Display Heading Classes
Bootstrap also provides four Display classes to control heading styles: .display-1, .display-2, .display-3, .display-4.
Example
<div class="container">
<h1>Display Heading</h1>
<p>Display headings can produce larger and bolder font styles.</p>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
</div>
Try it yourself »
<small>
In Bootstrap 4, HTML<small>element is used to create smaller, lighter-colored text:
Example
<div class="container">
<h1>Smaller text heading</h1>
<p>The small element is used for smaller, lighter-colored text:</p>
<h1>h1 heading<small>Subheading</small></h1>
<h2>h2 heading<small>Subheading</small></h2>
<h3>h3 heading<small>Subheading</small></h3>
<h4>h4 heading<small>Subheading</small></h4>
<h5>h5 heading<small>Subheading</small></h5>
<h6>h6 heading<small>Subheading</small></h6>
</div>
Try it yourself »
<mark>
Bootstrap 4 defines<mark>as having a yellow background and some padding:
Example
<div class="container">
<h1>Highlighted text</h1>
<p>Use the mark element to<mark>highlight</mark>text.</p>
</div>
Try it yourself »
<abbr>
Bootstrap 4 defines HTML<abbr>element's style as a dashed border displayed at the bottom of the text:
Example
<div class="container">
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up an abbreviation or acronym:</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
Try it yourself »
<blockquote>
For quoted content, you can add the<blockquote>to the.blockquoteclass:
Example
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
</div>
Try it yourself »
<dl>
Bootstrap 4 defines HTML<dl>element's style as follows:
Example
<div class="container">
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
Try it yourself »
<code>
Bootstrap 4 defines HTML<code>element's style as follows:
Example
<div class="container">
<h1>Code snippets</h1>
<p>You can put some code elements inside the code element:</p>
<p>The following HTML elements:<code>span</code>, <code>section</code>, and<code>div</code>are used to define parts of document content.</p>
</div>
Try it yourself »
<kbd>
Bootstrap 4 defines HTML<kbd>The element's styles are as follows:
Example
<div class="container">
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
Try it Yourself »
<pre>
Bootstrap 4 defines HTML<pre>The element's styles are as follows:
Example
<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
Try it Yourself »
More Typography Classes
The table below provides more examples of Bootstrap 4 typography classes:
| Class | Description | Example |
|---|---|---|
| .font-weight-bold | Bold text | Try it |
| .font-weight-normal | Normal text | Try it |
| .font-weight-light | Lighter text | Try it |
| .font-italic | Italic text | Try it |
| .lead | Make a paragraph stand out | Try it |
| .small | Specify smaller text (85% of the parent element) | Try it |
| .text-left | Left aligned | Try it |
| .text-center | Center aligned | Try it |
| .text-right | Right aligned | Try it |
| .text-justify | Set text alignment; text in paragraphs that exceeds the screen will automatically wrap. | Try it |
| .text-nowrap | Text that exceeds the screen in a paragraph does not wrap. | Try it |
| .text-lowercase | Set text to lowercase | Try it |
| .text-uppercase | Set text to uppercase | Try it |
| .text-capitalize | Set the first letter of each word to uppercase | Try it |
| .initialism | Displays text in the <abbr> element in a small font and can convert lowercase letters to uppercase. | Try it |
| .list-unstyled | Removes the default list style and left-aligns list items (in <ul> and <ol>). This class only applies to direct child list items. (If you need to remove nested list items, you need to apply this style to the nested list.) | Try it |
| .list-inline | Place all list items on the same line | Try it |
| .pre-scrollable | Make the <pre> element scrollable. The maximum height of the code block area is 340px. Once it exceeds this height, a scrollbar will appear on the Y-axis. | Try it |