diff --git a/docs/css.html b/docs/css.html
index 3630acd125..1315ffe071 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1880,12 +1880,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
     <div class="bs-example">
       <form role="form">
-        <input class="form-control" id="focusedInput" type="text" value="This is focused...">
+        <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
       </form>
     </div>
-{% highlight html %}
-<input class="form-control" id="focusedInput" type="text" value="This is focused...">
-{% endhighlight %}
+<div class="bs-callout bs-callout-info">
+  <h4>Demo <code>:focus</code> state</h4>
+  <p>The above example input uses custom styles in our documentation to demonstrate the <code>:focus</code> state on a <code>.form-control</code>.</p>
+</div>
 
 
     <h2 id="forms-control-disabled">Disabled inputs</h2>