Відповіді:
Оновлення 2018 року ...
card
замінила well
.
Завантаження 4
<div class="card card-body bg-light">
Well
</div>
або , як два DIVs ...
<div class="card bg-light">
<div class="card-body">
...
</div>
</div>
(Примітка: у Bootstrap 4 Alpha вони були відомі як card-block
замість, card-body
а не bg-faded
замість bg-light
)
Колодязі скидаються з Bootstrap з версією 4 .
Картки можна використовувати замість колодязів.
Ось короткий приклад використання нової функції Карт:
<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>
Це найкраще працювало для мене:
<div class="card bg-light p-3">
<p class="mb-0">Some text here</p>
</div>
Жодна з відповідей, здається, не працює добре з кнопками. 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>
В офіційній версії, згідно з офіційною версією, картки є новою заміною свердловин Bootstrap. Але Картки зараз досить широкі компоненти Bootstrap. Простіше кажучи, ви також можете використовувати Bootstrap Jumbotron .
Я кладу свої класи добре для попередження про клас, для мене це здається, що це стає приємно, але іноді потрібні певні налаштування, щоб поставити ширину на 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>
Шукаєте варіант одного рядка:
<div class="jumbotron bg-dark"> got a team? </div>
well
було скинуто повністю для нового компонента картки. v4-alpha.getbootstrap.com/migration