Menu
I don't see the class card-block mentioned in the reference documentation, but I have seen this class used in a few examples. This is the officially reference:
https://getbootstrap.com/docs/4.0/components/card/
And this is an example where the class is used:
https://www.codeply.com/go/pVsGQZVVtG/bootstrap-4-no-gutters-(spacing)
I've seen cards used but what is this card-block class?
Example:
<div class="row">
<div class="col-3">
<div class="card">
<div class="card-block">
normal
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-block">
normal
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-block">
normal
</div>
</div>
</div>
</div>
684
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails.
Card-deck is not supported in Bootstrap 5.
To select multiple cards, click the desired rows while holding down the Ctrl key. Clicking a card in this manner toggles its selected state and preserves the selection. To select contiguous cards, click the first row you wish to select, hold down the Shift key, and click the last row.
Normally, the height of the card will be adjusted to vertically fit the content of the card, but we can also control it using custom CSS (for example, style=" height: 10rem;" ) or Bootstrap's sizing utilities (for examle, <div class="card h-200"> ).
The card-block class was used on an Alpha Release version of Bootstrap 4 and doesn't exists on the current release. You can read the documentation of that class on the link: card-block on v4-Alpha. There says that:
The building block of a card is the
.card-block. Use it whenever you need a padded section within a card.
Like I already mention, this class do not exist on the currently v4.1.3 release or another superior version. You can check with the browser inspector tool on the next example and see that there is no CSS style related to the card-block class but there exists CSS style related to, like an example, the officially documented card-header or card-body classes.
Link to official documentation about cards: Bootstrap Cards
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="card">
<div class="card-block">
card-block
</div>
</div>
<br>
<div class="card">
<div class="card-header">
card-header
</div>
<div class="card-body">
card-body
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
