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

THE ULTIMATE TOOLKIT

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

Get the PDF

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.


Download Link Will be Send to Your Email id