Wells
A well is the simplest of Bootstrap 3's three boxed-content components: a single class,
.well, that gives any element an inset appearance, a light grey background, padding,
and rounded corners. There is no heading, no title, no footer structure — just a plain padded box
for grouping content that doesn't need any of that scaffolding.
1. Basic Well: .well
<div class="well">
Basic well content goes here.
</div>2. Size Variants: .well-lg / .well-sm
Stack a size modifier onto .well to adjust the padding and border radius —
.well-lg for extra padding, .well-sm for a tighter, more compact box.
<div class="well well-lg">Larger well</div>
<div class="well well-sm">Smaller well</div>3. Well vs. Panel: Which One Do I Reach For?
Both components draw a bordered, padded box, so it's easy to reach for the wrong one. The deciding factor is structure: does the content need a distinct heading area, or is it one self-contained block?
| Use a Well when… | Use a Panel when… |
|---|---|
| Content is one flat block — a summary, a callout, a quick-facts box | Content needs a separate heading/title from its body |
| No footer or action row is needed | You want a footer for actions or a timestamp |
| You just want inset styling with minimal markup | You want a contextual color on the heading (panel-primary, etc.) |
4. Worked Example: TrailMap Trail Stats Well
TrailMap drops a quick-reference well near the top of each trail page — distance, elevation, and difficulty at a glance, with no heading structure needed since the numbers speak for themselves.
<!-- TrailMap: trail stats well -->
<div class="well">
<div class="row text-center">
<div class="col-xs-4">
<strong>8.2 mi</strong><br>Distance
</div>
<div class="col-xs-4">
<strong>1,450 ft</strong><br>Elevation Gain
</div>
<div class="col-xs-4">
<strong>Moderate</strong><br>Difficulty
</div>
</div>
</div>.card with a single .card-body
inside it and nothing else — no .card-header, no .card-footer. Same
padded-box need, one fewer dedicated class to remember.