diff --git a/src/root/build.tt b/src/root/build.tt
index 88ad9e01..f9f442f6 100644
--- a/src/root/build.tt
+++ b/src/root/build.tt
@@ -504,9 +504,9 @@ END;
           installed</a>, you can reproduce this build on your own machine by
           running the following command:</p>
 
-<pre>
+<div class="card bg-light"><div class="card-body p-2"><code>
 <span class="shell-prompt"># </span>nix build [% HTML.escape(eval.flake) %]#hydraJobs.[% HTML.escape(job) %]
-</pre>
+</code></div></div>
 
         [% ELSE %]
 
@@ -519,9 +519,9 @@ END;
           <p>To download and execute the script from the command line, run the
           following command:</p>
 
-<pre>
+<div class="card bg-light"><div class="card-body p-2"><code>
 <span class="shell-prompt"># </span>curl <a [% HTML.attributes(href => url) %]>[% HTML.escape(url) %]</a> | bash
-</pre>
+</code></div></div>
 
         [% END %]
 
diff --git a/src/root/channel-contents.tt b/src/root/channel-contents.tt
index eb0d9460..083d6ae5 100644
--- a/src/root/channel-contents.tt
+++ b/src/root/channel-contents.tt
@@ -6,21 +6,24 @@
 href="http://nixos.org/">Nix package manager</a>.  If you have Nix
 installed, you can subscribe to this channel by once executing</p>
 
-<pre>
-$ nix-channel --add [% curUri +%]
-$ nix-channel --update</pre>
+<div class="card bg-light"><div class="card-body"><pre>
+<span class="shell-prompt">$ </span>nix-channel --add [% curUri +%]
+<span class="shell-prompt">$ </span>nix-channel --update
+</pre></div></div>
 
 <p>You can then query and install packages in the normal way, e.g.,</p>
 
-<pre>
-$ nix-env -qa '*'
-$ nix-env -i foo</pre>
+<div class="card bg-light"><div class="card-body"><pre>
+<span class="shell-prompt">$ </span>nix-env -qa '*'
+<span class="shell-prompt">$ </span>nix-env -i foo
+</pre></pre></div>
 
 <p>You can update to the latest versions of the packages in this channel by executing</p>
 
-<pre>
-$ nix-channel --update
-$ nix-env -u '*'</pre>
+<div class="card bg-light"><div class="card-body"><pre>
+<span class="shell-prompt">$ </span>nix-channel --update
+<span class="shell-prompt">$ </span>nix-env -u '*'
+</pre></div></div>
 
 [% IF genericChannel %]
 
diff --git a/src/root/jobset-eval.tt b/src/root/jobset-eval.tt
index 67f7fcec..e2702310 100644
--- a/src/root/jobset-eval.tt
+++ b/src/root/jobset-eval.tt
@@ -109,7 +109,7 @@ c.uri_for(c.controller('JobsetEval').action_for('view'),
   [% IF eval.evaluationerror.errormsg %]
     <div id="tabs-errors" class="tab-pane">
       <p>Errors occurred at [% INCLUDE renderDateTime timestamp=(eval.evaluationerror.errortime || eval.timestamp) %].</p>
-      <pre class="alert alert-error">[% HTML.escape(eval.evaluationerror.errormsg) %]</pre>
+      <div class="card bg-light"><div class="card-body"><pre>[% HTML.escape(eval.evaluationerror.errormsg) %]</pre></div></div>
     </div>
   [% END %]
 
@@ -173,7 +173,7 @@ c.uri_for(c.controller('JobsetEval').action_for('view'),
   [% IF eval.evaluationerror.errormsg %]
     <div id="tabs-errors" class="tab-pane">
       <p>Errors occurred at [% INCLUDE renderDateTime timestamp=(eval.evaluationerror.errortime || eval.timestamp) %].</p>
-      <pre class="alert alert-error">[% HTML.escape(eval.evaluationerror.errormsg) %]</pre>
+      <div class="card bg-light"><div class="card-body"><pre>[% HTML.escape(eval.evaluationerror.errormsg) %]</pre></div></div>
     </div>
   [% END %]
 </div>
diff --git a/src/root/jobset.tt b/src/root/jobset.tt
index 3005730b..783eee76 100644
--- a/src/root/jobset.tt
+++ b/src/root/jobset.tt
@@ -117,7 +117,7 @@
   [% IF jobset.errormsg || jobset.fetcherrormsg %]
     <div id="tabs-errors" class="tab-pane">
       <p>Errors occurred at [% INCLUDE renderDateTime timestamp=(jobset.errortime || jobset.lastcheckedtime) %].</p>
-      <pre class="alert alert-error">[% HTML.escape(jobset.fetcherrormsg || jobset.errormsg) %]</pre>
+      <div class="card bg-light"><div class="card-body"><pre>[% HTML.escape(jobset.fetcherrormsg || jobset.errormsg) %]</pre></div></div>
     </div>
   [% END %]
 
diff --git a/src/root/log.tt b/src/root/log.tt
index 65a092b9..fcc07d97 100644
--- a/src/root/log.tt
+++ b/src/root/log.tt
@@ -18,9 +18,9 @@
   [% END %]
 </p>
 
-<pre class="log" id="contents">
+<div class="card bg-light"><div class="card-body"><pre class="log" id="contents">
 <em>Loading...</em>
-</pre>
+</pre></div></div>
 
 <script type="text/javascript">
   $(document).ready(function() {
diff --git a/src/root/plain.tt b/src/root/plain.tt
index 0b2db510..f5d7a96b 100644
--- a/src/root/plain.tt
+++ b/src/root/plain.tt
@@ -5,6 +5,6 @@
 [% jobset = build.jobset %]
 [% job = build.job %]
 
-<pre>[% HTML.escape(contents) %]</pre>
+<div class="card bg-light"><div class="card-body"><pre>[% HTML.escape(contents) %]</pre></div></div>
 
 [% END %]
diff --git a/src/root/product-list.tt b/src/root/product-list.tt
index 37a4273c..4d545b3e 100644
--- a/src/root/product-list.tt
+++ b/src/root/product-list.tt
@@ -58,7 +58,7 @@
                <p>If you have Nix installed on your machine, this failed build output and
                all its dependencies can be unpacked into your local Nix store by doing:</p>
 
-               <pre><span class="shell-prompt">$ </span>curl [% uri %] | gunzip | nix-store --import</pre>
+               <div class="card bg-light"><div class="card-body p-2"><code><span class="shell-prompt">$ </span>curl [% uri %] | gunzip | nix-store --import</code></div></div>
 
                <p>The build output can then be found in the path <tt>[% product.path %]</tt>.</p>
              [% END %]
@@ -81,7 +81,7 @@
               %] <p>You can install this package using the Nix package
               manager from the command-line:</p>
 
-                <pre><span class="shell-prompt">$ </span>nix-env -i [%HTML.escape(product.path)%][% IF binaryCachePublicUri %] --option binary-caches [% HTML.escape(binaryCachePublicUri) %][% END %]</pre>
+                <div class="card bg-light"><div class="card-body p-2"><code><span class="shell-prompt">$ </span>nix-env -i [%HTML.escape(product.path)%][% IF binaryCachePublicUri %] --option binary-caches [% HTML.escape(binaryCachePublicUri) %][% END %]</code></div></div>
               [% END %]
               [% IF localStore %]
                 <a class="btn btn-secondary btn-sm" href="[% contents %]">Contents</a>
@@ -110,16 +110,16 @@
                 all its dependencies can be unpacked into your local Nix
                 store by doing:</p>
 
-                <pre><span class="shell-prompt">$ </span>gunzip &lt; [% filename %] | nix-store --import</pre>
+                <div class="card bg-light"><div class="card-body p-2"><code><span class="shell-prompt">$ </span>gunzip &lt; [% filename %] | nix-store --import</code></div></div>
 
                 <p>or to download and unpack in one command:</p>
 
-                <pre><span class="shell-prompt">$ </span>curl [% uri %] | gunzip | nix-store --import</pre>
+                <div class="card bg-light"><div class="card-body p-2"><code><span class="shell-prompt">$ </span>curl [% uri %] | gunzip | nix-store --import</code></div></div>
 
                 <p>The package can then be found in the path <tt>[%
                 product.path %]</tt>.  You’ll probably also want to do</p>
 
-                <pre><span class="shell-prompt">$ </span>nix-env -i [% product.path %]</pre>
+                <div class="card bg-light"><div class="card-body p-2"><code><span class="shell-prompt">$ </span>nix-env -i [% product.path %]</code></div></div>
 
                 <p>to actually install the package in your Nix user environment.</p>
 
diff --git a/src/root/queue-runner-status.tt b/src/root/queue-runner-status.tt
index d2896973..b887cae4 100644
--- a/src/root/queue-runner-status.tt
+++ b/src/root/queue-runner-status.tt
@@ -1,8 +1,6 @@
 [% WRAPPER layout.tt title="Queue runner status" %]
 [% PROCESS common.tt %]
 
-<pre>
-[% HTML.escape(status) %]
-</pre>
+<div class="card bg-light"><div class="card-body"><pre>[% HTML.escape(status) %]</pre></div></div>
 
 [% END %]