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