In this tutorial we will learn about responsive embed and wells in Bootstrap.
We use the responsive embed to allow browsers to determine video or slideshow dimensions based on the width of their containing block and maintain an essential ratio that will properly scale on any given device.
The responsive embed rules are directly applied to
We don't have to include
frameborder="0" in your
<iframe>s as Bootstrap will override that for us.
To create a responsive embed of 4:3 aspect ratio we use the
<div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/3OLTJlwyIqQ?rel=0" frameborder="0" allowfullscreen></iframe> </div>
To create a responsive embed of 16:9 aspect ratio we use the
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/6jJHw9YJnQY?rel=0" frameborder="0" allowfullscreen></iframe> </div>
Responsive embed is ideal for embedding YouTube video on your blog and website and it will scale depending on the device.
We use wells to give an inset effect to an element. To create a well use use the
<div class="well"> <p>This is a sample text inside a well.</p> </div>
We can use the
.well-lg class to create a large well and
.well-sm class to create a small well.
<!-- large well --> <div class="well well-lg"> <p>Text inside well-lg</p> </div> <!-- small well --> <div class="well well-sm"> <p>Text inside well-sm</p> </div>