کارت توضیحات عنوان صفحه در اینجا می رود...

<!-- basic usage -->
<div class="card">
  <div class="card-header">هدر کارت در اینجا</div>
  <div class="card-body">
    <h5 class="card-title">عنوان کارت</h5>
    <h6 class="card-subtitle mb-3 text-muted">زیر عنوان کارت</h6>
    <p class="card-text mb-3">...</p>
    <div>
      <a href="#" class="card-link">لینک کارت</a>
      <a href="#" class="card-link">لینک دیگر</a>
    </div>
  </div>
</div>

<!-- card with list-group -->
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">...</li>
    <li class="list-group-item">قالب چند منظوره مدیریتی</li>
    <li class="list-group-item">قالب چند منظوره مدیریتی</li>
  </ul>
</div>

<div class="card">
  <div class="card-header d-flex">
    <span class="flex-grow-1">...</span>
    <a href="#" data-toggle="card-expand" class="text-muted text-decoration-none"><i class="fa fa-fw fa-expand"></i> بسط دادن</a>
  </div>
</div>

<!-- using grid -->
<div class="row">
  <div class="col-sm-8">
    <div class="card">...</div>
  </div>
</div>

<!-- using utilities -->
<div class="card w-25">...</div>
<div class="card w-50">...</div>
<div class="card w-75">...</div>

<!-- using custom css -->
<div class="card" style="width: 18rem;">...</div>

<!-- nav tabs -->
<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      ...
    </ul>
  </div>
</div>

<!-- nav-pills -->
<div class="card">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      ...
    </ul>
  </div>
</div>

<!-- image caps -->
<div class="card mb-3">
  <img src="https://via.placeholder.com/600x400/c9d2e3/212837" class="card-img-top" alt="" />
  <div class="card-body">
    <h5 class="card-title">...</h5>
    <p class="card-text">...</p>
  </div>
</div>

<!-- image overlay -->
<div class="card bg-dark text-white mb-3 border-0">
  <img src="https://via.placeholder.com/600x735/212837/c9d2e3" class="card-img" alt="" />
  <div class="card-img-overlay">
    <h5 class="card-title">...</h5>
    <p class="card-text">...</p>
  </div>
</div>

<div class="card">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/600x600/c9d2e3/212837" class="card-img rounded-0" />
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">عنوان کارت</h5>
        <p class="card-text">این یک کارت است با پشتیبانی از متن زیر به عنوان یک پیشگام طبیعی برای محتوای اضافی. این محتوا کمی طولانی تر است.</p>
        <p class="card-text"><small class="text-muted">آخرین آپدیت 4 دقیقه پیش</small></p>
      </div>
    </div>
  </div>
</div>

<!-- background and color -->
<div class="card text-white bg-primary mb-3">
  <div class="card-header">...</div>
  <div class="card-body">
    <h5 class="card-title">...</h5>
    <p class="card-text">...</p>
  </div>
</div>

<!-- border -->
<div class="card border-primary mb-3">
  <div class="card-header border-primary bg-transparent text-primary">...</div>
  <div class="card-body text-primary">
    <h5 class="card-title">...</h5>
    <p class="card-text">...</p>
  </div>
</div>

<div class="card-group">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<div class="card-deck">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<div class="card-columns">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>