Respostas:
Atualizar 2018 ...
card
substituiu 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-block
em vez de card-body
e bg-faded
em vez de bg-light
)
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>
Isso funcionou melhor para mim:
<div class="card bg-light p-3">
<p class="mb-0">Some text here</p>
</div>
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>
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.
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>
Procurando uma opção de uma linha:
<div class="jumbotron bg-dark"> got a team? </div>
well
foi descartado inteiramente para o novo componente do cartão. v4-alpha.getbootstrap.com/migration