[SOLVED] (Bootstrap) .img-responsive and .col- not working together

Tried my google-fu with no luck and found no solutions from kind souls in chat.

Check out this Twitch.tv App mockup I made: http://codepen.io/ellereeeee/pen/eBZmKr?editors=1000

There are five icons for five twitch channels at the bottom. I want to put them in a bootstrap row so I can put some text to the right of it

The bottom three icons take up all the space of the parent div. They have the .img-responsive class, but no col- classes.

The top two icons do not take up all the space of the parent div; they are too small. They have both the .img-responsive classes AND col- classes.

This is driving me absolutely crazy; please help!

Edit: I found a solution thanks to fellow FCC’er @Chiamaka

My problem was giving the picture div the col classes, while I should have put the picture div in another div that had the column classes.

You can find the correct code here: https://gist.github.com/Chiamaka/d77624ba913ba4c4cea251898e628520

Thanks for sharing your solution! I’m sure it will help someone else in future :slight_smile: