ApiDemos™Bootstrap5 Typography
Bootstrap 5 default settings
Bootstrap 5 defaults to font-size of 16px and line-height of 1.5.
The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.
In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px).
<h1> – <h6>
The style of all HTML headers (h1 to h6) is defined in Bootstrap. See the following example：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>Font size will change with the screen</p>
<h1>h1 Bootstrap title</h1>
<h2>h2 Bootstrap title</h2>
<h3>h3 Bootstrap title</h3>
<h4>h4 Bootstrap title</h4>
<h5>h5 Bootstrap title</h5>
<h6>h6 Bootstrap title</h6>
</div>
</body>
</html>Output:
You can also use the .h1 to .h6 classes to style elements: .h1 to .h6.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>The font size will change as the screen changes.</p>
<p class="h1">h1 Bootstrap title</p>
<p class="h2">h2 Bootstrap title</p>
<p class="h3">h3 Bootstrap title</p>
<p class="h4">h4 Bootstrap title </p>
<p class="h5">h5 Bootstrap title</p>
<p class="h6">h6 Bootstrap title</p>
</div>
</body>
</html>Output:
Display Title Category
Bootstrap also provides four Display classes to control the style of headers: .display-1, .display-2, .display-3, .display-4.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Display header by apidemos.com</h1>
<p>Display headers can be output in a larger and bolder font style.</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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
</div>
</body>
</html>Output:
<small>
In Bootstrap 5 the HTML <small> element is used to create text with smaller font sizes and lighter colors:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Smaller text headers</h1>
<p>The small element is used for text with smaller font sizes and lighter colors:</p>
<h1>h1 Title <small>Subheading</small></h1>
<h2>h2 Title <small>Subheading</small></h2>
<h3>h3 Title <small>Subheading</small></h3>
<h4>h4 Title <small>Subheading</small></h4>
<h5>h5 Title <small>Subheading</small></h5>
<h6>h6 Title <small>Subheading</small></h6>
</div>
</body>
</html>Output:
<mark>
Bootstrap 5 defines the <mark> tag and the .mark class as having a yellow background and some inner margins:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Highlighted text</h1>
<p>Use the mark element (or .mark class) to <mark>highlight</mark> text.</p>
</div>
</body>
</html>Output:
<abbr>
Bootstrap 5 defines HTML <abbr> elements with a dashed border that appears at the bottom of the text:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Abbreviations by apidemos.com</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>
</body>
</html>Output:
<blockquote>
For references you can add the .blockquote class to <blockquote>:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Blockquotes by apidemos.com</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>
</body>
</html>Output:
<dl>
Bootstrap 5 defines the style of the HTML <dl> element as follows:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 Demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Description Lists by apidemos.com</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>
</body>
</html>Output:
<code>
Bootstrap 5 defines the style of the HTML <code> element as follows:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Code Snippets by apidemos.com</h1>
<p>Inline snippets of code should be embedded in the code element:</p>
<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>
</body>
</html>Output:
<kbd>
Bootstrap 5 defines the style of the HTML <kbd> element as follows:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Keyboard Inputs by apidemos.com</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>
</body>
</html>Output:
<pre>
Bootstrap 5 defines the style of the HTML <pre> element as follows:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Multiple Code Lines by apidemos.com</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>
</body>
</html>Output:
More typesetting categories
The following table provides more examples of Bootstrap5 typography classes：
| Class name | Description |
|---|---|
| .lead | Make paragraphs stand out |
| .small | Specify smaller text (85% of the parent element) |
| .text-start | Left Alignment |
| .text-center | Centering |
| .text-end | Right Alignment |
| .text-justify | Set text alignment, paragraph beyond the screen part of the text automatically line feed |
| .text-nowrap | No line breaks in paragraphs beyond the screen |
| .text-lowercase | Set text lowercase |
| .text-uppercase | Set text uppercase |
| .text-capitalize | Set word initial capitalization |
| .initialism | The text displayed in the <abbr> element is displayed in small font and can be converted from lowercase to uppercase |
| .list-unstyled | Removes the default list style with left-aligned list items (in <ul> and <ol>). This class only applies to directly sub-list items (if you need to remove nested list items, you need to use this style in the nested list) |
| .list-inline | Place all list items on the same line |