Bootstrap 5 Cards Заголовки, текст и ссылки

Карточки Заголовки, текст и ссылки используются для добавления заголовка, текстового содержимого и ссылок на карточку. Класс .card-title используется с тегом <h*> для создания заголовка карты, а класс .card-subtitle используется с тегом <h*> для создания подзаголовка карты. Точно так же класс .card-link используется с тегом <a> для создания ссылки на карточку.

Карточки Заголовки, текст и ссылки Используемые классы:

• .card-title: этот класс используется для создания заголовка карты. Используется с тегом <h*>.
• .card-subtitle: этот класс используется для создания подзаголовка карточки. Используется с тегом <h*>.
• .card-text: этот класс используется для создания текстового содержимого карты.
• .card-link: этот класс используется для добавления ссылок на карту. Используется с тегом <a>.

Синтаксис:

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">
            Card subtitle
        </h6>
           <p class="card-text">Text Content</p>
           <a href="#" class="card-link">Link</a>
    </div>
</div>

Пример 1: В этом примере мы создадим карточку, содержащую изображение, заголовок и подзаголовок.

Выход:

Пример 2. В этом примере мы создадим карточку, содержащую изображение, заголовок, подзаголовок, текст и ссылку.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/components/card/#titles-text-and-links