Bootstrap media
In this section, you can learn about media elements, images, videos, and embeds.
Responsive images
Images in Bootstrap are made responsive with .img-fluid
. max-width: 100%;
and height: auto;
are applied to the image so that it scales with the parent element.
<img src="..." class="img-fluid" alt="Responsive image">
SVG images and IE 9-10
In Internet Explorer 9-10, SVG images with
.img-fluid
are disproportionately sized. To fix this, addwidth: 100% \9;
where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.
Image shapes
Add classes to an <img>
element to easily style images in any project.
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="img-thumbnail">
Aligning images
Align images with the helper float classes or text alignment classes. A simple centering class can also be used for block
level images.
<img src="..." class="float-left" alt="...">
<img src="..." class="float-right" alt="...">
<img src="..." class="mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." alt="...">
</div>
Responsive embeds
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
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.
Pro-Tip! You don’t need to include frameborder="0"
in your <iframe>
s as we override that for you.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PjGkVCAo8Fw" allowfullscreen></iframe>
</div>
Aspect ratio
Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Figures
Anytime you need to display a piece of content—like an image—with an optional caption, consider using a <figure>
.
Use the included .figure
, .figure-img
and .figure-caption
classes to provide some baseline styles for the HTML5 <figure>
and <figcaption>
elements. Images in figures have no explicit size, so be sure to add the .img-fluid
class to your <img>
to make it responsive.
<figure class="figure">
<img data-src="..." class="figure-img img-fluid" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
Aligning the figure’s caption is easy with our text utilities.
<figure class="figure">
<img data-src="..." class="figure-img img-fluid" alt="...">
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>