Open In App

BootStrap 5 Typography Customizing Headings

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Typography Customizing headings is used to customize the heading without using HTML tags and CSS classes. Use the .text-muted class with <small> tag. 

Typography Customizing headings used tag:

  • small: It is used to create secondary subheadings.

Typography Customizing headings used classes:

  • text-muted: It is used for text color, text-muted fades the text. i.e. text greyed out.

 

Syntax:

<h5>
    ...
    <small class="text-muted">
        ...
    </small>
</h5>

Example 1: The following code shows a customized heading.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Load Bootstrap -->
   <link rel="stylesheet" href=
        crossorigin="anonymous">   
</head>
  
<body class="m-2">
    <h1 class="text-success"> GeeksforGeeks </h1>
    <h3>Bootstrap5 Typography Customizing headings </h3>
    <br>
    <div class="h4">
        dark color......
        <small class="text-muted">
            lighter color(like gray)...
        </small>
    </div>   
</body>
</html>


Output:

 

Example 2: The following code shows another example of some customized heading.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
</head>
<body class="m-2">
    <h1 class="text-success"
        GeeksforGeeks 
    </h1>
    <h3>Bootstrap5 Typography Customizing headings </h3>
    <br>
    <div class="h4">
        JAVA
        <div>
            <small class="text-muted">
                Java is one of the most popular and widely 
                used programming language and platform.
                A platform is an environment that helps
                to develop and run programs written 
                in any programming language.
            </small>
        </div>
    </div>
    <br>
    <div class="h4">
        PYTHON
        <div>
            <small class="text-muted">
                Python is a high-level, general-purpose 
                and a very popular programming language.
                Python programming language (latest 
                Python 3) is being used in web development, 
                Machine Learning applications, along with 
                all cutting edge technology in Software 
                Industry.
            </small>
        </div>
    </div>
    <br>
    <div class="h4">
        CSS
        <div>
            <small class="text-muted">
                CSS (Cascading Style Sheets)is used 
                to apply styles to web pages. Cascading 
                Style Sheets are fondly referred to as 
                CSS. It is used to make web pages 
                presentable. The reason for using
                this is to simplify the process of 
                making web pages presentable.
            </small>
        </div>
    </div>
</body>
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/content/typography/#customizing-headings



Last Updated : 09 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads