Implementing responsive images, videos and tables with Bootstrap

If you’re using Bootstrap to develop your site (and if you’re not, try it, it’s great) you can have almost every stuffs responsive on your site. But for now here we’re only going to talk about responsive images, responsive videos (also embed videos) and responsive tables using Bootstrap (should have install Bootstrap 3 and above).

Mostly everything in these posts are coming directly from the documentation itself. So hopefully some of these you immediately recognize and others you’ll wonder how you missed that.

Table of contents

Responsive images with Bootstrap

Working with larger images may be a problem for smaller devices. Bootstrap uses a class of .img-responsive to make any image responsive:

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

This combination of max-width: 100% and height: auto will ensure the images scale down proportionally in smaller devices, while staying within the parent element’s constraints on larger devices.

<imgsrc="..."class="img-responsive"alt="Responsive image">

Responsive images with Bootstrap using jQuery

Let suppose on your blog you have already posted 600+ posts and what if you want to add .img-responsive class in your every posts img, its very awful to open and add in your every posts that’s why here we are using some jQuery code to add .img-responsive class in every old or new posts:

$(document).ready(function(){$('img').addClass('img-responsive');});

Responsive videos with Bootstrap

If you’re hosting video yourself that means using <video> then adding .img-responsive class can make any video responsive:

Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Responsive video embeds that maintain aspect ratio

When Bootstrap 3.2 came out, it came out with an additional helper class to make it easier to make iframes (like YouTube embeds) responsive while maintaining a certain aspect ratio. It’s extremely easy to use these, just add the following code to your markup: