Kártyák

• Szerző: Sallai András
• Copyright © Sallai András, 2020
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

A Bootstrap 4-ben eltűnt a Panel, megjelent helyette a kártya. A kártya egy szegélyezett doboz, amely a tartalmat belső margóval veszi körül. Lehetőség van fejlécek, láblécek, tartalom és színek megadására.

• .card
• .card-body

<div class="card">
  <div class="card-body">Alap</div>
</div>

<div class="card">
  <div class="card-header">Fejléc</div>
  <div class="card-body">Tartalom</div>
  <div class="card-footer">Lábléc</div>
</div>

• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-dark
• .bg-light

• .card-title
• .card-text
• .card-body
• .card-link

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Kártya címe</h4>
    <p class="card-text">Lorem ipsum dolor set amet</p>
    <a href="https://szit.hu" class="card-link">szit.hu</a>    
  </div>
</div>

• .card-img-top
• .card-img-bottom
• .card-body

<div class="card" style="width:400px">
  <img class="card-img-top" src="kep.png" alt="janos_kepe.png">
  <div class="card-body">
    <h4 class="card-title">Nagy János</h4>
    <p class="card-text">Válassz egy embert</p>
    <a href="https://szit.hu" class="btn btn-primary">szit.hu</a>
  </div>
</div>

Osztály:

• .stretched-link

<a href="#" class="btn btn-primary stretched-link"></a>

Osztály:

• .card-img-overlay

<div class="card" style="width:500px">
  <img class="card-img-top" src="janos.png" alt="János képe">
  <div class="card-img-overlay">
    <h4 class="card-title">Nagy János</h4>
    <p class="card-text">Jelentkezz a Jánosnál</p>
    <a href="#" class="btn btn-primary">Néz meg a leírását</a>
  </div>
</div>

Osztály:

• .card-columns

<div class="card-columns">
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Egyik</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Másik</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Harmadik</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Negyedik</p>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">Ötödik</p>
    </div>
  </div>
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Hatodik</p>
    </div>
  </div>
</div>

Osztály:

• .card-deck

<div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Lorem ipsum</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Lorem ipsum</p>
    </div>
  </div>
</div>

Osztály:

• .card-group

<div class="card-group">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Lorem ipsum</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Lorem ipsum</p>
    </div>
  </div>
</div>