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.

macOS El Capitan Wallpaper
<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. Microsoft Edge support is shipped with Build Number 16299+.

macOS Yosemite Wallpaper
img-fit-contain
macOS Yosemite Wallpaper
img-fit-cover
<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.

macOS Yosemite Wallpaper
macOS Yosemite wallpaper
<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>