How to create an iframe in bootstrap 5?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To create an iframe in bootstrap 5, use the ratio and ratio-16x9 classes in your iframe tag it will help you to make a responsive iframe.

Today, I am going to show you. how to create an iframe in bootstrap 5 with code example.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Example of iframe in bootstrap 5

This article will guide you to create an iframe in bootstrap 5 with an example.

Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Includes bootstrap library

First of all, load the Bootstrap 5 framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Example of iframe in bootstrap 5

In this example, we will use the iframe tag with

Let’s look at the following example to understand how it works:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="ratio ratio-16x9">
      <iframe
        src="https://www.youtube.com/embed/8bzsRpWb0t4"
        allowfullscreen
      ></iframe>
    </div>

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Check the output of the above code example.

Bootstrap, iframe

Try the below codesandbox link to customize the above example as per your requirement.

Try it Yourself

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Stay tuned working on React Js Cheat Sheets Book

Related Posts