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=
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=
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:
Bootstrap 5 Text Monospace
Reference Link: https://getbootstrap.com/docs/5.0/utilities/text/#monospace
Recommended Articles
11. Bootstrap 5 Text