WP

WP-Recall

Yworld Prime Designer
Дополнение к PrimeForum

WP

WP-Recall

Yworld PF Motivation
Дополнение к PrimeForum

WP

WP-Recall

Prime Yworld PRO
Дополнение к PrimeForum

Пример карточки на Bootstrap 4

Очень простой и понятный пример разметки карточки с использованием Bootstrap 4. Если вы уже используете на своем сайте Bootstrap 4 и вам необходимо разместить простенькие карточки, то вот решение. Все очень просто и по этому не займет у вас много время на внедрение.

HTML:

<div class="card-container">
  <div class="card">
    <img class="card-img-top" src="https://worldwebinfo.ru/wp-content/uploads/2017/12/code-snippets-300x124.png" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Карточка для сайта</h4>
      <p class="card-text">Текст содержимого карточки, описывает карточку, возможно различное выделение текста.</p>
      <a href="#" class="btn btn-primary">Кнопка</a>
    </div>
  </div>
</div>

CSS:

.card-container {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

Вот и все, теперь у вас будет на сайте карточка не сложная на Bootstrap 4. Ниже пример получившейся карточки.

Card image cap

Карточка для сайта

Текст содержимого карточки, описывает карточку, возможно различное выделение текста.

Кнопка
5

Автор публикации: Игорь logo

95 публикаций 100500 Идей :)

Весь спектр SEO услуг, реклама, продвижение в социальных сетях. Изготовление сайтов.

Обратится в PM Отзывы Подписаться

Ответить

Войти с помощью: