View on GitHub

Card Examples

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

On this page

Examples

Article

We gaan het werk sneller uitvoeren

Liander is monteurs aan het opleiding om te werken aan het overbelaste stroomnet.

Ontdek onze aanpak

html

<div class="card" style="width: 18rem;">
  <div class="card-body p-4">
    <h5 class="card-title h3">We gaan het werk sneller uitvoeren</h5>
    <p class="card-text">Liander is monteurs aan het opleiding om te werken aan het overbelaste stroomnet.</p>
    <a href="#" class="btn btn-secondary btn-md">Ontdek onze aanpak</a>
  </div>
</div>

We gaan het werk sneller uitvoeren

Liander is monteurs aan het opleiding om te werken aan het overbelaste stroomnet.

Ontdek onze aanpak

html

<div class="card" style="width: 22rem;">
  <div class="card-body p-5">
    <h5 class="card-title h3 mb-3">We gaan het werk sneller uitvoeren</h5>
    <p class="card-text mb-4 fs-4 fw-lighter">Liander is monteurs aan het opleiding om te werken aan het overbelaste stroomnet.</p>
    <a href="#" class="btn btn-secondary btn-lg">Ontdek onze aanpak</a>
  </div>
</div>

Info

Actuele vragen

Waarom heb ik een slimme meter nodig?

Ontdek de benefits

html

<div class="card" style="width: 22rem;">
  <div class="card-body p-5">
      <p class="fs-7 mb-4">Actuele vragen</p>
    <h5 class="card-title h3 mb-5">Waarom heb ik een slimme meter nodig?</h5>
    <a href="#" class="btn btn-secondary btn-lg mt-5">Ontdek de benefits</a>
  </div>
</div>

Top task

Ik wil mijn aansluiting wijzigen

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-body p-5">
    <h5 class="card-title mb-5">Ik wil mijn aansluiting wijzigen</h5>
    <button type="button" class="btn btn-icon-ghost-on-dark btn-icon-md rounded-circle"><span class="fa fa-arrow-right"></span></button>
  </div>
</div>

Search result

Storing

Ik wil een storing melden

Liander is monteurs aan het opleiding om te werken aan het overbelaste stroomnet.

html

<div class="card" style="width: 22rem;">
  <div class="card-body p-4">
    <span class="btn btn-sm mb-4 bg-primary-subtle">Storing</span>
    <h5 class="card-title h3 mb-3">Ik wil een storing melden</h5>
    <p class="card-text">Liander is monteurs aan het opleiding om te werken aan het overbelaste stroomnet.</p>
    <button type="button" class="btn btn-icon-ghost-on-light btn-icon-sm rounded-circle"><span class="fa fa-arrow-right"></span></button>
  </div>
</div>