Bootstrap 5 Typography Inline text elements

Last Updated : 07 Dec, 2022

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= 
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          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= 
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          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>