Bootstrap5 Typography Inline text elements will get an output like HTML tags output without the help of HTML tags, instead, Inline text element classes are used.
Inline text elements Classes:
- mark: This class is used to highlight or mark the element. This works like <mark>( HTML) tag.
- small: This class is used to make elements small. This works like <small>( HTML) tag.
- text-decoration-underline: This class is used to create an underline. This works like <u>( HTML) tag.
- text-decoration-line-through: This class represents elements that are no longer relevant or accurate. This works like <s>( HTML) tag.
Syntax:
<div class="Typography Inline text elements Class">
...
</div>Example 1: In this example, we display the Typography Inline Text elements by specifying the above-mentioned classes.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous">
<title>Inline text elements</title>
</head>
<body class="m-3">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>
BootStrap5 Typography Inline text elements
</h3>
<div>
My name is <b class="mark">ram</b>
</div>
<div class="small">
this is small text
</div>
<div class="text-decoration-underline">
This is text about underline
</div>
<div class="text-decoration-line-through">
My name is not rohan
</div>
</body>
</html>
|
Output:
Example 2: This is another example that describes the Typography Inline text elements by implementing the above-mentioned class with the paragraph.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous">
<title>Inline text elements</title>
</head>
<body class="m-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>
BootStrap 5 Typography Inline text elements
</h3>
<div>
This is <b class="mark">JAVA</b> tutorial
</div>
<div class="small">
<b class="text-decoration-underline">
Java is an object-oriented programming language.
</b>
OOP makes the complete program simpler by dividing
it into a number of objects. The objects can be used
as a bridge to have data flow from one function to
another. We can easily modify data and function as
per the requirement.Hence learning about OOPs concepts
makes a very important step in learning Java.
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/content/typography/#inline-text-elements