Media

Media includes responsive images, figures and video classes.

Images

Add the img-responsive class to <img> elements. The images will scale with the parent sizes.

<img src="/img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">

Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the classic background image trick.

<img src="/img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
<img src="/img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">

Figure

You can use the element <figure> for an image with a caption. Add the figure class to <figure> element. The images with the img-responsive class will be responsive. And the included class figure-caption will provide basic style for caption. Also, you can use text-left, text-center and text-right for caption alignment.

<figure class="figure">
  <img class="img-responsive ..." src="/img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
  <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
</figure>

Video

For responsive video, add a container with the video-responsive class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.

For responsive <video> elements, you can add the video-responsive class directly.

<div class="video-responsive video-responsive-4-3">
  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
</div>

<video class="video-responsive" src="...">...</video>