Bootstrap Typography
Typography is the art and technique of arranging and styling content on a web page. It deals with the selection of fonts, size, color, layout, alignment, etc which affect web designing. Bootstrap 5 provides various classes to style the contents of the web page from styling heading, display to aligning. Bootstrap provides an easy way to customize the contents.
Heading
All HTML headings from <h1> to <h6> are available in bootstrap. You can use .h1 to .h6 classes to provide heading in bootstrap. The heading classes can be customized with bootstrap utility class.
Example: Adding custom styles to bootstrap headings
Here in the following example, we have added the .bg-info class to change the background color of the heading. The color of the text has been changed using the .text-primary utility class. Further, we have a .text-muted class to create a small secondary heading.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="h1 bg-info">h1. Bootstrap heading</div>
<div class="h2 text-primary">h2. Bootstrap heading</div>
<div class="h3 text-secondary">h3. Bootstrap heading</div>
<div class="h4 ">h4. Bootstrap heading</div>
<div class="h5">h5. Bootstrap heading</div>
<div class="h6">h6. Bootstrap heading</div>
<h2> heading<small class="text-muted">faded secondary text</h2>
</body>
</html>
Output:
Here is the output of the above program.
Display Headings
Getting bored with the traditional heading styles. Use a slightly large and more opinionated heading style using display headings.
Example: Adding display headings
Use .display-* class within heading tag to add display heading. Similar to traditional heading there are 6 types of display heading.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<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>
</body>
</html>
Output:
Here is the output of the above program
Inline Text Elements
You may be aware of inline tags used in HTML. Now let's see the classes used to style the text in bootstrap.
- .mark class represents text which is marked or highlighted.
- .small class represents side comments and small prints like copyright.
- .text-decoration-underline will underline the textual contents.
- .text-decoration-line-through will represent an element that is no longer relevant or accurate.
Example: Use bootstrap classes to inline text elements
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<p class="mark">.mark class represents text which is marked or highlighted.</p>
<p class="text-decoration-underline">text-decoration-underline will underline the textual contents.</p>
<p class="text-decoration-line-through">text-decoration-line-through will represent an element that is no longer relevant or accurate.</p>
<p class="small">.small class represents side comments and small prints like copyright.</p>
</div>
</body>
</html>
Output
Here is the output of the above program.
Text Utility class
There are several classes used in text utility classes like text alignment, text transformation, font size, and font-weight, text-decoration. We will not be able to discuss all the classes here but take a small example to use text classes to change the font.
Example: Adding fonts to the text
The font of the text can be customized with font-weight and font-style classes. Use .fst-* for font-style utility classes whereas .fw-* for font-weight utility classes. Here we have customized text with bold and italic fonts.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Bootstrap Lists
- Add list items within .list-unstyled class.
- To add inline list use classes like .list-inline and .list-inline-item.
- For description list alignment, align terms and descriptions horizontally use grid classes.
- Use .text-truncate class to truncate the next text with an ellipsis.
Example: Adding different types of lists.
Here we have taken an example to show an unstyled, inline list and description list. Use the appropriate class and HTML tags to include this list.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h4 class="text-decoration-underline"> Unstyled list </h4>
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Nested lists:
<ul>
<li>Using some bullerts</li>
<li>And some text</li>
</ul>
</li>
<li>some random text.</li>
</ul>
<h4 class="text-decoration-underline"> Inline list </h4>
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
<h4 class="text-decoration-underline"> Description List </h4>
<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 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">I heard you like definition lists.</dd>
</dl>
</dd>
</dl>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
So there are various classes used to customize the typography of a webpage. Add font styles, list styles, text utility classes, headers, modified display header to enhance the contents of the web page. Bootstrap provides easy, time-saving, user-friendly ways to enhance the typography of the webpage.
