Bootstrap 4. Карточки

Классы: card, card-body, card-title, card-text.
card-img-overlay - отображает текст на картинке
card-group - группа карточек, card-deck - делает промежутки между карточками



<!-- Карточки. Начало -->
<div class="container-fluid mt-5" style="background: #eee">
<div class="row">
<div class="col">
<div class="card p-5 text-center">
<img src="img/sea.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Заголовок</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, a dolores ea voluptas amet recusandae dicta asperiores doloremque autem nobis dolore omnis quae eos maiores perferendis perspiciatis alias aliquid reprehenderit.</p>
<a href="" class="btn btn-primary">Купить</a>
</div>
</div>
</div>

<!-- 
card-img-overlay - отображает текст на картинке
-->
<div class="col">
<div class="card p-5 text-center">
<img src="img/sea.jpg" alt="" class="card-img-top">
<div class="card-img-overlay">
<div class="card-body">
<h4 class="card-title">Заголовок</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, a dolores ea voluptas amet recusandae dicta asperiores doloremque autem nobis dolore omnis quae eos maiores perferendis perspiciatis alias aliquid reprehenderit.</p>
<a href="" class="btn btn-primary">Купить</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Карточки. Конец -->

<!-- Группа карточек с помощью .card-group. Начало -->
<!-- 
Если нам нужны карточки с отступами, то класс card-group меняем на card-deck!
-->
<div class="container-fluid mt-5">
<div class="card-group">
<div class="card p-5 text-center">
<img src="img/sea.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Заголовок</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, a dolores ea voluptas amet recusandae dicta asperiores doloremque autem nobis dolore omnis quae eos maiores perferendis perspiciatis alias aliquid reprehenderit.</p>
<a href="" class="btn btn-primary">Купить</a>
</div>
</div>

<div class="card p-5 text-center">
<img src="img/sea.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Заголовок</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, a dolores ea voluptas amet recusandae dicta asperiores doloremque autem nobis dolore omnis quae eos maiores perferendis perspiciatis alias aliquid reprehenderit.</p>
<a href="" class="btn btn-primary">Купить</a>
</div>
</div>

<div class="card p-5 text-center">
<img src="img/sea.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Заголовок</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, a dolores ea voluptas amet recusandae dicta asperiores doloremque autem nobis dolore omnis quae eos maiores perferendis perspiciatis alias aliquid reprehenderit.</p>
<a href="" class="btn btn-primary">Купить</a>
</div>
</div>

<div class="card p-5 text-center">
<img src="img/sea.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Заголовок</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, a dolores ea voluptas amet recusandae dicta asperiores doloremque autem nobis dolore omnis quae eos maiores perferendis perspiciatis alias aliquid reprehenderit.</p>
<a href="" class="btn btn-primary">Купить</a>
</div>
</div>
</div>
</div>
<!-- Группа карточек. Конец -->