web-dev-qa-db-fra.com

Quelle est la classe équivalente '.well' dans Bootstrap 4

Dans bootstrap-3, il existe .well class qui ajoute une bordure arrondie autour d'un élément avec une couleur de fond gris et un peu de remplissage.

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

Mais, je n'ai trouvé aucune classe .well dans bootstrap-4. Existe-t-il une balise équivalente à .well dans bootstrap-4?

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4twitter-bootstrap-4
72
Jobin

Mise à jour 2018 ...

card a remplacé le well.

Bootstrap 4

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

ou, en tant que deux DIV ...

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

(Remarque: dans Bootstrap 4 Alpha, ils étaient appelés card-block au lieu de card-body et bg-faded au lieu de bg-light)

http://codeply.com/go/rW2d0qxx08

118
Zim

Les puits sont supprimés de Bootstrap avec le version 4 .

Vous pouvez utiliser Cards au lieu de Wells.

Voici un exemple rapide d'utilisation de la nouvelle fonctionnalité Cartes:

<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>

Exemple live: jsFiddle

29
Emre Bolat

Cela a fonctionné mieux pour moi:

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

Aucune des réponses ne semblait bien fonctionner avec les boutons. 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>
3
Shoe

Je suis bien en train d’alourdir mes cours pour avoir l’alerte, pour moi c’est comme si ça devenait agréable, mais quelques ajustements sont parfois nécessaires pour mettre la largeur à 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>
0
krekto

La carte semble être "rejetée" LOL, j'ai trouvé le "bien" ne fonctionnant pas avec bootstrap 4.3.1 et jQuery v3.4.1, fonctionnant correctement sans problème avec bootstrap 4.3.1 et jQuery v3.3.1. J'espère que ça aide.

0
DrOne