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>