```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Example</title>
<!-- Bootstrap CSS -->
<link
href="[Link]
s" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
</div>
<!-- Bootstrap JS -->
<script
src="[Link]
[Link]"></script>
</body>
</html>
```
2. Structure of a Bootstrap Page
A. The Container
**Example:**
```html
<div class="container">
<h1>Fixed Container</h1>
</div>
<div class="container-fluid">
<h1>Fluid Container</h1>
</div>
```
B. The Grid System
**Basic Structure:**
```html
<div class="container">
<div class="row">
<div class="col-4">Column 1</div>
<div class="col-4">Column 2</div>
<div class="col-4">Column 3</div>
</div>
</div>
```
**Responsive Columns:**
```html
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">Medium & Large</div>
<div class="col-md-6 col-lg-4">Medium & Large</div>
<div class="col-lg-4">Only Large</div>
</div>
</div>
```
*3. Typography**
Headings
```html
<h1 class="display-1">Display Heading 1</h1>
<h2 class="display-2">Display Heading 2</h2>
```.
#### **b. Text Alignment**
- `.text-start`: Aligns text to the left.
- `.text-center`: Centers the text.
- `.text-end`: Aligns text to the right.
**Example:**
```html
<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>
```
#### **c. Text Colors**
**Example:**
```html
<p class="text-primary">This is primary text (blue).</p>
<p class="text-danger">This is danger text (red).</p>
```
#### **d. Font Weight and Styles**
- `.fw-bold`: Makes text bold.
- `.fw-light`: Makes text lighter.
- `.fst-italic`: Applies italic style.
**Example:**
```html
<p class="fw-bold">Bold text</p>
<p class="fst-italic">Italic text</p>
```
### **4. Forms*
#### **a. Basic Form Structure**.
**Example:**
```html
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email
address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with
anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1"
class="form-label">Password</label>
<input type="password" class="form-control"
id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
```
#### **b. Form Layouts**
```html
<form class="row g-3">
<div class="col-auto">
<label for="inputPassword2" class="visually-hidden">Password</label>
<input type="password" class="form-control" id="inputPassword2"
placeholder="Password">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-3">Confirm</button>
</div>
</form>
```
#### **c. Validation States**
```html
<input type="text" class="form-control is-invalid" id="validationServer01">
<div class="invalid-feedback">
Please choose a valid username.
</div>
```
- **`.is-valid`**: Applied to inputs that are valid.
- **`.is-invalid`**: Applied to inputs that are invalid.
#### **d. Customizing Forms**
You can customize forms by adding additional classes for sizing, padding,
and margin adjustments.
**Example:**
```html
<div class="mb-3">
<label for="exampleInputText" class="form-label">Username</label>
<input type="text" class="form-control form-control-lg"
id="exampleInputText" placeholder="Username">
</div>
```