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 responsive embed

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

There are two ratios available:

  • 16:9 embed-responsive-16by9. Use this to show videos, it is better suited for use with HD media.
  • 4:3 embed-responsive-4by3. Use this to display maps, in mobile view a smaller ratio makes them hard to view.

	// 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)

Example
Code

4:3 (content whole)

Example
Code

16:9 (content thirds)

Example
Description

Accommodation

Related content

  • Item 1
  • Item 2
  • Item 3
Code 



    

        

            

                
            

        

        

              
 
 Description 
 
 
Accommodation
 
 
 
Related content
  • Item 1
  • Item 2
  • Item 3

4:3 (content thirds)

Example
Description

Accommodation

Related content

  • Item 1
  • Item 2
  • Item 3
Code 



    

        

            

                
            

        

        

              
 
 Description 
 
 
Accommodation
 
 
 
Related content
  • Item 1
  • Item 2
  • Item 3

16:9 (content halves)

Example

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)

Example

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.