Bootstrap 4 – Text
Default Settings of Text or Typography in Bootstrap 4:
By default, the font-size that Bootstrap 4 is of 16px, and the line – height is 1.5.
By default, the font-family is “Helvetica Neue”, Helvetica, Arial, sans-serif.
In addition to that, all the <p> elements have margin-top of 0 and the margin-bottom is around 1 rem that is 16px by default.
Headings in Bootstrap 4:
Bootstrap 4 provides six styles of headings. All the headings have different border font -weight and font-size. The headings are given below:
<h1> – 2.5 rem or 40 px
<h2> – 2 rem or 32 px
<h3> – 1.75 rem or 28 px
<h4> – 1.5 rem or 24 px
<h5> – 1.25 rem or 20 px
<h6> – 1 rem or 16 px
Sample Code to explain headings in Bootstrap 4:
The Output for this will be:
Display Headings in Bootstrap 4:
The Display headings in Bootstrap 4 can be used to create more noticeable headings than the normal ones i.e., the larger font-size and lighter font-weight, and there are four classes to select from which are:
.display-1, .display-2, .display-3, .display-4
Sample Code for Display Heading in Bootstrap 4:
The Output for the above code will be:
<small> Element in Bootstrap 4:
The <small> Element in Bootstrap 4 can be used to create lighter and secondary text in any heading.
Sample Code for <small> Element in Bootstrap 4:
The Output for the above code will be:
<abbr> Element in Bootstrap 4:
The <abbr> Element in Bootstrap 4 helps in creating a dotted border bottom.
Sample Code for <abbr> Element in Bootstrap 4:
The Output for the above code will be:
<blockquote> Element in Bootstrap 4:
The .blockquote class is to be added to <blockquote> in order to quote the blocks of content from another source.
Sample Code for <blockquote> Element in given below:
The Output for the above code will be:
<mark> Element in Bootstrap 4:
In Bootstrap 4, the HTML <mark> element contains a yellow background color and some padding. The <mark> element can be used to highlight the text in a web page.
Sample code for <mark> Element is given below:
The Output for the following code will be:
<kbd> Element in Bootstrap 4:
The <kbd> element in Bootstrap 4 can be used to show the input that is typically entered via the keyboard.
Sample Code for <kbd> Element in Bootstrap 4:
The Output for the above code is given below:
<code> Element in Bootstrap 4:
<code> Element in Bootstrap 4 can be used to embed the inline snippets of code in the code element.
Sample Code for <code> Element in Bootstrap 4:
The Output for the above code will be:
<dl> Element in Bootstrap 4:
The <dl> Element in Bootstrap 4 can be used to create a description list. The description list is very useful because it can be used to list items in a web page.
Sample Code for <dl> Element in Bootstrap 4:
The Output of the above code will be:
