Bootstrap 3 Well (Legacy)

Bootstrap 3 wells added an inset panel around content. The component was removed from Bootstrap 4; use cards, borders, backgrounds and spacing utilities instead on newer pages.

Legacy Bootstrap 3 Well Top ↑

<div class="well">
  Basic well
</div>

<div class="well well-sm">
  Small well
</div>

<div class="well well-lg">
  Large well
</div>

Bootstrap 4 Replacement Top ↑

<div class="border rounded bg-light p-3">
  Similar visual treatment using Bootstrap 4 utilities.
</div>

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<style>
.well {
  background: #f00000;
}
</style>

Original example 2

<style>
.my_bg-class{
background: #ffff80;
}
</style>

Original example 3

<div class="well my_bg-class">This well is class='well my_bg-class'</div>

Original example 4

<style>\n";
str +=".my_bg-class {\n";
str +=" background: "+val+";\n"
str +="}\n"
str +="</style>

Additional Original Learning Routes Top ↑

• bs-font-colour.php
• msg-demo/bs-well-colour.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: