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

E A
E A
3,563 Points
Posted by E A
E A
3,563 Points

Bootstrap Grid

I am trying to build an image portfolio.

I have the following code:

<div class="container"> <div class="row"> <div class="col-sm-5 image-wrapper"><img src="images/image-1.jpg" class="img-responsive"/></div> <div class="col-sm-5 image-wrapper"><img src="images/image-2.jpg" class="img-responsive"/></div> <div class="col-sm-2 image-wrapper"><img src="images/image-3.jpg" class="img-responsive"/></div> </div> </div>

However, 3 images in one row have different heights. How can I make them equal height?

Thanks

3 Answers

Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

Hello, if you look in the bootstrap documentation you will see that there is something called grid system. http://getbootstrap.com/css/#grid

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 image-wrapper"><img src="images/image-1.jpg" class="img-responsive"/></div>

col-xs-12 = all the width on extra small devices (Like smartphones).

col-sm-6 = 6 columns in small devices, fitting 2 images per row. (Like tablets).

col-md-4 = 4 columns in medium devices, fitting 3 images per row.

col-lg-3 = 3 columns in larger devices, fitting 4 images per row.

So if you make all div of the same column size, all images will have the same size.

E A
E A
3,563 Points
E A
E A
3,563 Points

Hi Jesus,

Thanks for your reply.

But what if I want to have differently sized columns in one row? How do I make all of them equal height?

Thanks

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Depending what you are trying to accomplish with your layout there could be a few options.

Try:

.image-wrapper {
  margin-left: auto;
  margin-right: auto;
}
.img-responsive {
  width: 100%; // May or may not be what you are looking for
  height: 100%; // May or may not be what you are looking for
  vertical-align: middle;
}