Learn about Typography in Bootstrap 4

0
4036
Typography

In this article, we are going to learn about the Typography feature of Bootstrap 4. Typography refers to the various styles present in Bootstrap 4 style sheets which define how various text elements will appear on the web page. It shows how certain text elements are rendered when we use Bootstrap without including the style classes. Such text elements on a web page will always be rendered through the link to Bootstrap 4 style sheet in the same way except these elements are overridden by other style classes.

Body Text
The following are the default typography for the body text in Bootstrap 4.

  • The global default font-size for the body text in Bootstrap 4 is 16px which is applied to the <html> element.
  • Body text’s line-height of 1.5 is applied to the <body> element. The font-size of 1rem is applied to the <body> element in Bootstrap 4.
  • The default font-family is “Helvetica Neue”, Helvetica, Arial, sans-serif in Bootstrap 4.
  • The <p> elements have a bottom margin of 1rem.

These all the default typography for the text elements on the web page that uses Bootstrap 4. All of these styles can be changed with the use of style classes in Bootstrap 4.

The following program demonstrates the page default in Bootstrap 4.0.0.

<!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 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css">
<title>Page Default</title>
</head>
<body>
	This is a Bootstrap 4.0.0 page default.
	<!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
</body>
</html>

Output
When we browse the above HTML code, we can see the Bootstrap 4.0.0 page default as shown below. The web font for the text “This is a Bootstrap 4.0.0.0 page default.” is “Segoe UI” i.e. for windows operating system.

BodyText

Headings

  • 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 similar to 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 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 will 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 the class for different size of the display heading in collaboration with html headings h1 to h6 which collectively provide a completely different display heading to add stars 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

Lead Text
If we want to make a paragraph that should stand out, then we can use Bootstrap’s .lead class.

Marked Text
We can use the HTML <mark> element to represent text as marked or highlighted for reference purposes.

Abbreviations
We can use the <abbr> element to represent an abbreviation or acronym. Also, we can use the title attribute to provide an expansion of the abbreviation. Therefore, abbreviations in collaboration with a title attribute will be rendered with a light dotted bottom border and a help cursor on hover.

Initialism
We can use the Bootstrap .initialism class to render the abbreviation in a slightly smaller font size. Let’s see the demonstration in the following example.

Example to demonstrate Lead Text, Marked Text, Abbreviations, and Initialism

<!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>Text Typography</title>
</head>
<body>
<br><b>Lead Text</b><br>
<p class="lead">
This is an example of article lead — that stands out at the beginning of an article.
</p>
<p>
This is a paragraph with the normal text and size.
</p>
<br><b>Marked Text</b><br>
<p>This is an example of <mark>Marked text</mark>.</p>
<br><b>Abbreviations</b><br>
<abbr title="Masters Of Technology">Mtech.</abbr>
<br><br><b>Initialism</b><br>
<abbr title="Business Process Outsourcing" class="initialism">BPO</abbr> is a great job sector.
	<!-- 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 will execute the above HTML code, we get the following output.

Text Typography

Blockquote – 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

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 the above HTML code, we can obtain the following output.

Reverselayout

Code

In Bootstrap 4, the <code> element is rendered as a distinct text which is demonstrated in the following example.

Keyboard Input

In Bootstrap 4, the <kbd> element is rendered as a white bold text with black background which is demonstrated in the following example.

Preformatted Text

In Bootstrap 4, the <pre> element is rendered as demonstrated in the following example.

Sample Text

In Bootstrap 4, the <samp> element is rendered as demonstrated in the following example.

Variables

In Bootstrap 4, the <var> element is rendered as demonstrated in the following example.

Example to demonstrate Code, Keyboard Input, Preformatted Text, Sample Text, and Variables

 

<!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>Text Typography</title>
</head>
<body>
<br><b>Code</b><br>
The <code>code element</code> is a web element in HTML5.
<br><br><b>Keyboard Input</b><br>
To save the document on windows, press <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>
<br><br><b>Pre formatted text</b><br>
<pre>This is an example of
Pre-formatted text
   by using the HTML pre tag. Using such tag the browser will
      display all white space
in the format  it was entered.
</pre>
<br><b>Sample text</b><br>
Failure is the <samp>Stepping stone</samp> of success!
<br><br><b>variables</b><br>
<var>E</var> = <var>m</var> <var>c</var><sup>2</sup>
	<!-- 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 will execute the above HTML code, we will observe the following output.

Text Typography2

Source code for Bootstrap 4 -Typography is here different typography features of Bootstrap v4

Conclusion: –
In this chapter, we discussed the different typography features of Bootstrap v4 for headings, body, blockquote, Lead Text, Marked Text, Abbreviations, Initialism, Code, Keyboard Input, Preformatted Text, Sample Text, and Variables with suitable examples. Such robust and pretty features of Bootstrap v4 make it very popular and unique front end development framework which is widely used by many organizations.

LEAVE A REPLY

Please enter your comment!
Please enter your name here