Bootstrap 5 Text Monospace

Last Updated : 24 Nov, 2022

Text Monospace is used to change a selection to our monospace font stack with .font-monospace. This font looks like a typewriter print.

Bootstrap 5 Text Monospace Class:

font-monospace: This class is used to change font stack with .font-monospace.

Syntax:

<tag class="font-monospace">...</tag>

Example 1: Below examples illustrate the Bootstrap 5 Text Monospace. In this example, we will use a font-monospace class on the p tag element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link crossorigin="anonymous"
          rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"> 
</head> 
  
<body class=""> 
    <h1 class="text-center text-success"> 
        Geeksforgeeks 
    </h1> 
    <!-- Bootstrap 5 Text Monospace Class used-->
    <p class="text-center font-monospace"> 
        Bootstrap 5 font-monospace used 
    </p> 
</body> 
  
</html>

Output:

Example 2: In this example, we will use Bootstrap 5 Text Monospace class on the one p tag element and leave the other one so that you can understand the difference.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link crossorigin="anonymous"
          rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"> 
</head> 
  
<body class=""> 
    <h1 class="text-center text-success"> 
        Geeksforgeeks 
    </h1> 
    <p> 
        Bootstrap 5 font-monospace not used 
    </p> 
    <p class="font-monospace"> 
        Bootstrap 5 font-monospace used 
    </p> 
</body> 
  
</html>