Signup/Sign In

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.

Heading

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

Display headings

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.

Inline text class

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.

Text utility class

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.

List style

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.