Bootstrap - Bootstrap Well

In Bootstrap 3, a "well" is a container used to visually emphasize or separate content from the rest of the page by giving it a sunken, inset appearance with a subtle gray background and rounded borders.

However, it's important to note that:

Bootstrap 3 → Wells exist.
Bootstrap 4 & 5 → Wells are removed. You need to use cards or utility classes instead.

1. What is a Bootstrap Well?

A well is a container that creates a visually distinct section on a page. It’s commonly used for:

Highlighting important content.
Separating sections.
Emphasizing warnings or instructions.

Basic Syntax (Bootstrap 3):

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

2. Types of Bootstrap Wells (Bootstrap 3)

Bootstrap 3 provides three well sizes:

(a) Default Well

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

(b) Small Well

Add .well-sm for a smaller padding.

<div class="well well-sm">
    This is a small well.
</div>

(c) Large Well

Add .well-lg for a bigger padding.

<div class="well well-lg">
    This is a large well.
</div>

3. Complete Example in Bootstrap 3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Wells</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body class="container">

  <h2>Bootstrap Wells Example</h2>

  <!-- Default Well -->
  <div class="well">
    This is a default Bootstrap well.
  </div>

  <!-- Small Well -->
  <div class="well well-sm">
    This is a small well.
  </div>

  <!-- Large Well -->
  <div class="well well-lg">
    This is a large well.
  </div>

</body>
</html>

4. Bootstrap 4 and 5 Alternative to Wells

Since Bootstrap 4 removed wells, you should use cards or utility classes to achieve a similar look.

(a) Using Cards

<div class="card p-3 mb-3 bg-light border">
  <p>This looks like a Bootstrap well.</p>
</div>

(b) Using Utility Classes Only

<div class="p-3 mb-3 bg-light border rounded">
  <p>This is a custom well using Bootstrap 5 utilities.</p>
</div>

5. Key Differences

Feature	Bootstrap 3 (Wells)	Bootstrap 4 & 5 Alternative
Container	`.well`	`.card` or `.bg-light` + `.border`
Sizes	`.well-sm`, `.well-lg`	Use padding classes `p-2`, `p-4`
Styling	Built-in	Fully customizable with utilities
Status	Available	Deprecated

6. Best Practice

If you’re using Bootstrap 3, continue using wells.
If you’re using Bootstrap 4 or 5, replace wells with cards or utility-based custom containers.