Digital pattern library

Responsive embed

The responsive embed pattern automatically determines the dimensions of media content based on the width of the containers they are embedded in. A fixed ratio allows embedded content to scale appropriately on any device.

Rules for the responsive embed

This wrapper div must have two classes: embed-responsive plus one that determines its aspect ratio.

There are two ratios available:

// iframe, embed, video or object with embed-responsive-item class

You don't need to include frameborder="0" in your iframe as Bootstrap overrides that for you.


Options available


16:9 (content whole)

Code


4:3 (content whole)

Code


16:9 (content thirds)

Related content

  • Item 1
  • Item 2
  • Item 3
Code

Related content

  • Item 1
  • Item 2
  • Item 3

4:3 (content thirds)

Related content

  • Item 1
  • Item 2
  • Item 3
Code

Related content

  • Item 1
  • Item 2
  • Item 3

16:9 (content halves)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.


4:3 (content halves)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.