<div class="bs-docs-section">
  <h1 id="wells" class="page-header">Wells</h1>

  <h2>Default well</h2>
  <p>Use the well as a simple effect on an element to give it an inset effect.</p>
  <div class="bs-example" data-example-id="default-well">
    <div class="well">
      Look, I'm in a well!
    </div>
  </div>
{% highlight html %}
<div class="well">...</div>
{% endhighlight %}
  <h2>Optional classes</h2>
  <p>Control padding and rounded corners with two optional modifier classes.</p>
  <div class="bs-example" data-example-id="large-well">
    <div class="well well-lg">
      Look, I'm in a large well!
    </div>
  </div>
{% highlight html %}
<div class="well well-lg">...</div>
{% endhighlight %}

  <div class="bs-example" data-example-id="small-well">
    <div class="well well-sm">
      Look, I'm in a small well!
    </div>
  </div>
{% highlight html %}
<div class="well well-sm">...</div>
{% endhighlight %}
</div>
