<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>