Bootstrap Wells

Wells are getting popular with a lot of web applications these days.

Every now and then we come across some quiz where you select one of the four options and suddenly you feel a slight depth around your selected option making it different from the other ones.

This 3rd dimension is what wells are used for. Basically, these are special borders around a component with a slightly dark background giving you a 3 dimensional feel about the component.

Here, we will study all about the Wells and how you can use Bootstrap to control them.

Inset Effect

Inset effect is basically a styling feature in frontend development languages like Bootstrap and CSS where you give a sunken effect to a webpage component to for better styling.

This effect can also be provided using jQuery plugins.

You can use jQuery to put a border around the webpage elements (images in general). But these won’t be the usual CSS borders.

These are special borders that will cover the component (here, image) making it look like it is placed behind some kind of frame; hence, inset.

The code below illustrates the same inset effect on an image using the jQuery plugin. Have a look:

These are special borders that will cover the component (here, image) making it look like it is placed behind some kind of frame; hence, inset.

The code below illustrates the same inset effect on an image using the jQuery plugin. Have a look:

Here, the method insetBorder can have following parameters:

  • speed: This is the speed for the border toggle (generally when hovering over the element). The default value is 250 milliseconds
  • borderColor: Color for the border. The default value is white or #ffffff
  • inset: This will actually tell the sunken effect that the border will provide
  • borderType: The type of border being used like solid, dashed etc.

Although, these jQuery methods seem easy, the plugins might get a bit difficult to be integrated with your application. Thus, we require something easier.

Bootstrap wells use the same Inset effect to give a 3 dimensional effect to your webpage component. Let’s have a look.

Bootstrap Basic Wells

To create a basic well using Bootstrap, you need to follow these steps:

  • Create an element that you want to hold the well in. The most element we use for this purpose is the <div> element.
  • Next, you need to add the Boostrap class .well, to this <div> element.
  • The .well class will, actually, add a rounded border around the <div> element. Bakground color for a basic well is gray. We can also see some padding for a proper effect.

Check out the code below to understand this better:

Bootstrap Well Size

The size of the wells can be controlled using 2 contextual classes provided by Bootstrap:

  • .well-sm: This is for small sized wells
  • .well-lg: This is for large sized wells

If the class is not explicitly mentioned, the wells are medium/normal sized.

The code below shows the example for both the classes:

Background Color

As mentioned before, the background color by default is grey. However, you can change the background color using simple CSS code like below: