Headlines - Bootstrap grid

#1

Hi,

I'm doing the Headlines project, making a grid of images like so: https://s3.amazonaws.com/codecademy-content/projects/headlines/index.html

Using Bootstrap, I've made 4 rows with 3 columns, uploaded the images and offset the last row so my columns are all lined up fine. No need to see my code really just a bunch of 

<div class='col-md-4'>
     <img src='https://www.blahblahblah.com'>
</div>

I can't seem to find a way to offset the row heights like they have done, all my rows begin at the same height. I'm sure I could individually move the images but that seems like too much effort and too messy. Is there an easy way to do it so that the image below leaves a gap of say 25px between itself and the one above?

Any help or links to websites that could help would be much appreciated.

Thanks,

Saman

#2

Well your full code is required if we we where to assist in this problem. Rows are block level elements, and should be below each other

#3

Here is my code:


    <div class='row'>
      <div class='col-md-4'>
        <img src='https://s3.amazonaws.com/codecademy-content/projects/headlines/p1.jpg'>
      </div>
      <div class='col-md-4'>
        <img src='https://s3.amazonaws.com/codecademy-content/projects/headlines/p6.jpg'>
      </div>
      <div class='col-md-4'>
        <img src='https://s3.amazonaws.com/codecademy-content/projects/headlines/p7.jpg'>
      </div>
    </div>

    <div class='row'>
      <div class='col-md-4'>
        <img src='https://s3.amazonaws.com/codecademy-content/projects/headlines/p2.jpg'>
      </div>
      <div class='col-md-4'>
        <img src='https://s3.amazonaws.com/codecademy-content/projects/headlines/p5.jpg'>
      </div>
      <div class='col-md-4'>
        <img src='https://s3.amazonaws.com/codecademy-content/projects/headlines/p8.jpg'>
      </div>
    </div>

    <div class='row'>
      <div class='col-md-4'>
        <img src='https://s3.amazonaws.com/codecademy-content/projects/headlines/p3.jpg'>
      </div>
      <div class='col-md-4'>
        <img src='https://s3.amazonaws.com/codecademy-content/projects/headlines/p4.jpg'>
      </div>
      <div class='col-md-4'>
        <img src='https://s3.amazonaws.com/codecademy-content/projects/headlines/p9.jpg'>
      </div>
    </div>

    <div class='row'>
      <div class='col-md-4 col-md-offset-8'>
        <img src='https://s3.amazonaws.com/codecademy-content/projects/headlines/p10.jpg'>
      </div>
  </div>
</div>

<div class="footer">
  <div class="container">
  </div>
</div>
#4

Here is the css i have done so far - not much.

/* cards */
.cards {
height: 1000px;
background-color: #FFC200;
}

img {
  padding: 13px 0px 13px 0px;   
}
#5

This is what it looks like - see the gaps between the rows where the images are different size. Thats what I want to remove (sorry for all the separate posts)

MyCode.PNG1283x813 813 KB

#6

Why not simple do this then? Just tweak the gaps between the images a little bit, and it can look really nice

#7

You hero, thanks.

Seems like I've been thinking about it the wrong way.

thank you.

#8

Do you also understand why this works?

#9

I think so, correct me if I'm wrong.

You are making 1 row and as only one image can fit in a col-md-4 when you add more they stack vertically essentially each image acts like a row in that column?

#10

Sort of, the image will sit side by side if there would be enough room inside the col (images are inline elements), but since there isn't enough room, they are pushed below each other.

#11

Yeah that makes sense now. Thanks for the help!

#13

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.