Updated July 3, 2023
Introduction to Bootstrap Typography
Typography is one of the latest features of bootstrap. It’s mainly used for styling and formatting text elements. Using the typography feature of bootstrap, someone can create headings, paragraphs, other inline elements, and lists. Bootstrap uses 1rem (16px) as font size, including line height, and remains 5. By default, font families used by bootstrap are sans-serif and Arial; it sets how the contents should display on the body, the background color on the body, and uses font size and line height to create margins, paddings, etc.
Features of Bootstrap Typography
Below are the different features of typography:
1. Headings
HTML headings are divided into <h1>to <h6>
<h1>Bootstrap Heading</h1>
<h2>Bootstrap Heading</h2>
<h3>Bootstrap Heading</h3>
<h4>Bootstrap Heading</h4>
<h5>Bootstrap Heading</h5>
<h6>Bootstrap Heading</h6>Output:
By using Bootstrap typography, it is styled & formatted using respective classes as shown below:
<h1 class="h1">Bootstrap Heading</h1>
<h2 class="h2">Bootstrap Heading</h2>
<h3 class="h3">Bootstrap Heading</h3>
<h4 class="h4">Bootstrap Heading</h4>
<h5 class="h5">Bootstrap Heading</h5>
<h6 class="h6">Bootstrap Heading</h6>Output:
2. Responsive Headings
Responsive headings are one of the best things one can design using typography. The class “responsive” automatically adjusts the text in these elements according to the device size. So one can easily see the same text in an appropriate way on different devices.
Just add class responsive in your header tag as follows:
<h5 class="h5-responsive"> Responsive Header</h5>Output:
You can check the same text on different devices and resize the browser; it will show changes.
3. <small>
This tag creates lighter, smaller, secondary text in your heading. By default, it sets to 85% of the size of the parent heading.
Example:
<h5>Example heading <small>secondary text</small></h5>Output:
4. <mark>
Developers use this tag to highlight text.
Example:
<h2>Bootstrap Typography</h2>
<p>This is used to <mark>highlight</mark> text.</p>Output:
5. <abbr>
Developers use this tag to mark an abbreviation. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
Example:
<p>There are so many countries in the world <abbr title="ind">India</abbr> is the best country</p>Output:
6. <del>
Indicates deleted text
Example:
<p>This tag is used to show <del>deleted text</del>.</p>Output:
7. <blockquote>
The blockquote element is used to present content from another source.
Example:
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote>
<p>Very little is needed to make a happy life; it is all within yourself, in your way of thinking.Life is like playing a violin in public and learning the instrument as one goes on. </p> </blockquote>Output:
8. <dl>
This tag is used to display a description list.
Example:
<p>The dl element indicates a description list:</p>
<dl>
<dt>Bread</dt>
<dd>- White</dd>
<dd>- Brown</dd>
<dt>Cold Drinks</dt>
<dd>- Pepsi</dd>
</dl>Output:
9. <code>
The inline statement of code should be clubbed together in the code element.
Example:
<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>Output:
10. Contextual Colors
This is a different class used to convey meaning using different colors. It has different classes like .text-muted, .text-info, .text-primary, .text-success, .text-warning, .text-danger.
Example:
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>Output:
Where we can Use
Here, we will explore the various use cases for the progress tag.
- Most web designers prefer bootstrap typography for a better look and feel of the text format.
- Developers mainly use it for styling and formatting text content.
- Most of the time, there is an issue regarding text responsiveness. Text size gets varied per different device. So these issues get clarified by using the bootstrap typography feature.
- Bootstrap Typography customizes the presentation of text to make it visually appealing to the end-user.
- The text elements on a web page will render through the link to the Bootstrap 4 style sheet in the same way, except other style classes can override these elements.
- Bootstrap provides developers with convenient typography features to make it easy for them to create headings, paragraphs, lists, and other inline elements that would appeal to the readers.
Conclusion
As per all details given in the above content, the different typography features of Bootstrap for headings, blockquote, Lead Text, Marked Text, and Abbreviations with suitable examples. Bootstrap’s robust and pretty features make it a popular and unique front-end development framework that many organizations widely use. The bootstrap comes with all the typography tags we want styled for, everything from a <address> tag to <h1> and the whole heading hierarchy.
Recommended Articles
We hope that this EDUCBA information on “Bootstrap Typography” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
