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, add width: 100% 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>