Displaying difference between bootstrap col-* class in <div> and <img> class?

#1

I have code:

http://codepen.io/atthis/pen/wgqXOa

Why i have to use special div for <div class="col-*-8"> for image ? When i put class “col-*-8” inside tag<img> content is displayed not like i expected, and border is not around image anymore so i wonder… why? :smiley:

#2

Hi,

As far as I understand, the .col-*-* classes are for container element like div. Images are not container and hence it is not advised to use col class on them.

In Bootstrap, .col-*-* classes are floated and have padding applied to them on both the sides which we generally don’t want for images; so its good to reserve col classes for divs and put the content, including images, inside those divs.

Hope I made it clear.

1 Like
#3

Yup, that could be the padding which has destroyed my border. Thank you! Now I’m a bit closer to understanding :smiley:

#4