How to Add Bootstrap Responsive Image Classes in WordPress

How to Add Bootstrap Responsive Image Classes in WordPress

If you have a Bootstrap based theme and would like to make sure any image inserted with the “Add Media” button has the correct responsive image class – you can easily do that with a few simple lines of code in your theme’s functions.php file.

Bootstrap 3 uses the class img-responsive while Bootstrap 4 and Bootstrap 5 use the class img-fluid. Assuming you would like to add it for Bootstrap 4+ – here is the code snippet needed to add in the needed class:

/**
 * Add support for responsive images
 * @params $classes (array)
 *
 */
add_filter( 'get_image_tag_class', 'sdac_get_image_tag_class' );

function sdac_get_image_tag_class($classes) {
	return $classes . ' img-fluid';
}

Once you have that in place, go to any post or page and insert a new image. Note the code will now include the correct Bootstrap class in there so all your images will be responsive.

Leave a Reply

Your email address will not be published.
*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.