Well is a container <div>
that causes content to appear sunken or creates an inset effect. To create a Well, simply place the content inside a <div>
with the class .well
. The following example demonstrates a default Well:
Example
<div class="well">Hello, I'm in a Well!</div>
The result is as follows:
Size Variations
You can use the optional classes .well-lg
or .well-sm
to change the size of the Well. These classes are used in conjunction with the .well
class. They affect the padding, making the Well appear larger or smaller depending on the class used.
Example
<div class="well well-lg">Hello, I'm in a large Well!</div>
<div class="well well-sm">Hello, I'm in a small Well!</div>
The result is as follows: