Bootstrap 5 Text Monospace

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>

Output:

Reference Link: https://getbootstrap.com/docs/5.0/utilities/text/#monospace

Bootstrap 5 Text Monospace

Explore