Bootstrap Well

Learn how to use bootstrap well and content inside it to create an inset effect. It creates a rounded corners box with the light background where you can place your content.

Content Inside the Bootstrap Well

To create a bootstrap well component, you have to use the <div> tag with the class .well and put your content in this element.

A simple well component is given below with content placed inside it.

Test it Live

Output

Hey, look, I am in a well

Resizing the Bootstrap Well Component

In addition to creating a simple well component, you can resize it in different sizes. Use the classes .well-lg, .well-md and .well-sm to create varying size well component for your content.

Test it Live

Output

Larger well, I am in a well
Medium well, I am in a well
Smaller well, I am in a well

The class .well-md creates a default size well component. You don’t need to use this class as it is the default size of the well. Use only the two classes .well-lg and .well-sm to create a larger and smaller size well for your content.
Reference
Getbootstrap 3 Doc

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ULTIMATE TOOLKIT Free eBook

Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Download Link Will be Send to Your Email id