Typography is another concept within Bootstrap that helps in giving styles and formats to text contents. By default, Bootstrap 4 uses 1rem(16px) as font size and the line-height remains 1.5. It keeps its default font-family as "Helvetica Neue," where Helvetica, sans-serif, Arial are used. Furthermore, all <p> (paragraph) elements have margin-top set to 0 and margin-bottom set to 1rem(16px).
Default Font Sizes in Bootstrap 4
In Bootstrap 4, the typography font size is based on a rem unit of measurement, which is relative to the root HTML element. The following table describes the font size in pixels compared to the rem.
HTML Tag / CSS Class | Font Size in rem | Font Size in Pixel |
---|---|---|
h1, .h1 | 2.5rem | 40px |
h2, .h2 | 2rem | 32px |
h3, .h3 | 1.75rem | 28px |
h4, .h4 | 1.5rem | 24px |
h5, .h5 | 1.25rem | 20px |
h6, .h6 | 1rem | 16px |
.display-1 | 6rem | 90px |
.display-2 | 5.5rem | 82.5px |
.display-3 | 4.5rem | 67.5px |
.display-4 | 3.5rem | 52.5px |
p | 1rem | 16px |
In the "rem" unit, if you are changing its size to Root, it will affect the size of all the elements of the defined page using the "rem" unit.
Where Bootstrap's Typography Can Be Applied?
Typography can be applied for creating customized:
- Headings and Subheadings within your web content.
- Text as well as Paragraph's font color, font face, and alignment.
- Ordered and Unordered listings.
- Any other display texts.
Headings in Bootstrap 4
There are default heading tags in HTML, and Bootstrap implements styles on it. The heading is the more bold and increased font size in bootstrap 4 than the default HTML headings.
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
.h1 through .h6 classes are also available when you want to match the font style of a title but can not use the corresponding HTML element.
<h1 class="h2"> Heading 1 in the size of Heading 2 </h1>
<p class="h3"> Some Heading texts </p>
Subheadings in Bootstrap 4
The inline subheading concept will add an additional heading, which will act as a subheading for the main <hN> heading (where 'N' is any number between 1 to 6). For this, you have to add the <small> tag as a nested tag within the head element to get the formatting of the subheading, which you can see in the example below:
<h1> Heading 1 <small>SubHeading 1</small> </h1>
<h2> Heading 2 <small>SubHeading 2</small> </h2>
<h3> Heading 3 <small>SubHeading 3</small> </h3>
<h4> Heading 4 <small>SubHeading 4</small> </h4>
<h5> Heading 5 <small>SubHeading 5</small> </h5>
<h6> Heading 6 <small>SubHeading 6</small> </h6>
Display headings in Bootstrap 4
Display headings are different from traditional headings elements; you can use it when you need to display a significant, slightly more opinionated title.
There are four types of display heading classes available in Bootstrap 4.
<h1 class="display-1">Display Heading 1</h1>
<h1 class="display-2">Display Heading 2</h1>
<h1 class="display-3">Display Heading 3</h1>
<h1 class="display-4">Display Heading 4</h1>
Lead in Bootstrap 4
Lead is used to add some emphasis to any paragraph content. It can be implemented something like this:
<p> This is normal Text without any lead class not emphasized. </p>
<p class="lead"> Example of Lead class with paragraph showing its use to emphasize text. </p>
Text Colors in Bootstrap 4
There are some reference classes available in Bootstrap 4 that are used to display texts in different colors.
Class Name | Description |
---|---|
.text-primary | This class is used to display texts in blue color. |
.text-secondary | This class can be used for various purposes. |
.text-success | This class can be used for various purposes. |
.text-danger | Red is mostly avoided in most designs because it shows danger or anger. But you can use it according to your design needs. |
.text-warning | This class can be used for various purposes. |
.text-info | This class is used to display texts in blue color, which is different from .text_primary. |
.text-light | This class displays text in light colors that are not white. |
.text-dark | This class can be used for various purposes. |
.text-muted | The information is silent and is used to represent obsolete data. |
.text-white | This class displays text in white. |
Some Other Typography Classes in Bootstrap 4
Here is a list of some other typography classes in Bootstrap 4, which can be used in styling HTML elements.
Class Name | Description |
---|---|
.font-weight-bold | For creating bold text. |
.font-weight-bolder | For creating bolder text. |
.font-italic | For creating italic text. |
.font-weight-light | For creating lightweight text. |
.font-weight-lighter | For creating lighter weight text. |
.font-weight-normal | For creating normal text. |
.small | For creating a smaller text which is comparatively 85% smaller than the size of the parent. |
.text-break | This class helps in preventing long text from breaking design and layout. |
.text-decoration-none | For removing the underline from any hyperlink. |
.text-justify | For creating justified text. |
.text-monospace | For creating mono-spaced text. |
.text-nowrap | For creating no wrap text. |
.text-lowercase | For creating lowercased text. |
.text-reset | For resetting the text color or a link. |
.text-uppercase | For creating uppercased text. |
.text-capitalize | For creating capitalized text. |