Чтобы создать карту Bootstrap с верхним и нижним колонтитулом, вы можете использовать различные методы. Вот несколько примеров:

Метод 1. Использование классов Bootstrap

<div class="card">
  <div class="card-header">
    Header Content
  </div>
  <div class="card-body">
    Card Content
  </div>
  <div class="card-footer">
    Footer Content
  </div>
</div>

Метод 2. Настройка классов Bootstrap

<div class="card">
  <h5 class="card-header">Header Content</h5>
  <div class="card-body">
    Card Content
  </div>
  <div class="card-footer">
    Footer Content
  </div>
</div>

Метод 3. Непосредственное использование классов card-header и card-footer

<div class="card">
  <div class="card-header">Header Content</div>
  <div class="card-body">
    Card Content
  </div>
  <div class="card-footer">Footer Content</div>
</div>

<div class="card">
  <div class="card-header">
    <h5 class="card-title">Header Content</h5>
    <h6 class="card-subtitle">Subtitle</h6>
  </div>
  <div class="card-body">
    Card Content
  </div>
  <div class="card-footer">
    Footer Content
  </div>
</div>

Это всего лишь несколько примеров того, как можно создать карту Bootstrap с верхним и нижним колонтитулом. В зависимости от ваших конкретных требований вы можете дополнительно настроить внешний вид и функциональность карточки, используя обширные классы CSS и JavaScript Bootstrap.