What is the '.well' equivalent class in Bootstrap 4

CssTwitter BootstrapTwitter Bootstrap-3Bootstrap 4Twitter Bootstrap-4

Css Problem Overview


In bootstrap-3 there is [.well][1] class which adds a rounded border around an element with a gray background color and some padding.

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

But, I didn't find any .well class in bootstrap-4. Is there any tag equivalent to .well in bootstrap-4? [1]: http://www.w3schools.com/bootstrap/bootstrap_wells.asp

Css Solutions


Solution 1 - Css

Update 2018...

card has replaced the well.

Bootstrap 4

<div class="card card-body bg-light">
     Well
</div>

or, as two DIVs...

<div class="card bg-light">
    <div class="card-body">
        ...
    </div>
</div>

(Note: in Bootstrap 4 Alpha, these were known as card-block instead of card-body and bg-faded instead of bg-light)

http://codeply.com/go/rW2d0qxx08

Solution 2 - Css

Wells are dropped from Bootstrap with the version 4.

You can use Cards instead of Wells.

Here is a quick example for how to use new Cards feature:

<div class="card card-inverse" style="background-color: #333; border-color: #333;">
  <div class="card-block">
    <h3 class="card-title">Card Title</h3>
    <p class="card-text">This text will be written on a grey background inside a Card.</p>
    <a href="#" class="btn btn-primary">This is a Button</a>
  </div>
</div>

Solution 3 - Css

This worked best for me:

<div class="card bg-light p-3">
 <p class="mb-0">Some text here</p>
</div>

Solution 4 - Css

None of the answers seemed to work well with buttons. Bootstrap v4.1.1

<div class="card bg-light">
    <div class="card-body">
        <button type="submit" class="btn btn-primary">
            Save
        </button>
        <a href="/" class="btn btn-secondary">
            Cancel
        </a>
    </div>
</div>

Solution 5 - Css

Sure officially version says the cards are the new replacements for Bootstrap wells. But Cards are a quite broad Bootstrap components now. In simple terms, you can also use Bootstrap Jumbotron too.

Solution 6 - Css

Looking for a one line option:

    <div class="jumbotron bg-dark"> got a team? </div>        

https://getbootstrap.com/docs/4.0/components/jumbotron/

Solution 7 - Css

I'm mading my classes well for class alert, for me it looks like it's getting nice, but some tweaks are sometimes needed as to put the width 100%

<div class="alert alert-light" style="width:100%;">
  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>

Solution 8 - Css

Card seems to be "discarded" LOL, I found the "well" not working with bootstrap 4.3.1 and jQuery v3.4.1, just working fine with bootstrap 4.3.1 and jQuery v3.3.1. Hope it helps.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJobinView Question on Stackoverflow
Solution 1 - CssZimView Answer on Stackoverflow
Solution 2 - CssEmre BolatView Answer on Stackoverflow
Solution 3 - CssRaef AkehurstView Answer on Stackoverflow
Solution 4 - CssjamesSampicaView Answer on Stackoverflow
Solution 5 - Csssachin aroraView Answer on Stackoverflow
Solution 6 - CssHarry BoshView Answer on Stackoverflow
Solution 7 - CsskrektoView Answer on Stackoverflow
Solution 8 - CssDrOneView Answer on Stackoverflow