Как скопировать youtube "видеокарту". Я не могу заставить значок пользователя занимать 3 строки. Не уверен, что мне следует делать это с помощью bootstrap или сгибания или чего-то еще

Question

Это макет, который я ищу

<section>
<div class="row">
    <div class="col-3" style="background-color: rgb(163, 163, 163)">
        <!-- VIDEO THUMBNAIL -->
        <a mat-list-item routerLink=''>
            <img class="" src="../../assets/img/thumbnails/colibri.jpg" alt="colibri" style="max-width:100%;">
        </a>
        <!-- Uploaders user image -->
        <a mat-list-item>
            <img src="../../assets/img/avatar.png" alt="Avatar" style="border-radius: 50%; width:40px;">
        </a>
        <!-- video heading and information -->
        <h2>Animals in rainforest</h2>
        <a href="">Content Creator</a>
        <p>2,1 milj. views · 2 years ago</p>
    </div>
</div>

Я не могу заставить значок аватара занимать три строки слева

значок аватара, h2, создатель контента и информация просто накладываются друг на друга. (извините, если сообщение сбивает с толку, это моя первая публикация в переполнении стека). С уважением Angular разработчик из Финляндии

Answer 1

<div class="col-md-6 col-lg-4 my-3">
  <div class="card">
    <img class="card-img-top" src="..." alt="...">
    <div class="card-body">
      <div class="media">
        <img src="..." class="mr-3" style="max-width: 80px" alt="...">
        <div class="media-body">
          <h5 class="mt-0">Animals in rainforest</h5>
          <a href="">Content Creator</a>
          <p>2,1 milj. views · 2 years ago</p>
        </div>
      </div>
    </div>
  </div>
</div>

... должен это сделать. Вот демонстрация:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4 my-3">
      <div class="card">
        <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/d/db/Colibri-thalassinus-001-edit.jpg" alt="colibri">
        <div class="card-body">
          <div class="media">
            <img src="https://img.stackshare.io/service/1927/so-icon.png" class="mr-3" style="max-width: 80px" alt="...">
            <div class="media-body">
              <h5 class="mt-0">Animals in rainforest</h5>
              <a href="">Content Creator</a>
              <p>2,1 milj. views · 2 years ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-4 my-3">
      <div class="card">
        <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/d/db/Colibri-thalassinus-001-edit.jpg" alt="colibri">
        <div class="card-body">
          <div class="media">
            <img src="https://img.stackshare.io/service/1927/so-icon.png" class="mr-3" style="max-width: 80px" alt="...">
            <div class="media-body">
              <h5 class="mt-0">Animals in rainforest</h5>
              <a href="">Content Creator</a>
              <p>2,1 milj. views · 2 years ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-4 my-3">
      <div class="card">
        <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/d/db/Colibri-thalassinus-001-edit.jpg" alt="colibri">
        <div class="card-body">
          <div class="media">
            <img src="https://img.stackshare.io/service/1927/so-icon.png" class="mr-3" style="max-width: 80px" alt="...">
            <div class="media-body">
              <h5 class="mt-0">Animals in rainforest</h5>
              <a href="">Content Creator</a>
              <p>2,1 milj. views · 2 years ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-4 my-3">
      <div class="card">
        <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/d/db/Colibri-thalassinus-001-edit.jpg" alt="colibri">
        <div class="card-body">
          <div class="media">
            <img src="https://img.stackshare.io/service/1927/so-icon.png" class="mr-3" style="max-width: 80px" alt="...">
            <div class="media-body">
              <h5 class="mt-0">Animals in rainforest</h5>
              <a href="">Content Creator</a>
              <p>2,1 milj. views · 2 years ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap документы:

• медиа-объект
• карты
• сетка
• коммунальные услуги