Open In App

Bootstrap 5 Typography Responsive font sizes

Improve
Improve
Like Article
Like
Save
Share
Report

In Bootstrap 5 Typography, the font size is responsive dynamically to the different devices and viewport sizes. In Bootstrap  Responsive Font Sizes unit resizing engine is used to resize font sizes. Responsive sizing is applied to classes that deal with the sizing of the text like heading classes and display heading classes and not to typography lead, inline text elements, etc. 

Bootstrap 5 Typography Responsive font sizes classes: No special classes are used in Typography Responsive font sizes. You can customize the component using the classes of Typography.

Syntax:

<p class="h1">...</p>

Example 1: This code example shows how the Typography Responsive font sizes  work on headings and display headings:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <link href=
        rel="stylesheet">
    <script src=
    </script>
</head>
  
<body class="ms-4">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h4 class="mb-4">
        Bootstrap 5 Typography Responsive font sizes
    </h4>
    <p class="h1">This is a h1 Heading</p>
    <p class="h2 text-secondary">
        This is a h2 Heading</p>
    <h1 class="display-1">
        This is Display 1 heading</h1>
    <h2 class="display-2 text-secondary">
        This is Display 1 heading of h2
    </h2>  
</body>
</html>


Output:

BootSraep 5 Typography Responsive font sizes

Example 2: This code example shows how the Typography Responsive font sizes  work on Display headings and doesn’t influence Lead and Inline text elements:

HTML




<!doctype html>
<html lang="en">
  
<head>
      <link href=
          rel="stylesheet">
      <script src=
      </script>
</head>
  
<body class="ms-4">
      <h1 class="text-success">
          GeeksforGeeks
     </h1>
      <h4 class="mb-4">
        Bootstrap 5 Typography Responsive font sizes
    </h4>
    <h1 class="display-1">        
        This is Display 1 heading
    </h1>
    <h2 class="display-2 text-secondary">
        This is Display 1 heading of h2
    </h2>
    <p class="lead">
        This is a paragraph with lead class.
        Responsive font sizing doesn't work on this paragraph.
    </p>
    <p><u>
        This is underlined text and the Responsive 
        font sizing doesn't work on it.</u>
    </p>
    <p>
        <em>
            This italicized text and the Responsive 
            font sizing doesn't work on it.
        </em>
    </p>  
</body>
</html>


Output:

BootSraep 5 Typography Responsive font sizes

Reference: https://getbootstrap.com/docs/5.0/content/typography/#responsive-font-sizes 



Last Updated : 30 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads