02 2022 (Bootstrap 5.1)
I thought I will contribute to this question by using CSS and also with Bootstrap 5.1
I will be using Google Map as an example.
on iFrame
CSS method: you can use display:block
in the style
attribute
↓
-------------
<iframe src="SOURCE" width="600" height="450" style="border:0;display:block" allowfullscreen=""
loading="lazy"></iframe>
Bootstrap method: use d-block
class
↓
-------------
<iframe src="SOURCE" width="600" height="450" style="border:0;" class="d-block" allowfullscreen=""
loading="lazy"></iframe>
on iFrame Parent
CSS method: If you wrap with a div
you can use line-height:0
to your parent element.
↓
-------------
<div style="line-height:0">
<iframe src="SOURCE" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
Boostrap method: Speaking of line-height, bootstrap has four line-height classes lh-1
, lh-sm
, lh-base
, lh-lg
they are good for text but unfortunately they don't work on iframe. Also adding d-block
to the parent doesn't work instead, you can use d-block
on the iframe just like CSS.
<div>
↓
-------------
<iframe src="SOURCE_HERE" width="600" height="450" style="border:0;display:block" allowfullscreen=""
loading="lazy"></iframe>
</div>
Fixed Parent height
If your parent height is fixed then you can set the iframe to height="100%"
which will expand the iframe height to match with your parent
.parent{
height: 500px;
}
<div class="parent">
↓
------
<iframe src="SOURCE_HERE" width="600" height="100%" style="border:0" allowfullscreen="" loading="lazy"></iframe>
</div>
No access to the iframe element
If you do not have control of your iframe element then you can set your parent height to match with the iframe height.
.parent{
height: 450px;
}
<div class="parent">
↓
-----
<iframe src="SOURCE_HERE" width="600" height="450" style="border:0;display:block" allowfullscreen="" loading="lazy"></iframe>
</div>