IFrame

Bootstrap IFrame

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap's IFrame is an HTML document that is embedded in another HTML document on a web page. IFrames are used to insert content from other source.

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

IFrames in Bootstrap are fully responsive components, adjusting according 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 a contact section

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

YouTube IFrame

Show code Edit in sandbox

HTML

        
            

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

Vimeo IFrame

Show code Edit in sandbox

HTML

        
            

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

Google Maps

Show code Edit in sandbox

HTML

        
            

        <!--Google map-->
        <div id="map-container" class="z-depth-1-half map-container" style="height: 500px">
          <iframe src="https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
            style="border:0" allowfullscreen></iframe>
        </div>

        
            

        .map-container{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
        }
        .map-container iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
        }

IFrame in modals MDB Pro component

Show code Edit in sandbox

HTML

        
            

        <div class="text-center">

          <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalYT">YouTube Modal</button>
          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalVM">Vimeo Modal</button>
          <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalGM">Google Maps Modal</button>

        </div>

        <!--Modal: Name-->
        <div class="modal fade" id="modalYT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">

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

              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <span class="mr-4">Spread the word!</span>
                <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
                <!--Twitter-->
                <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
                <!--Google +-->
                <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
                <!--Linkedin-->
                <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>

                <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

              </div>

            </div>
            <!--/.Content-->

          </div>
        </div>
        <!--Modal: Name-->

        <!--Modal: Name-->
        <div class="modal fade" id="modalVM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">

                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                  <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/115098447" allowfullscreen></iframe>
                </div>

              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <span class="mr-4">Spread the word!</span>
                <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
                <!--Twitter-->
                <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
                <!--Google +-->
                <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
                <!--Linkedin-->
                <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>

                <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

              </div>

            </div>
            <!--/.Content-->

          </div>
        </div>
        <!--Modal: Name-->

        <!--Modal: Name-->
        <div class="modal fade" id="modalGM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">

                <!--Google map-->
                <div id="map-container-google-2" class="z-depth-1-half map-container" style="height: 500px">
                  <iframe src="https://maps.google.com/maps?q=chicago&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
                    style="border:0" allowfullscreen></iframe>
                </div>

                <!--Google Maps-->

              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">

                <button type="button" class="btn btn-primary btn-md">Save location <i class="fas fa-map-marker-alt ml-1"></i></button>
                <button type="button" class="btn btn-outline-primary btn-md" data-dismiss="modal">Close <i class="fas fa-times ml-1"></i></button>

              </div>

            </div>
            <!--/.Content-->

          </div>
        </div>
        <!--Modal: Name-->

IFrame with shadows

.z-depth-1

.z-depth-1-half

.z-depth-2

.z-depth-3

.z-depth-4

.z-depth-5

.hoverable

Show code Edit in sandbox

HTML

        
            

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

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

            <p class="h5 mb-4">.z-depth-1</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">.z-depth-1-half</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">.z-depth-2</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">.z-depth-3</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">.z-depth-4</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">.z-depth-5</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">.hoverable</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-->