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