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?


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


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>

16

Isso funcionou melhor para mim:

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

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>

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.


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>

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.


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.