Trying to place images side by side in tribute project

Trying to place images side by side in tribute project
0.0 0

#1

Hi! So I’m working on the tribute project and I’m not really sure where my code is going wrong. I’m trying to place three images side by side and I’ve used ‘col-md-4’, but the space between the images are fixed.

Here’s a preview:

My HTML:

<div class="container-fluid">
  <div class="row" id="pictures">
    <div class="col-md-4">
      <h1>ROBERT</h1>
      <h2>DOWNEY JR.</h2> 
      <p class="quote">“Mediocrity is my biggest fear. I’m not afraid of total failure because I don’t think that will happen. I’m not afraid of success because that beats the hell out of failure. It’s being in the middle that scares me.” - Robert Downey Jr.</p>
    </div>
    <div class="col-md-4"> <img id="image1" src="https://i.imgur.com/lEFLOF7.jpg"> </div>
    <div class="col-md-4"> <img id="image2" src="https://i.imgur.com/G0PA2Mf.jpg"> </div>
    <div class="col-md-4"> <img id="image3" src="https://i.imgur.com/SxJNo0I.jpg"> </div>
    
  </div>
</div>

And my CSS (same for the three images):

`#image1 {
  padding: 5px;
  width: 280px;
  height: auto;
  margin-top: 40px;
}`

As you can see I’m trying to put the header and three images side by side, any help how to fix this?


#2

A row can only have div cols which sum to 12. You have a row summing to 16, so the 3rd image drops down to the next line. If you want all of that content on the same row, try using col-md-3 for all 4 of the divs.

FYI - imgur.com does not allow hotlinking from a website, so even though it may work on your local computer, when you go to upload your project to an actual website, those images will not show.


#3

Not sure if you are using Bootstrap 3 or 4 for your project. If version 3, I recommend using the “img-responsive” class or “img-fluid” class for version 4, to make the images more responsive.

Based on the size of the images, I recommend using col-sm-3 instead of col-md-3. Also, try using the following to make the images all the same height.

img {
  padding: 5px;
  height: auto;
  margin-top: 40px;
}

#4

Playing around with your project, I came up with the following to see if you like the way this lays out on different width screens.
HTML (using Bootstrap 3)

<div class="container-fluid">
    <div class="col-md-3 summary text-center">
      <h1>ROBERT</h1>
      <h2>DOWNEY JR.</h2>
      <p class="quote">“Mediocrity is my biggest fear. I’m not afraid of total failure because I don’t think that will happen. I’m not afraid of success because that beats the hell out of failure. It’s being in the middle that scares me.” - Robert Downey Jr.</p>
    </div>
  <div class="col-md-9">
    <div class="row" id="pictures">
      <div class="col-xs-4"><img class="img-responsive" id="image1" src="https://i.imgur.com/lEFLOF7.jpg"></div>
      <div class="col-xs-4"><img class="img-responsive" id="image2" src="https://i.imgur.com/G0PA2Mf.jpg"></div>
      <div class="col-xs-4"><img class="img-responsive" id="image3" src="https://i.imgur.com/SxJNo0I.jpg"></div>
    </div>
  </div>
</div>

CSS

.summary, img {
  padding: 5px;
  height: auto;
  margin-top: 40px;
}

.summary h1 {
  margin-top: 0;
}