Media CSS

To make images resize responsively to page width, you can add the class responsive-imgto your image tag. It will now have a max-width: 100%and height:auto.

<img class="responsive-img" src="cool_pic.jpg">

To make images appear circular, simply add class="circle"to them

This is a square image. Add the "circle" class to it to make it appear circular.

To make images center to page width, you can add the class center-blockto your image tag.

<img class="center-block" src="cool_pic.jpg">

To make your embeds responsive, merely wrap them with a containing div which has the class video-container

<div class="video-container">    <iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe></div>

To make your HTML5 Videos responsive just add the class responsive-videoto the video tag.

<video width="100%" controls="">    <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"></video>