Introduction in Bootstrap Typography
Typography is one of the latest features of bootstrap. It’s especially used for styling and formatting text elements. By using the typography feature of bootstrap someone able to create headings, paragraphs, some other inline elements, and lists. Basically bootstrap uses 1rem (16px) as font size including line-height remains 5. By default font families used by bootstrap are sans-serif, Arial, It sets how the contents should display on the body, background color on the body, uses font size and line-height to create margins, paddings, etc.
Features of Bootstrap Typography
Below are the different features of typography as follows:
HTML headings are divided into <h1>to <h6>
<h1>Bootstrap Heading</h1> displayed in font-size
<h2>Bootstrap Heading</h2> displayed in font-size
<h3>Bootstrap Heading</h3> displayed in font-size
<h4>Bootstrap Heading</h4> displayed in font-size
<h5>Bootstrap Heading</h5> displayed in font-size
<h6>Bootstrap Heading</h6> displayed in font-size
By using HTML code it gives output as shown below:
By using Bootstrap typography it styled & formatted using respective classes as shown below :
<h1 class=”h1”>Bootstrap Heading</h1> displayed in font-size
<h2 class=”h2”>Bootstrap Heading</h2> displayed in font-size
<h3 class=”h3”>Bootstrap Heading</h3> displayed in font-size
<h4 class=”h4”>Bootstrap Heading</h4> displayed in font-size
<h5 class=”h5”>Bootstrap Heading</h5> displayed in font-size
<h6 class=”h6”>Bootstrap Heading</h6> displayed in font-size
The output of the above code using Bootstrap Typography are as follows:
4.5 (1,071 ratings)
2) Responsive Headings
Responsive headings are one of the best things one can design using typography. these are the elements in which text gets adjusted automatically by using class responsive as per 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>
So it will show output as:
You can check the same text on the different devices also as well as by resizing the browser it will show changes.
This tag is used to create lighter, smaller, secondary text in your heading. By default, it sets to 85% of the size of the parent heading.
<h5>Example heading <small>secondary text</small></h5>
h5 heading secondary text
This tag is used to highlight text.
<p>This is used to <mark>highlight</mark> text.</p>
This tag is used 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.
<p>There are so many countries in the world.<abbr>India</abbr>is the best country</p>
Indicates deleted text
<p>This tag is used to show <del>deleted text</del>.</p>
This tag is used to show.
The blockquote element is used to present content from another source.
<p>The blockquote element is used to present content from another source:</p>
<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>
The blockquote element is used to present content from another source:
Very little is needed to make a happy life; it is all within yourself, in your way of thinking. Life is like playing the violin in public and learning the instrument as one goes on.
This tag is used to display a description list.
<p>The dl element indicates a description list:</p>
The dl element indicates a description list:
The inline statement of code should be clubbed together in the code element.
<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
The following HTML elements: span, section, and div defines a section in a document.
10) Contextual Colors
This is nothing but a different class that is used to convey meaning using different colors.
It’s having different classes like .text-muted, .text-info, .text-primary, .text-success, .text-warning , .text-danger.
<p>Use the contextual classes to provide "meaning through colors":</p>
<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>
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Where we can Use
- Most of the web designers prefer to use bootstrap typography for better look and feel of text format.
- It’s especially used while styling and formatting text content.
- Most of the time there is an issue regarding text responsiveness. Text size gets varied as per different devices. So this issues get clarified by using the bootstrap typography feature.
- Bootstrap Typography is customized in a simple manner to present attractively to the end-user.
- Such text elements on a web page will always be rendered through the link to the Bootstrap 4 style sheet in the same way except these elements are overridden by other style classes.
- The Bootstrap provides developers with convenient typography features to make it easy for them to create headings, paragraphs, lists and other inline elements that would be appealing to the readers.
- As per all details given in above content, the different typography features of Bootstrap for headings, blockquote, Lead Text, Marked Text, Abbreviations with suitable examples.
- Such robust and pretty features of Bootstrap make it very popular and unique front end development framework which is widely used by many organizations.
- The bootstrap comes with all the typography tags that we want styled for, everything from an <address> tag to <h1> and the whole heading hierarchy.
This is a guide to Bootstrap Typography. Here we discuss different features of Bootstrap Typography like headings, blockquote, abbreviation, mark etc. You may also look at the following articles to learn more –