CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Samrat Luitel
Samrat Luitel

Reputation: 379

Bootstrap img-responsive not working?

I am just learning front end development. I would like you to tell me why img-responsive is not working. Here is the my code. And yeah If I am doing couple of other bad practises do tell me.

HTML:

<div class="container-fluid">
  <div class="background">
 <div class="row">
  <div class="col-xs-12 col-md-12">
    <h1 class="text-center heading">H.G Wells</h1>
  <hr>  
     </div> 
        </div>
  <div class="row">
   <div class="col-xs-12 col-md-6 col-lg-6"> 
     <div id="word1">
       <h2 class="text-center">Father of Science friction books</h2>
       <div class="img-responsive img-rounded">
       <img src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Grateful_Dead_-_Jerry_Garcia.jpg" alt="HGWells" >
     </div>
     </div>
    </div>  
</div>
</div>
</div>

CSS

body{
  top-margin:60px;
}
.heading{
  font-size:400%;
}
.background{
  background-color:lightgrey;
  margin-top:5rem;
}
#word1{
  margin-top:1rem;
  margin-bottom:1rem;
  color:black;
}

Upvotes: 2

Views: 1318

Answers (2)

coopersita
coopersita

Reputation: 5041

Which version of Bootstrap are you using? If you are using version 4, they changed it to img-fluid:

<img src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Grateful_Dead_-_Jerry_Garcia.jpg" alt="HGWells" class="img-fluid img-rounded">

Upvotes: 2

j08691
j08691

Reputation: 207901

The classes img-responsive img-rounded go on the img element, not the div

Ex: 

<img src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Grateful_Dead_-_Jerry_Garcia.jpg" alt="HGWells"  lass="img-responsive img-rounded">`

Upvotes: 2

Related Questions