Bootstrap Monospace and Code Styling

Bootstrap applies clear default styles to HTML code elements, making it easy to present inline code, blocks of code, keyboard shortcuts, and sample output in documentation and tutorial sites.

Inline Code

Wrap inline code in <code> — Bootstrap styles it with a monospace font, light red color, and a subtle background.

Code Blocks

For multi-line code, wrap a <code> inside a <pre> element. The .pre-scrollable class adds a max-height with scroll for long blocks.

Keyboard and Variables

<kbd> renders keyboard shortcuts in a dark badge style. <var> renders variable names in italic. <samp> renders sample output.

Example

<!-- Inline code -->
<p>Use the <code>console.log()</code> method to debug.</p>

<!-- Code block -->
<pre class="bg-dark text-white p-3 rounded"><code>function hello() {
  return "world";
}</code></pre>

<!-- Keyboard shortcut -->
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

<!-- Variable -->
<p>The variable <var>x</var> stores the count.</p>

HTML

Full Editor

Pro Tip

Add class="bg-dark text-white p-3 rounded" to <pre> elements for a code-editor look without any external syntax highlighter.

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned