💜 Day 25: Bootstrap Forms, Tables & Utilities

on

💜 Day 25 — Forms, Tables & Utilities

Hi guys, Welcome to Day 25! 🌟 Today’s topic focuses on Bootstrap’s form controls, tables, and utility classes. These are some of the most practical tools you’ll use in real-world applications like login pages, dashboards, or admin panels.

📝 1️⃣ Bootstrap Forms

Forms are everywhere — contact forms, registration forms, and search boxes. Bootstrap makes them simple and elegant using its predefined classes. 

<form class="p-4">
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter your name">
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
  </div>

  <div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" rows="3"></textarea>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

📋 2️⃣ Inline Forms

You can display inputs inline using the .row class and grid columns. 

<form class="row g-3 align-items-center">
  <div class="col-auto">
    <input type="text" class="form-control" placeholder="Username">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-success">Login</button>
  </div>
</form>

📊 3️⃣ Tables

Bootstrap gives clean, responsive tables using the .table class. 

<table class="table table-striped table-bordered table-hover">
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Rahul</td><td>rahul@example.com</td></tr>
    <tr><td>2</td><td>Aisha</td><td>aisha@example.com</td></tr>
  </tbody>
</table>

🎨 4️⃣ Utility Classes Overview

  • Spacing: .m-3, .p-4, .mt-5
  • Text Alignment: .text-center, .text-start
  • Display: .d-flex, .d-none, .d-block
  • Colors: .bg-info, .text-danger

🧠 5️⃣ Practice Task

  1. Build a contact form with name, email, and message fields.
  2. Add a table listing 5 sample users.
  3. Use spacing and color utilities to make it look clean and centered.

🎯 Summary

You’ve learned how to create beautiful, structured forms and tables using Bootstrap. These features make your pages both functional and visually appealing. Next, we’ll move into **Responsive Helpers & Utilities** to refine your layouts even more.

Comments

Post a Comment