Bootstrap Exam: Quick Reference Cheat Sheet

Posted on Jan 4, 2025 in Computers

Here’s a concise cheat sheet summarizing all the topics we’ve discussed, specifically tailored for your Bootstrap exam. You can write this on paper to use as a quick reference. Each topic is broken down to its essentials:

Bootstrap Exam Cheat Sheet

1. Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap"> </body>
</html>

2. Grid System

  • Key Classes: container, row, col-lg-*, col-md-*, col-*
  • Horizontal Layout:
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-12">Section 1</div>
        <div class="col-lg-4 col-md-6 col-12">Section 2</div>
        <div class="col-lg-4 col-md-6 col-12">Section 3</div>
    </div>
</div>
  • Responsive Stacking: Columns stack vertically on devices < 992px.

3. Typography

  • Classes:
    • text-center, text-justify, text-uppercase, text-lowercase, text-capitalize
  • Example:
<h1 class="text-uppercase">Heading</h1>
<p class="text-justify">This is justified text.</p>
<pre class="text-lowercase">preformatted text</pre>

4. Responsive Images

<img src="image.jpg" class="img-fluid" alt="Responsive Image">

5. Tables

  • Classes: table, table-striped, table-bordered, table-hover, table-responsive
<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr><th>Header</th></tr>
        </thead>
        <tbody>
            <tr><td>Row Data</td></tr>
        </tbody>
    </table>
</div>

6. Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Brand</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">Home</a></li>
            </ul>
        </div>
    </div>
</nav>

7. Collapse

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseContent">Toggle</button>
<div id="collapseContent" class="collapse">
    <p>This is collapsible content.</p>
</div>

8. Pagination

<nav>
    <ul class="pagination">
        <li class="page-item disabled"><a class="page-link">Prev</a></li>
        <li class="page-item active"><a class="page-link">1</a></li>
        <li class="page-item"><a class="page-link">2</a></li>
        <li class="page-item"><a class="page-link">Next</a></li>
    </ul>
</nav>

9. Cards for Product Display

<div class="card" style="width: 18rem;">
    <img src="image.jpg" class="card-img-top" alt="Product">
    <div class="card-body">
        <h5 class="card-title">Product Name</h5>
        <p class="card-text">Price: $10</p>
        <p>Features: Amazing features</p>
        <p>Quantity: 5</p>
    </div>
</div>

10. Slideshow (Carousel)

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image1.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="image2.jpg" class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </button>
</div>

11. Forms

  • Classes: form-control, form-check, btn
<form>
    <div class="mb-3">
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control" id="email" required>
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password" required>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Tips

  1. Focus on Structure: Use div tags with proper row and col classes for layout.
  2. Responsive Design: Always test on smaller screen widths.
  3. Utility Classes: Use Bootstrap’s utility classes like bg-*, text-*, and m-* for quick styling.
  4. Scripts: Always include Bootstrap’s CSS and JS links.

Keep practicing and ensure your syntax is error-free. This cheat sheet has everything you need to ace your written exam! Good luck! 🚀