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.
Here is a simple Bootstrap well:-
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.
|
1 2 3 |
<div class="well"> Hey, look, I am in a well </div> |
Output
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.
|
1 2 3 4 5 6 7 8 9 |
<div class="well well-lg"> Larger well, I am in a well </div> <div class="well well-md"> Medium well, I am in a well </div> <div class="well well-sm"> Smaller well, I am in a well </div> |
Output
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.