BootStrap 5 Typography Customizing Headings
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 = "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" crossorigin = "anonymous" > </ head > < body class = "m-2" > < h1 class = "text-success" > w3wiki </ 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 = "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" crossorigin = "anonymous" > </ head > < body class = "m-2" > < h1 class = "text-success" > w3wiki </ 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
Contact Us