Bootstrap Installation Guide
1
Create a New HTML File
1Step 1
Open your code editor (like VS Code) and create a new file named index.html
2
Paste the Following HTML Code
1Step 1
Copy and paste the following complete HTML structure into your file:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Bootstrap Page</title>
7<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
8<style>
9 html, body {
10 margin: 0;
11 padding: 0;
12 height: 100vh;
13 width: 100vw;
14 overflow: hidden;
15 font-family: 'Inter', sans-serif;
16 }
17
18 .container {
19 flex: 1;
20 flex-direction: column;
21 display: flex;
22 height: 100%;
23 width: 100%;
24 }
25
26 .iframe {
27 width: 100%;
28 height: 100%;
29 border: none;
30 border-radius: 0.5rem;
31 box-shadow: 0 1px 3px rgba(0,0,0,0.8);
32 }
33
34 h2 {
35 margin-bottom: 1rem;
36 color: #333;
37 text-align: center;
38 }
39</style>
40</head>
41<body>
42<div class="container">
43<h2>Tetrons Editor</h2>
44<iframe
45 src="https://staging.tetrons.com/editor/dist/editor-host.html"
46 width="100%" height="600" style="border: none;"
47 allowfullscreen></iframe>
48</div>
49
50<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
51</body>
52</html>3
Open in Browser
1Step 1
Open the HTML file using Live Server in VS Code
2Step 2
Or open it directly from file explorer
Output Preview
