Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Prototyping with Bootstrap Building a Header, Navigation, and Jumbotron Component

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by Elena Paraschiv
Elena Paraschiv
9,938 Points

I need some help to edit a grid

Hey guys,

Imgur If you look in the picture above I ham having soem problems to set the width and height of the images so the grid can look nice and clean. Do you guys know a fix in the bootstrap for this ? Any help is appreciated, Elena 

<div class="row">
  <div class="col-xs-3"><img class="img-responsive" src="img/renata0.jpg" width="630px"height="472px"></div>
  <div class="col-xs-3"><img class="img-responsive" src="img/renata2.jpg"></div>
  <div class="col-xs-3"><img class="img-responsive" src="img/renata3.jpg"></div>
  <div class="col-xs-3"><img class="img-responsive" src="img/renata4.jpg"></div>
</div>
<div class="row">
  <div class="col-xs-3"><img class="img-responsive" src="img/renata0.jpg"></div>
  <div class="col-xs-3"><img class="img-responsive" src="img/renata2.jpg"></div>
  <div class="col-xs-3"><img class="img-responsive" src="img/renata3.jpg"></div>
  <div class="col-xs-3"><img class="img-responsive" src="img/renata4.jpg"></div>
</div>
<div class="row">
  <div class="col-xs-3"><img class="img-responsive" src="img/renata0.jpg"></div>
  <div class="col-xs-3"><img class="img-responsive" src="img/renata2.jpg"></div>
  <div class="col-xs-3"><img class="img-responsive" src="img/renata3.jpg"></div>
  <div class="col-xs-3"><img class="img-responsive" src="img/renata4.jpg"></div>
</div>
</div>

3 Answers

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

thanks anyways. In the end I just resized the images to the same resolution , and that seemed to fix it

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

Sorry, I don't know much about Bootstrap, more of a bourbon/neat guy. I did find some documentation on responsive images, this might help:

bootstrap

I hope this helps.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Nice, I'm glad you fixed it!

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

Hi Elena,

Looks to me as though your 2nd img in each row is breaking out of your div component causing it to clip under the next row as its larger.

Try using a border property on your class="col-xs-3" to see the edges of your div's.

.col-xs-3 {
  border: 5px solid black;
}

Should do the trick them you might need to manipulate the size of your div's and restrict the img size to 100% of its parent div.

Something like this should do it.

.col-xs-3 {
  border: 5px solid black; //this can be removed once you have the imgs and divs playing nicely
  width: 630px;     //this will set the divs containing the img's to a set height and width
  height: 472px;
}

.img-responsive { //this will limit the img size to its container 
  width:100%
  height:100%
}

Hope this helps

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Hey Billy, Thanks for the input. This solution seems to make it with the proportions, but the problem is that it goes out of the row. I want to keep the images inside the row with 4 columns