Bootstrap Wells
In this tutorial you will learn how to use Bootstrap well component.
Placing Content inside Wells
The Bootstrap well component provides a quick way to apply a simple inset effect to an element. It will be very helpful if you just want to place some content inside a box to make it look like different from rest of the contents. To use this just enclose the contents with a <div>
element and apply the class .well
on it, like this:
Example
Try this code »<div class="well">
Look, I'm in a well!
</div>
— The output of the above example will look something like this:
Varying Well Sizes
You can further control the padding and rounded corners of the wells using the two optional modifier classes .well-lg
and .well-sm
, like this:
Example
Try this code »<div class="well well-lg">
Look, I'm in a large well!
</div>
<div class="well well-sm">
Look, I'm in a small well!
</div>
Tip: If you're going to place the floated content inside a well, make sure to add the class .clearfix
to the .well
element to prevent parent collapsing.