Bootstrap Wells

Introduction

In our previous blog, we explored Bootstrap Tables, Buttons, and Jumbotrons, where we discussed how to create structured tables, style buttons, and use jumbotrons to highlight important content on a webpage.

Continuing our journey into Bootstrap components, here in this blog we learn about Wells, Alerts, Buttons and Button groups—key elements that help organize content and enhance user interaction. These components allow developers to create visually appealing and interactive web pages effortlessly. By the end of this blog, you will have a strong understanding of how to use Wells to emphasize content, Alerts to display important messages, and Buttons to facilitate user interactions.

Bootstrap Wells

A Well in Bootstrap is a simple container with a light grey background that adds an inset effect to the content inside it. It helps in highlighting sections within a webpage. The .well class also gives a rounded border around an element.

Important Tip:

Use wells sparingly, as Bootstrap 4 and later versions have deprecated wells in favor of card components.

Wells Example:

<div class="well">
  This is a basic well.
</div>

Well Size

Bootstrap provides different well sizes using additional classes:

<div class="well well-sm">Small Well</div>
<div class="well well-lg">Large Well</div>

Output:

Notes: Wells are medium in size by default.

Request more information

Bootstrap Wells