CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tipoki13
Tipoki13

Reputation: 11

HTML bootstrap for displaying images side-by-side?

I want the three images to be side-by-side (on desktop), with the headings and paragraph text to be beneath each respective image.

Does anyone know why it wouldn't be working for me? I presume my code is incorrect somehow

<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>

Upvotes: 1

Views: 603

Answers (2)

David Morris
David Morris

Reputation: 120

You don't need a new <div class="row"></div> around every <div class="col-lg-4"></div>. You can just wrap it around the entire lot to clear the floats.

<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>

Also make sure that you wrap your height and width values with "" too.

Upvotes: 0

Barskey
Barskey

Reputation: 463

You are creating a new row for every item

Instead, put the col's in one row:

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

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

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

    </div>
</div>

Upvotes: 2

Related Questions