|
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8"> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | | - <title>Simple Page</title> |
| 6 | + <title>Bootstrap Page</title> |
| 7 | + <!-- Bootstrap CSS --> |
| 8 | + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> |
7 | 9 | </head> |
8 | 10 | <body> |
9 | 11 |
|
10 | | - <h1>Simple Web Page</h1> |
11 | | - <p>This is a simple web page with a button, a drop-down box, and a text box.</p> |
| 12 | + <div class="container mt-5"> |
| 13 | + <h1 class="mb-4">Simple Web Page with Bootstrap</h1> |
12 | 14 |
|
13 | | - <h2>Input Section</h2> |
| 15 | + <div class="mb-3"> |
| 16 | + <label for="inputText" class="form-label">Text Box</label> |
| 17 | + <input type="text" class="form-control" id="inputText" placeholder="Type something..."> |
| 18 | + </div> |
14 | 19 |
|
15 | | - <h3>Text Box</h3> |
16 | | - <p>Enter your text below:</p> |
17 | | - <input type="text" placeholder="Type something..." style="width: 200px;"> |
| 20 | + <div class="mb-3"> |
| 21 | + <label for="selectOption" class="form-label">Drop-Down Box</label> |
| 22 | + <select class="form-select" id="selectOption"> |
| 23 | + <option value="option1">Option 1</option> |
| 24 | + <option value="option2">Option 2</option> |
| 25 | + <option value="option3">Option 3</option> |
| 26 | + </select> |
| 27 | + </div> |
18 | 28 |
|
19 | | - <h3>Drop-Down Box</h3> |
20 | | - <p>Select an option:</p> |
21 | | - <select> |
22 | | - <option value="option1">Option 1</option> |
23 | | - <option value="option2">Option 2</option> |
24 | | - <option value="option3">Option 3</option> |
25 | | - </select> |
26 | | - |
27 | | - <h3>Button</h3> |
28 | | - <p>Click the button below:</p> |
29 | | - <button type="button" onclick="alert('Button clicked!')">Click Me</button> |
| 29 | + <button type="button" class="btn btn-primary" onclick="alert('Button clicked!')">Click Me</button> |
| 30 | + </div> |
30 | 31 |
|
| 32 | + <!-- Bootstrap JS and Popper.js (Optional but recommended for interactive features) --> |
| 33 | + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> |
31 | 34 | </body> |
32 | 35 | </html> |
0 commit comments