CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-modal
Bimal Das
Bimal Das

Reputation: 1992

Bootstrap img-rounded with .col class not working

I have bootstrap framework page, which having two images.

1st image : This image has two classes : col-sm-12 and img-rounded .

2nd image : This image has only one class : img-rounded.

The problem is , for the first image, the image having no border radius. But if I remove col-sm-12 from the tag , then this border-radius is clearly visible. What is wrong in these two case ?

Why for 1st case, border-radius not showing ?

Fiddle here

<div class="row" style="background-color:red;">
  <img class="col-sm-4 img-rounded" 
  src="http://images.indianexpress.com/2014/11/doordarshan422.jpg" >
</div>
<br>
<div class="row" style="background-color:red;">
  <img class="img-rounded" 
  src="http://images.indianexpress.com/2014/11/doordarshan422.jpg" >
</div>

Upvotes: 1

Views: 7851

Answers (2)

Harsh Sanghani
Harsh Sanghani

Reputation: 1712

If you apply the img-rounded class with the col-sm-4 then the img tag occupies the padding right and left of 15px of the class col-sm-4 and img-rounded class has border-radius 6px only, So its not apply in your first case.

If you want to apply in first case then increase the border-radius and set it to greater then 15px.

may be you got your answer.

Upvotes: 2

Jan Klimo
Jan Klimo

Reputation: 4930

You'll need to apply your col-sm-4 class to the div containing the image, not the image itself:

<div class="container">
  <div class="row" style="background-color:red;">
    <div class="col-sm-4">
      <img class="img-rounded" 
           src="http://images.indianexpress.com/2014/11/doordarshan422.jpg">
    </div>
  </div>
</div>

Upvotes: 1

Related Questions