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:

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

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

Bootstrap UI Design Templates