Bootstrap sets some standards on typography by changing the way headings, paragraphs, and lists get displayed. By default, the bootstrap will use a font size of 1rem
(16px
) and the line height is 1.5
.
From bootstrap 4 onwards, using default web fonts (Helvetica Neue, Helvetica, and Arial) has been dropped. Instead, bootstrap 4 is using “native font stack” to render the text by selecting the best font-family
for each OS and device.
Let’s see the styling for each element in bootstrap.
The headings in Bootstrap will use the HTML headings <h1>
to <h6>
.
The above bootstrap example will return the result as shown below.
The bootstrap has provided the heading classes .h1
through .h6
to apply the same headings style on other elements.
Following is the example of using headings classes (.h1
through .h6
) on paragraph (<p>
) tags to achieve the same headings style.
The above bootstrap example will return the result as shown below.
In bootstrap, we can use the <small>
tag with .text-muted
class to display the small secondary text in any heading as shown below.
The above bootstrap example will return the result as shown below.
Bootstrap 4 has introduced display headings to show the headings with larger font-size
and lighter font-weight
. The display headings are useful when you need a heading to stand out.
Following are the four different types of display headings available in bootstrap 4.
The above bootstrap example will return the result as shown below.
You need to remember that the display headings are not responsive by default.
As discussed, Bootstrap’s default font size is 1rem
(16px
) and line-height is 1.5
. This size is for the HTML body, as well as for paragraphs assigned with <p> tag. Also, the paragraphs have a bottom margin 1rem
(16px
) by default.
Following is the basic example of creating paragraphs with sample text in bootstrap.
The above example will return the result as shown below.
If you observe the above result, by default bootstrap applied 1rem
(16px
) font-size, and it applied font-family dynamically.
In bootstrap, we can make paragraphs (<p>
) stand out by adding .lead
class like as shown below.
The above example will return the result as shown below.
If you observe the above result, we made a paragraph stand out by applying .lead
class in bootstrap.
In bootstrap, we can format or style the text in different ways same like we do in HTML by applying the different tags like <mark>
, <del>
, <ins>
, etc. like as shown below.
The above example will format the text elements and return the result as shown below.
In bootstrap, we have different classes like .text-left
, .text-center
, .text-right
Etc. available to align the text based on our requirements.
Following is the example of using different text alignment classes to change the alignment of text.
The above example will return the result as shown below.
In bootstrap, we can transform the text from lowercase to uppercase or capitalized by using .text-lowercase
, .text-uppercase
, .text-capitalize
like as shown below.
The above example will return the result as shown below.
lower case text
UPPER CASE TEXT
Capitalized Text
The bootstrap will style the HTML <abbr>
element with a dotted border bottom along with the default style of underline and help cursor to provide the additional context on hover.
Following is the example of HTML <abbr>
element for abbreviations in bootstrap.
The above example will return the result as shown below.
In bootstrap, we can style the quoting blocks from other sources by wrapping the quotes content with <blockquote class=”blockquote”>
element like as shown below.
The above example will return the result as shown below.
In case if you want to add the source of a quote, we can do it by adding <footer>
element with .blockquote-footer
class and wrap the name of the source in <cite>
element like as shown below.
The above example will return the result as shown below.
Even we can change the block quote align either to the left, right, or center by applying .text-left
, .text-center
, .text-right
classes on <blockquote>
element.