HTML bootstrap для отображения изображений рядом?

Question

Я хочу, чтобы три изображения располагались рядом (на рабочем столе), а заголовки и текст абзаца располагались под каждым соответствующим изображением.

Кто-нибудь знает, почему это не будет работать для меня? Я предполагаю, что мой код как-то неверен

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="portfolio-container">
  <section class="portfolio">
    <div class="row">
      <div class="col-12 my-5">
        <h2 class="text-uppercase">Portfolio</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-6 col-lg-4">
        <div class="media">
          <div class="d-none d-sm-block">
            <img src="images/whiskey-drop.png" class="rounded-circle mr-3" height=50 width=50>
          </div>
          <div class="media-body">
            <h3>Whiskey Drop</h3>
            <h4>HTML, CSS, Bootstrap</h4>
            <p>An e-commerce website for a premium whiskey service.</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="media">
            <div class="d-none d-sm-block">
              <img src="images/rosie-odenkirk.png" class="rounded-circle mr-3" height=50 width=50>
            </div>
            <div class="media-body">
              <h3>Resume</h3>
              <h4>HTML, CSS, Bootstrap</h4>
              <p>A responsive and user friendly resume showcasing a sample candidate in the best light possible.</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12 d-md-none d-lg-block col-lg-4">
            <div class="media">
              <div class="d-none d-sm-block">
                <img src="images/flappy-bird.png" class="rounded-circle mr-3" height=50 width=50>
              </div>
              <div class="media-body">
                <h3>Flappy Bird</h3>
                <h4>Python and Django</h4>
                <p>A fun and interactive game where you are in control of a bird as you navigate through tight spaces.</p>
              </div>
            </div>
          </div>

Answer 1

Вы создаете новый row для каждого элемента

Вместо этого поместите col в один row:

<div class="row">
    <div class="col-4">

    </div>
    <div class="col-4">

    </div>
    <div class="col-4">

    </div>
</div>

Answer 2

Вам не нужны новые <div class="row"></div> каждый <div class="col-lg-4"></div>. Вы можете просто обернуть его вокруг всего лота, чтобы очистить поплавки.

<div class="row">
    <div class="col-12 my-5">
        <h2 class="text-uppercase">Portfolio</h2>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        <div class="media">
            <div class="d-none d-sm-block">
                <img src="images/whiskey-drop.png" class="rounded-circle mr-3" height=50 width=50>
            </div>
            <div class="media-body">
                <h3>Whiskey Drop</h3>
                <h4>HTML, CSS, Bootstrap</h4>
                <p>An e-commerce website for a premium whiskey service.</p>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        <div class="media">
            <div class="d-none d-sm-block">
                <img src="images/rosie-odenkirk.png" class="rounded-circle mr-3" height=50 width=50>
            </div>
            <div class="media-body">
                <h3>Resume</h3>
                <h4>HTML, CSS, Bootstrap</h4>
                <p>A responsive and user friendly resume showcasing a sample candidate in the best light possible.</p>
            </div>
        </div>
    </div>
    <div class="col-12 d-md-none d-lg-block col-lg-4">
        <div class="media">
            <div class="d-none d-sm-block">
                <img src="images/flappy-bird.png" class="rounded-circle mr-3" height=50 width=50>
            </div>
            <div class="media-body">
                <h3>Flappy Bird</h3>
                <h4>Python and Django</h4>
                <p>A fun and interactive game where you are in control of a bird as you navigate through tight spaces.</p>
            </div>
        </div>
    </div>
</div>

Также убедитесь, что вы упаковываете значения height и width тоже с помощью "".