...

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Bootstrap documentation

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere

Border

Skola only

Add a contextual border to the top of the card component. Three sizing options are available.

Card border
<div class="card card-border border-success">
  <div class="card-body">
    Card border
  </div>
</div>
Card border large
<div class="card card-border card-border-lg border-danger">
  <div class="card-body">
    Card border large
  </div>
</div>
Card border extra large
<div class="card card-border card-border-xl border-primary">
  <div class="card-body">
    Card border extra large
  </div>
</div>

Bleed

Skola only

Spans the card component from edge to edge and removes its border radius on extra small screens.

Card bleed
<div class="card card-bleed">
  <div class="card-body">
    Card bleed
  </div>
</div>
Jump to