O que é a classe equivalente '.well' no Bootstrap 4

129

No bootstrap-3, há uma .wellclasse que adiciona uma borda arredondada ao redor de um elemento com uma cor de fundo cinza e algum preenchimento.

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

Mas não encontrei nenhuma .wellclasse no bootstrap-4. Existe alguma tag equivalente a .wellno bootstrap-4?

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 twitter-bootstrap-4 Jobin
fonte
4
wellfoi descartado inteiramente para o novo componente do cartão. v4-alpha.getbootstrap.com/migration
Clyde Lobo

Respostas:

212

Atualizar 2018 ...

cardsubstituiu o well.

Bootstrap 4

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

ou , como dois DIVs ...

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

(Nota: na Bootstrap 4 alfa, estes eram conhecidos como card-blockem vez de card-bodye bg-fadedem vez de bg-light)

http://codeply.com/go/rW2d0qxx08

Zim
fonte
38

Os poços são eliminados do Bootstrap com a versão 4 .

Você pode usar cartões em vez de poços.

Aqui está um exemplo rápido de como usar o novo recurso Cartões:

<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>
Emre Bolat
fonte
16

Isso funcionou melhor para mim:

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

Nenhuma das respostas parecia funcionar bem com os botões. 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>
Sapato
fonte
1
É verdade! Posso confirmar que você precisa da classe de corpo do cartão separada anexada à sua própria div para fazer com que os botões apareçam normalmente!
Skiabox #
2

Certamente, a versão oficial diz que os cartões são os novos substitutos para os poços Bootstrap. Mas os cartões são componentes bastante amplos do Bootstrap agora. Em termos simples, você também pode usar o Bootstrap Jumbotron também.

sachin arora
fonte
0

Estou fazendo minhas aulas bem para alerta de classe, para mim parece que está ficando bom, mas algumas vezes são necessários alguns ajustes para colocar 100% da largura

<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>
krekto
fonte
0

O cartão parece estar "descartado" LOL, achei que o "poço" não estava funcionando com o bootstrap 4.3.1 e o jQuery v3.4.1, apenas funcionando bem com o bootstrap 4.3.1 e o jQuery v3.3.1 . Espero que ajude.

DrOne
fonte