Карточка с изображением и фоном в качестве заголовка в Bootstrap 4

Question

Работая с некоторыми Bootstrap карточками, я хочу создать несколько карточек как с цветным фоном, так и с круглым изображением в заголовке, например:

Однако, когда я использую пример кода:

<!-- Background color -->
<div class="card-up aqua-gradient"></div>

<!-- Avatar -->
<div class="avatar mx-auto white">
  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg" class="rounded-circle img-responsive" alt="woman avatar">
</div>

<!-- Content -->
<div class="card-body">
  <!-- Name -->
  <h4 class="card-title font-weight-bold">Martha Smith</h4>
  <hr>
  <!-- Quotation -->
  <p><i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos,
    adipisci</p>
</div>

, в результате отсутствуют некоторые компоненты:

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

Answer 1

Я приготовил для вас очень простой пример. Надеюсь, это поможет.

.aqua-gradient {
  height: 300px;
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(233, 242, 233, 0.9878326330532213) 0%, rgba(0, 212, 255, 1) 51%, rgba(114, 156, 7, 1) 93%);
}

.image {
  margin-top: -150px;
}

.avatar-container {
  width: 90%;
  border: 1px solid #eee;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="avatar-container text-center mx-auto">
  <div class="card-up aqua-gradient"></div>
  <!-- Avatar -->
  <div class="avatar mx-auto white">
    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg" class="rounded-circle img-responsive bg-white p-3 image" alt="woman avatar">
  </div>
  <!-- Content -->
  <div class="card-body">
    <!-- Name -->
    <h4 class="card-title font-weight-bold">Martha Smith</h4>
    <hr>
    <!-- Quotation -->
    <p><i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci
    </p>
  </div>
</div>