Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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,660 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;
}