Bootstrap 4 – Cards

Card là một vùng style nổi bật, mà bạn có thể gặp ở nhiều website. Bootstrap 4 cung cấp nhiều tùy chỉnh cho phần nội dung card như alignment, padding, colors, headings

Basic Card

Để tạo một Basic Card, thêm .card va .card-body vào element chứa bên ngoài card.

Dùng .card-title.card-text cho title và text trong card.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card card-body">
      <h4 class="card-title">Boot Polish</h4>
      <p class="card-text">Boot polish is a waxy paste, cream, or liquid used to polish, shine, and waterproof leather shoes or boots to extend
        the footwear's life, and restore, maintain and improve their appearance.</p>
      <a href="#" class="btn btn-primary">More</a>
    </div>
  </div>

</body>

</html>

Header & Footer

Bạn có thể dùng .card-header.card-footer trong element div để tạo headerfooter cho card.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card" style="max-width: 20rem;">
      <div class="card-header">
        Sponsored Content
      </div>
      <div class="card-body">
        <h4 class="card-title">Ugg Boots</h4>
        <p class="card-text">Best ugg boots on the planet. Free shipping, 24/7 customer service.</p>
      </div>
      <div class="card-footer">
        By Uuuuggghhh.com
      </div>
    </div>
  </div>

</body>

</html>

Trong ví dụ trên, <div class=”card-body”> nằm cùng cấp với header và footer nhằm để header và footer full kích thước.

HTML Headers

Bạn cũng có thể dùng .card-header cho bất kỳ HTML header nào khác (H1-H6).

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card" style="max-width: 20rem;">
      <h3 class="card-header">
        Cold Feet?
      </h3>
      <div class="card-body">
        <h4 class="card-title">Ugg Boots</h4>
        <p class="card-text">Best ugg boots on the planet. Free shipping, 24/7 customer service.</p>
      </div>
      <div class="card-footer">
        By Uuuuggghhh.com
      </div>
    </div>
  </div>

</body>

</html>

Header Navigation

Bạn có thể sử dụng Bootstrap nav pill hay nav tab trong card.

Nav Tab

Thêm .card-header-tabs vào element <ul>.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container">
        <div class="card" style="max-width: 20rem;">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Ugg</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Moccasins</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Go Go</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <h4 class="card-title">Ugg Boots</h4>
                <p class="card-text">Best ugg boots on the planet. Free shipping, 24/7 customer service.</p>
            </div>
            <div class="card-footer">
                By Uuuuggghhh.com
            </div>
        </div>
    </div>

</body>

</html>

Nav Pill

Tư tự thêm class .card-header-pills vào ul

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card" style="max-width: 20rem;">
      <div class="card-header">
        <ul class="nav nav-pills card-header-pills">
          <li class="nav-item">
            <a class="nav-link active" href="#">Ugg</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Moccasins</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Go Go</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <h4 class="card-title">Ugg Boots</h4>
        <p class="card-text">Best ugg boots on the planet. Free shipping, 24/7 customer service.</p>
      </div>
      <div class="card-footer">
        By Uuuuggghhh.com
      </div>
    </div>
  </div>

</body>

</html>

Flush Content (Bỏ Padding)

Mặc định .card-bodypadding. Nhằm tạo khoản cách giữa text và biên.

Trong trường hợp bạn muốn loại bỏ padding này nhưng trong trường hợp dùng hình ảnh. Bạn chỉ cần không dùng class .card-body.

Trong trường hợp này. Bao bên ngoài vẫn là class .card, phần .card-body vẫn được dùng cho những đoạn bạn muốn giữ lại padding còn phần hình ảnh bạn không bao bằng .card-body.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card" style="max-width: 202px;">

      <!-- Heading -->
      <div class="card-body">
        <h4 class="card-title">Sun Gone</h4>
        <h6 class="card-subtitle text-muted">Sun disappears!</h6>
      </div>

      <!-- Image -->
      <img src="https://editor.ecntt.com/img/samples/12s.jpg" alt="Photo of sunset">

      <!-- Text Content -->
      <div class="card-body">
        <p class="card-text">The sun disappeared behind the horizon today. Experts claim it could be gone for good!</p>
      </div>

  </div>
  </div>

</body>

</html>

Top & Bottom

Trong trường hợp bạn muốn hình ảnh nằm ở top hay bottom. Để hình ảnh bo tròn theo card có thể dùng class .card-img-top hay .card-img-bottom cho <img>.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container">
        <div class="card" style="max-width: 202px;">

            <!-- Image -->
            <img class="card-img-top" src="https://editor.ecntt.com/img/samples/12s.jpg" alt="Photo of sunset">

            <!-- Text Content -->
            <div class="card-body">
                <p class="card-text">Well it was good while it lasted...</p>
            </div>

        </div>
    </div>

</body>

</html>

List Groups

Bạn có thể dùng list groups trong card. Dùng .list-group-flush để cho list groups tràn ra vừa kích thước card.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card" style="max-width: 20rem;">

      <!-- Card Header -->
      <div class="card-header">
        Sun Gone
      </div>

      <!-- Card Block -->
      <div class="card-body">
        <p class="card-text">Expert opinions are divided. Here's what they say will happen next.</p>
      </div>

      <!-- List Group -->
      <ul class="list-group list-group-flush">
        <li class="list-group-item">The Sun will come back</li>
        <li class="list-group-item">The Sun won't come back</li>
        <li class="list-group-item">It will have babies and spawn thousands more suns</li>
        <li class="list-group-item">Good night!</li>
      </ul>

    </div>
  </div>

</body>

</html>

Links

Dùng class .card-link để tạo các link trong card.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card" style="max-width: 20rem;">

      <div class="card-body">
        <h4 class="card-title">Sun Gone</h4>
        <p class="card-text">Here are the top resources for all things related to the Sun.</p>
        <!-- Links -->
        <a href="#" class="card-link">Sun Gone</a>
        <a href="#" class="card-link">Still Gone</a>
      </div>

    </div>
  </div>

</body>

</html>

Text Alignment

Bạn có thể sử dụng các class text alignment như .text-left, .text-right, .text-center, .text-justify, và .text-nowrap. để canh chỉnh text.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card text-center" style="max-width: 202px;">

      <!-- Heading -->
      <div class="card-body">
        <h4 class="card-title">Sun Gone</h4>
        <h6 class="card-subtitle text-muted">Sun disappears!</h6>
      </div>

      <!-- Image -->
      <img src="https://editor.ecntt.com/img/samples/12s.jpg" alt="Photo of sunset">

      <!-- Text Content -->
      <div class="card-body">
        <p class="card-text">The sun disappeared behind the horizon today. Experts claim it could be gone for good!</p>
        <a href="#" class="btn btn-primary">Full Report</a>
      </div>

    </div>
  </div>

</body>

</html>

Contextual Color

Bạn cũng có thể dùng các class colorbackground để style cho card.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card text-white bg-primary" style="max-width: 20rem;">

      <div class="card-body">
        <h4 class="card-title">Sun Gone</h4>
        <p class="card-text">Here are the top resources for all things related to the Sun.</p>
        <!-- Links -->
        <a href="#" class="card-link">Sun Gone</a>
        <a href="#" class="card-link">Still Gone</a>
      </div>

    </div>
  </div>

</body>

</html>

Border Color

Và dùng các class Border Color

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card text-primary border-primary" style="max-width: 20rem;">

      <div class="card-body">
        <h4 class="card-title">Sun Gone</h4>
        <p class="card-text">Here are the top resources for all things related to the Sun.</p>
        <!-- Links -->
        <a href="#" class="card-link">Sun Gone</a>
        <a href="#" class="card-link">Still Gone</a>
      </div>

    </div>
  </div>

</body>

</html>

Image Overlay

Bạn có thể style để img hiển thị như background và text nằm trên nó.

Dùng class .card-img-overlay cho đoạn text.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card card-inverse text-center" style="max-width: 202px;">

      <!-- Image -->
      <img class="card-img-top" src="https://editor.ecntt.com/img/samples/12s.jpg" alt="Photo of sunset">

      <!-- Text Overlay -->
      <div class="card-img-overlay">
        <h4 class="card-title">What Next?</h4>
        <p class="card-text">Is this the end?</p>
      </div>

      <div class="card-body">
        Tune in next week to find out!
      </div>

    </div>
  </div>

</body>

</html>

Card Width

Theo default card sẽ lấy full chiều rộng. Để thay đổi bạn có thể style lại.

CSS

Có thể dùng css. với các thuộc tính width hoặc max-width.

Grid

Có thể dùng Bootstrap grid.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">

        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Sun Gone</h4>
            <p class="card-text">Here are the top resources for all things related to the Sun.</p>
            <a href="#" class="card-link">Sun Gone</a>
            <a href="#" class="card-link">Still Gone</a>
          </div>
        </div>

      </div>
      <div class="col-sm-6">

        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Sun Up</h4>
            <p class="card-text">Looks like the Sun has returned. Here's why.</p>
            <a href="#" class="btn btn-primary">Download Report</a>
          </div>
        </div>

      </div>
    </div>
  </div>
  </div>

</body>

</html>

Card Groups

Card Groups giúp bạn tạo nhiều card với kích thước bằng nhau.

Để làm điều này, bạn sử dụng class .card-group bao bên ngoài.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card-group">

      <!-- Card 1 -->
      <div class="card">
        <div class="card-header">Sun Gone</div>
        <div class="card-body">
          <p class="card-text">The top resources for all things related to the Sun.</p>
          <a href="#" class="card-link">Sun Gone</a>
          <a href="#" class="card-link">Still Gone</a>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="card">
        <div class="card-header">Sun Up</div>
        <div class="card-body">
          <p class="card-text">Looks like the Sun has returned. Here's
            <a href="#" class="card-link">why</a>.</p>
        </div>
      </div>

    </div>
  </div>

</body>

</html>

Card Decks

Card Decks tương tự như card groups, nhưng tạo các nhóm card cách nhau.

Để làm điều này, lồng tất cả card trong class .card-deck và bao bên ngoài là .card-deck-wrapper.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card-deck-wrapper">
      <div class="card-deck">

        <!-- Card 1 -->
        <div class="card">
          <div class="card-header">Sun Gone</div>
          <div class="card-body">
            <p class="card-text">The top resources for all things related to the Sun.</p>
            <a href="#" class="card-link">Sun Gone</a>
            <a href="#" class="card-link">Still Gone</a>
          </div>
        </div>

        <!-- Card 2 -->
        <div class="card">
          <div class="card-header">Sun Up</div>
          <div class="card-body">
            <p class="card-text">Looks like the Sun has returned. Here's
              <a href="#" class="card-link">why</a>.</p>
          </div>
        </div>

      </div>
    </div>
  </div>

</body>

</html>

Card Columns

Card Columns giúp hiển thị nhiều card trong cùng một cột.

Để làm điều này bạn cần class .card-columns.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card-columns">

      <!-- Card 1 -->
      <div class="card">
        <div class="card-header">Card 1</div>
        <div class="card-body">
          <p class="card-text">Text for this card.</p>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Card 2</h4>
          <p class="card-text">Text for this card.</p>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="card">
        <div class="card-header">Card 3</div>
        <div class="card-body">
          <p class="card-text">Text for this card. Here's
            <a href="#" class="card-link">why</a>.</p>
        </div>
        <div class="card-footer">Footer</div>
      </div>

      <!-- Card 4 -->
      <div class="card">
        <div class="card-header">Card 4</div>
        <div class="card-body">
          <p class="card-text">Text for this card.</p>
        </div>
        <div class="card-footer">Footer</div>
      </div>

      <!-- Card 5 -->
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Card 5</h4>
          <p class="card-text">Text for this card.</p>
        </div>
      </div>

      <!-- Card 6 -->
      <div class="card">
        <div class="card-header">Card 6</div>
        <div class="card-body">
          <p class="card-text">Text for this card. Here's
            <a href="#" class="card-link">why</a>.</p>
        </div>
      </div>

      <!-- Card 7 -->
      <div class="card">
        <div class="card-header">Card 7</div>
        <div class="card-body">
          <p class="card-text">Text for this card. Here's
            <a href="#" class="card-link">why</a>.</p>
        </div>
        <div class="card-footer">Footer</div>
      </div>

      <!-- Card 8 -->
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Card 8</h4>
          <p class="card-text">Text for this card.</p>
        </div>
      </div>

    </div>
  </div>

</body>

</html>