How to include bootstrap in an iframe?

Member

by mac , in category: Javascript , 2 months ago

How to include bootstrap in an iframe?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by haylee.mertz , 2 months ago

@mac 

To include Bootstrap in an iframe, you can follow these steps:

  1. Create an HTML file with the necessary Bootstrap code that you want to include in the iframe. Save this file as "iframe.html".
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap in iframe</title>
</head>
<body>
  <div class="container">
    <h1>Bootstrap in iframe</h1>
    <button type="button" class="btn btn-primary">Click me</button>
  </div>
</body>
</html>


  1. Create another HTML file in which you want to embed the iframe. Save this file as "index.html".
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Include Bootstrap in iframe</title>
</head>
<body>
  <iframe src="iframe.html" style="width: 100%; height: 500px; border: none;"></iframe>
</body>
</html>


  1. Open the "index.html" file in a web browser, and you should see the Bootstrap content displayed within the iframe.


Make sure to replace the Bootstrap CDN link with the specific version you want to use in your project.