💛 Day 24: Bootstrap Components

on

💛 Day 24 — Bootstrap Components (Buttons, Navbar, Cards, Modals)

Hi Guys, Welcome to Day 24 🎉! Today we explore Bootstrap’s most popular and practical feature — **prebuilt components**. These components save hours of development time by providing ready-made HTML and CSS combinations. We’ll look at Buttons, Navbars, Cards, and Modals — essential elements in nearly every modern web project.

⚙️ 1️⃣ Buttons

Buttons in Bootstrap are styled using the .btn class with contextual variations. You can quickly change colors, sizes, and styles using modifiers. 

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-outline-secondary">Outline</button>
<button class="btn btn-lg btn-info">Large Button</button>

Button Groups

<div class="btn-group" role="group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>

🧭 2️⃣ Navbar (Navigation Bar)

Bootstrap’s responsive navbar automatically collapses into a toggle menu on smaller screens. Use the .navbar and .navbar-expand classes. 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</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 ms-auto">
        <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>

🧱 3️⃣ Cards

Cards are flexible content containers with image, text, and buttons — perfect for blog posts or products. 

<div class="card" style="width:18rem;">
  <img src="https://via.placeholder.com/300" class="card-img-top" alt="sample">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is an example of a simple card with text and a button.</p>
    <a href="#" class="btn btn-primary">Read More</a>
  </div>
</div>

🪟 4️⃣ Modals (Popup Boxes)

Modals display content in overlay popups — great for alerts, login forms, or confirmations. 

<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch Modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Example</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This is a simple Bootstrap modal example.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

🧠 5️⃣ Practice Task

  1. Create a navbar with your name as a brand.
  2. Add three links (Home, Projects, Contact).
  3. Include a modal that opens when a button is clicked.
  4. Design three cards displaying your projects.

🎯 Summary

Today you built a set of real-world UI components using Bootstrap. These components form the foundation of interactive, professional-looking websites. Next, we’ll move on to **Forms, Tables, and Utilities**, completing your Bootstrap toolkit.

Comments

Post a Comment