Bootstrap 3 Wells

Bootstrap provides special well classes to give content inset effect for the content to be given different look. You can give the element this look by just adding .well class to it with content in between. This Well defined class has default CSS behavior which is presented in the image below:
A basic example of bootstrap 3 well

Bootstrap 3 Well Examples

Check out the basic example for Bootstrap well. It is done by adding a .well class in the parent div tag only. You can add more additional small and large classes whenever required.

<div class=”well”>Normal Well</div>

Tip: By default Bootstrap 3 Well class takes medium size whereas small and larger classes are needed to be specifically defined in order to get that specific behavior.

Different Types of Bootstrap Well Example

There are three types of Wells defined in the Bootstrap that change their CSS behavior with respect to the padding of the element inside the well class.

  • 1. Small well with .well-sm additional class
  • 2. Medium/Default with .Well class
  • 3. Large Well with .well-lg additional class
<div class="container">
  <h2>Different Types of Well Size</h2>
  <div class="well well-sm">Small Well</div>
  <div class="well">Normal Well</div>
  <div class="well well-lg">Large Well</div>

Different types of Bootstrap wells

Bootstrap well Default CSS

Bootstrap has predefined styling for a .well class which has specified attributes that define how it has shown in the front end respectively. Default Bootstrap Well CSS is given below so to make any changes you must override these attributes for desired results.

// Wells
// Base class 
.well {
  border:1px solid #e3e3e3;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}

// Sizes
.well-lg {
.well-sm {

//Well Blockquote
.well blockquote{

Default Bootstrap Well Color is #f5f5f5 white smoke and its RGB value is (245,245,245), CMYK color is 0% Cyan 0% Magenta 0% Yellow 4% Black, lightness 96%, saturation 0%, Hue angle 0 % respectively

There are many scenarios when you have to make specific changes and some of them are discussed now:

Bootstrap 3 Change Well Background Color

For changing the background color of the Bootstrap well you need to add the extra class with a specific CSS color value and that will fetch the right result for you. As the typical default values are already there you need to either replace or overwrite them in a custom CSS file which should be placed after the Bootstrap default CSS file. Check out the below example where we have added simple internal CSS for getting desired changes in the color.

.well {background: royalblue;}

Change Bootstrap Well Color

Tip: You can also use !important in CSS for overwriting the values before.

Bootstrap 3 Well Center

In this case, we are going to study step by step these following conditions with examples:

1. Bootstrap Well center text: When you want to place the content inside the Bootstrap Well to have center alignment you need to add one extra element inside the parent well tag and give it a specific .text-center class will place the content in the center respectively.

Making Text center in Bootstrap 3 Wells

2. Bootstrap Well center on the page: In this scenario, we are placing the whole content inside the Bootstrap Well Center on Page.

3. Bootstrap Vertical center Well: In this, we will study aligning Bootstrap Well with vertically center.

Bootstrap Well fluid – Fit Content

There are many tweaks that one can apply to make bootstrap well fluid here we are going to discuss a few of them below with accompanying examples.
Bootstrap well fluid Fit to Content

Bootstrap Wells has been dropped from next Bootstrap version 4 with a highly useful combination termed as ‘BootStrap 4 Cards

Also, Check out
Step by Step Bootstrap 3 tutorial PDF now.

And our special section on
Bootstrap Interview Questions

You may also like...

Leave a Reply

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