I want to apply css class(bootstrap) .img-responsive on all content images

Question

I am developing a Wordpress theme with the help of bootstrap so I am manually applying cases on all content images like this:

<img src="images/logo_03.png" class="img-responsive">

Is there any way to apply the same class properties automatically? I don't want to query for this purpose. I am sure bootstrap has a way to solve my problem, so let me know any solution with CSS.

Answer 1

You can use the LESS mixins directly in your theme. If you want all images to be responsive you can say:

//in your theme.less file
img {
  .img-responsive();
}

Will give you this in your theme.css file:

img {
  //all Bootrap CSS properties that make your image responsive
  //including surrounding media queries
}

However, this is not recommended because it applies to all <img> tags.

A more professional option would be to make your class like:

//in your theme.less file
.theme-img {
  .img-responsive();
  //additional theme-specific styling
  border: 1px solid blue;
}

and apply it to your images:

<img class="theme-img" src="..." />

Update: unlike the other answers that suggest using jQuery, this solution doesn't need any scripting and it works in old browsers (eg. IE). Besides it will work for any <img> tag that is inserted into the document even after the jQuery code is run. If you decide to go with Javascript, however, I recommend using document.querySelectAll() because it doesn't need jQuery and runs slightly faster.

Answer 2

Should be easy enough to add the class based on the element attribute, see below:

<script type="text/javascript">
    $(document).ready(function() {
        $("img").addClass("img-responsive");
});
</script>

Answer 3

The best way is to use the declarations provided by bootstrap for the class .img-responsive in your CSS.

For instance, you can set all the images of your website with the content of that class:

img {
display: block;
max-width: 100%;
height: auto;}

and that's it.

All your images will have the content of the class .img-responsive without the need of specify it.

Answer 4

If you want to add the img-responsive class to post thumbnail image in WordPress you can add like this

the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));

If you want to add to another image in content you can add img-responsive class to those image with jQuery just add this to your javascript file

jQuery(document).ready(function( $ ) {

/*add Class to Element*/
 $('.wp-post-image').addClass('"img-responsive');


});