Skip to content
Related Articles
Open in App
Not now

Related Articles

BootStrap 5 Typography Customizing Headings

Improve Article
Save Article
  • Last Updated : 09 Dec, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!