Web Programming TutorialsLearn about the Typography Features of Bootstrap v4

Learn about the Typography Features of Bootstrap v4

Typography
Bootstrap v4 includes simple and effortlessly adapted typography for headings, body text, lists, footer blockquote and much more. The following are the contents under typography.

  • Bootstrap Headings: – All existing HTML headings, <h1> through <h6>, are available which have the following dimensions as shown in the table below. In Bootstrap v4, the class .h1 through .h6 are available, with which we can match the font styling of a heading. However, we cannot use the associated HTML element with these classes.

S No.

Bootstrap class Heading

Dimensions

1.

h1. Bootstrap heading

Semi-bold 2.5rem (40px).

2

h2. Bootstrap heading

Semi-bold 2rem (32px).

3.

h3. Bootstrap heading

Semi-bold 1.75rem (28px)

4.

h4. Bootstrap heading

Semi-bold 1.5rem (24px)

5.

h5. Bootstrap heading

Semi-bold 1.25rem (20px)

6.

h6. Bootstrap heading

Semi-bold 1rem (16px).

Example on Bootstrap Heading
In the following example, we are using .h1 to .h6 classes inside the html paragraph tag to create the font and design of the text as that of traditional html headings without associating these classes with the HTML element.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<!-- Bootstrap 4 alpha CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"
	integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj"
	crossorigin="anonymous">
<title>Bootstrap Heading</title>
</head>
<body>
	<br>
	<br>
	<p class="h1">This h1 Bootstrap heading.</p>
	<p class="h2">This h2 Bootstrap heading.</p>
	<p class="h3">This h3 Bootstrap heading.</p>
	<p class="h4">This h4 Bootstrap heading.</p>
	<p class="h5">This h5 Bootstrap heading.</p>
	<p class="h6">This h6 Bootstrap heading.</p>
	<br>
	<br>
	<!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in -->
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Output: When we execute above HTML code, we obtain the following output.
bootstrapheading

  • Customizing headings: – We can create our customized headings by using the included utility classes which help to recreate the small secondary heading text. This feature actually belongs to Bootstrap 3, which can be used in Bootstrap v4 as well.

Example on Customized Heading
In the following example, we are using .text-muted class inside the html heading to generate the fancy headings in order to experiment different customized heading designs.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<!-- Bootstrap 4 alpha CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"
	integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj"
	crossorigin="anonymous">
<title>Customized Heading</title>
</head>
<body>
	<br>
	<br>
	<h3>
		H3 display heading <small class="text-muted">with faded
			secondary text</small> Looks Fancy.
	</h3>
	<br>
	<br>
	<!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in -->
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Output: When we execute above HTML code, we obtain the following output.
customizedheadings

  • Display headings: – In Bootstrap v4, we can use display headings which are different from the traditional heading elements. Display heading are used as a stand out heading which is a larger, and slightly more opinionated in heading style.

Example on Display Heading
In the following example, we are using a class for different sizes of the display heading in collaboration with the html headings h1 to h6 which collectively provide a completely different display heading to add to our current web page design.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<!-- Bootstrap 4 alpha CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"
	integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj"
	crossorigin="anonymous">
<title>Display Heading</title>
</head>
<body>
	<br>
	<br>
	<h1 class="display-1">Display Heading 1</h1>
	<h2 class="display-2">Display Heading 2</h2>
	<h3 class="display-3">Display Heading 3</h3>
	<h4 class="display-4">Display Heading 4</h4>
	<h5 class="display-3">Display Heading 5</h5>
	<h6 class="display-4">Display Heading 6</h6>
	<br>
	<br>
	<!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in -->
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Output: When we execute above HTML code, we obtain the following output.
displayheading

Smaller Footprint
Naming a source: – We can add footer blockquote as <footer class=”blockquote-footer”> which can be used to identify the source. Further, we can wrap the name of the source work in cite as shown in the following example.

Example on Reversing Footer Blockquote
In the following example, we are using .blockquote-reverse class to left align the footer blockquote.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<!-- Bootstrap 4 alpha CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"
	integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj"
	crossorigin="anonymous">
<title>Footer BlockQuote Heading</title>
</head>
<body>
	<br>
	<br>
	<blockquote class="blockquote">
		<p class="mb-0">Failure is the stepping stone of Success</p>
		<footer class="blockquote-footer">
			Famous person in <cite title="Source Title">Motivational Quotes</cite>
		</footer>
	</blockquote>
	<br>
	<br>
	<!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in -->
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Output: When we execute above HTML code, we obtain the following output.
blockquote

Reverse layout
We can add .blockquote-reverse class for a blockquote in order to make footer blockquote as right-aligned content.

Example on Reversing Footer Blockquote
In the following example, we are using .blockquote-reverse class to right align the footer blockquote.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<!-- Bootstrap 4 alpha CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"
	integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj"
	crossorigin="anonymous">
<title>Reverse Footer BlockQuote Heading</title>
</head>
<body>
	<br>
	<br>
	<blockquote class="blockquote-reverse">
		<p class="mb-0">Failure is the stepping stone of Success</p>
		<footer class="blockquote-footer">
			Famous person in <cite title="Source Title">Motivational Quotes</cite>
		</footer>
	</blockquote>
	<br>
	<br>
	<!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in -->
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Output: When we execute above HTML code, we obtain the following output.
reverselayout
Source code for the the typography features of Bootstrap v4

Conclusion
In this chapter, we discussed about the typography features of Bootstrap v4 for headings, body text, lists, and footer blockquote – both left and right aligned along with suitable examples. Such robust and pretty features of Bootstrap v4 make it’s a unique front end development framework which makes it a very popular framework and is widely used by many organizations.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -