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 <iframe>, <embed>, <video>, and <object> elements.
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 .embed-responsive-4by3 class.
<div class="embed-responsive embed-responsive-4by3">
To create a responsive embed of 16:9 aspect ratio we use the .embed-responsive-16by9 class.
<div class="embed-responsive embed-responsive-16by9">
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 well class.
<p>This is a sample text inside a well.</p>
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>
<!-- small well -->
<div class="well well-sm">
<p>Text inside well-sm</p>
Have fun learning :-)
Copyright © 2014 - 2022 DYclassroom. All rights reserved.