Code

Prev Next

Bootstrap 3 restyles five native HTML elements for showing code and program output: <code> for a short inline snippet, <pre> for a whole block, an added .pre-scrollable helper class for long blocks that need to scroll instead of growing the page, <kbd> for a keyboard key, and <samp> for sample output from a program. All five are plain HTML tags — Bootstrap just supplies the CSS.

1. Inline Code: <code>

Wrap a short snippet — a filename, a class name, a single command — in <code>. It renders in a monospace font with a light background and a touch of padding, sitting inline with the surrounding text.

<p>Add <code>class="img-responsive"</code> to any image tag.</p>

2. Multiline Code Blocks: <pre>

For more than one line, use <pre>. Bootstrap resets its font to monospace, preserves whitespace and line breaks exactly as written, and wraps it in a light bordered box. Nest a <code> tag inside it when you also want inline-code coloring for parts of the block.

<pre><code>
<div class="panel panel-default">
  <div class="panel-body">Trail notes go here.</div>
</div>
</code></pre>

3. Scrollable Blocks: .pre-scrollable

A long block — a full log file, a big JSON response — can push the whole page down. Add .pre-scrollable to cap the block at a fixed max-height (about 340px) with its own vertical scrollbar, so the rest of the page layout stays put.

<pre class="pre-scrollable">
GET /api/trails?region=northwest
200 OK
{
  "trails": [
    { "name": "Ridgeline Loop", "distance_mi": 4.2 },
    { "name": "Cedar Falls Trail", "distance_mi": 2.6 },
    { "name": "Summit Pass", "distance_mi": 7.8 }
    // ...many more lines...
  ]
}
</pre>

4. Keyboard Input: <kbd>

Use <kbd> to represent a key or key combination the user should press. It renders with a small dark background and rounded corners, visually distinct from regular <code>.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your trail edits.</p>

5. Sample Output: <samp>

Use <samp> to mark up text that represents output produced by a program or system — the response a command printed, for example — as distinct from the command itself.

<p>Running the sync command prints <samp>Synced 4,213 trails.</samp> when it finishes.</p>

6. Worked Example: TrailMap Install Snippet

Combining all five: a short setup guide for TrailMap's command-line sync tool, showing the command to type, the key to press to confirm, and the output it prints — with the full log available in a scrollable block underneath.

<h4>Installing the TrailMap CLI</h4>
<p>Run <code>npm install -g trailmap-cli</code> in your terminal.</p>

<pre><code>$ trailmap sync --region northwest
</code></pre>

<p>When prompted, press <kbd>Y</kbd> to confirm. You'll see:
  <samp>Synced 4,213 trails.</samp>
</p>

<pre class="pre-scrollable">
[1/3] Downloading trail index...
[2/3] Verifying checksums...
[3/3] Writing local cache...
Synced 4,213 trails.
</pre>

Next up: that JSON sample block would look better as a real table — head to Tables to see the base table class plus striping, borders and contextual row colors.

Prev Next