Introduction to Bootstrap

Bootstrap is a powerful front-end framework for developing responsive and mobile-first websites.

Containers

Bootstrap containers help in structuring layouts efficiently. Below are examples of different container types:

<div class="container">Fixed Container</div>
<div class="container-fluid">Fluid Container</div>

Typography

Bold text

Italic text

Underlined text

Muted text

Danger text

Success text

Warning text

Info text

<p class="fw-bold">Bold text</p>

Buttons

Primary Secondary Success Danger Warning Info Light Dark

<button class="btn btn-primary">Primary</button>

Grid System

Bootstrap's grid system allows for responsive layouts using rows and columns.

<div class="row">
    <div class="col-md-4 bg-primary text-white p-3">Column 1</div>
    <div class="col-md-4 bg-secondary text-white p-3">Column 2</div>
    <div class="col-md-4 bg-success text-white p-3">Column 3</div>
</div>

Tables

Name	Age	Country
John	25	USA
Maria	30	Canada
Alex	22	UK

<table class="table table-bordered table-striped table-hover">
    <thead class="table-dark">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Maria</td>
            <td>30</td>
            <td>Canada</td>
        </tr>
        <tr>
            <td>Alex</td>
            <td>22</td>
            <td>UK</td>
        </tr>
    </tbody>
</table>

Forms

Email address

Password

Submit

<form>
    <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Enter password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Alerts

<div class="alert alert-primary" role="alert">Alert</div>

Navigation Bar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>