Sign in


Sign up


Bootstrap IFrame

Bootstrap IFrame is an HTML document which is embedded in another HTML doc on a web page. IFrames are used to insert content from another source.

With the Bootstrap integration, you can put the content of the IFrame inside modal to make it even more interactive and entertaining.

IFrames in Bootstrap are fully responsive components, adjusting accordingly to the screen size so there's no need to worry about the quality of your content.

Use examples:

  • Video tutorial
  • Promotional video presentation
  • Google Maps in contact section

See the following examples to get a good grip at IFrames.


YouTube IFrame

                
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/v64KOxKVLVg" allowfullscreen></iframe>
</div>
                
            

Vimeo IFrame

                
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/137857207" allowfullscreen></iframe>
</div>
                
            

Google Maps

                
<!--Google map-->
<div id="map-container" class="z-depth-1-half" style="height: 500px"></div>
                
            


IFrame with shadows

.z-depth-1

.z-depth-1-half

.z-depth-2

.z-depth-3

.z-depth-4

.z-depth-5

.hoverable

                
<!--Grid row-->
<div class="row mb-5">

    <!--Grid column-->
    <div class="col-lg-4 col-md-12">

        <p class="h5 mb-4"><code>.z-depth-1</code></p>

        <div class="embed-responsive embed-responsive-16by9 z-depth-1">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fa3Iczgh8Ok" style="height: 101%" allowfullscreen></iframe>
        </div>

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-6">

        <p class="h5 mb-4"><code>.z-depth-1-half</code></p>

        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fa3Iczgh8Ok" style="height: 101%" allowfullscreen></iframe>
        </div>

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-6">

        <p class="h5 mb-4"><code>.z-depth-2</code></p>

        <div class="embed-responsive embed-responsive-16by9 z-depth-2">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fa3Iczgh8Ok" style="height: 101%" allowfullscreen></iframe>
        </div>

    </div>
    <!--Grid column-->

</div>
<!--Grid row-->

<!--Grid row-->
<div class="row mb-5">

    <!--Grid column-->
    <div class="col-lg-4 col-md-12">

        <p class="h5 mb-4"><code>.z-depth-3</code></p>

        <div class="embed-responsive embed-responsive-16by9 z-depth-3">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fa3Iczgh8Ok" allowfullscreen></iframe>
        </div>

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-6">

        <p class="h5 mb-4"><code>.z-depth-4</code></p>

        <div class="embed-responsive embed-responsive-16by9 z-depth-4">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fa3Iczgh8Ok" allowfullscreen></iframe>
        </div>

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-6">

        <p class="h5 mb-4"><code>.z-depth-5</code></p>

        <div class="embed-responsive embed-responsive-16by9 z-depth-5">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fa3Iczgh8Ok" allowfullscreen></iframe>
        </div>

    </div>
    <!--Grid column-->

</div>
<!--Grid row-->

<!--Grid row-->
<div class="row d-flex justify-content-center">

    <!--Grid column-->
    <div class="col-md-6">

        <p class="h5 mb-4"><code>.hoverable</code></p>

        <div class="embed-responsive embed-responsive-16by9 hoverable">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fa3Iczgh8Ok" style="height: 101%" allowfullscreen></iframe>
        </div>

    </div>
    <!--Grid column-->

</div>
<!--Grid row-->