Bootstrap Wells: Adding Visual Emphasis to Content (with Bootstrap 5 Alternatives)

Learn how to use Bootstrap wells (deprecated in Bootstrap 4) to add visual emphasis to sections of your web pages. This tutorial demonstrates creating wells, customizing their size, and explores modern Bootstrap 5 alternatives for achieving similar visual effects, improving content presentation and user experience.

Using Bootstrap Wells

Bootstrap wells (deprecated in Bootstrap 4) provide a simple way to visually highlight content by adding a rounded border, grey background, and padding. Think of them as styled containers for specific sections of your webpage.

Basic Wells

To create a basic well, add the class .well to a `

` element. This will give the `div` a grey background, rounded corners, and some padding.

Test it Now

Well Sizes

By default, Bootstrap wells have a medium size. You can adjust the size using these classes:

  • .well-sm: Creates a smaller well.
  • .well-lg: Creates a larger well.

Note that wells are deprecated in Bootstrap 4 and later; consider using other Bootstrap components like cards for similar visual effects.

Test it Now