Component and Styling

Bootstrap components are ready-made elements that you can directly use in your HTML.

Common components include:

Components are responsive by default and use utility classes for styling.

Buttons

Bootstrap provides predefined button styles using the .btn class.

Example:

<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-warning">Warning</button>

Button Sizes:

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-secondary btn-sm">Small</button>

Outline Buttons:

<button class="btn btn-outline-primary">Outline</button>

Custom Styling:

<button class="btn btn-primary" style="border-radius:20px; padding:12px 30px;">Custom Button</button>

Navbar

Bootstrap navbars are responsive and collapse on small screens.

<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="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu">
      <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>

• .navbar-expand-lg → Navbar expands on large screens
• .ms-auto → Right-align menu items

Custom Style Example:

<style>
.navbar {
    background-color: #1abc9c !important;
}
.navbar .nav-link {
    color: white !important;
    font-weight: bold;
}
.navbar .nav-link:hover {
    color: #f1c40f !important;
}
</style>

Cards

Cards are content containers with headers, body, and footers.

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Custom Styling:

<div class="card text-center" style="background-color:#f8f9fa; border-radius:15px; box-shadow:0 4px 8px rgba(0,0,0,0.2);">

Alerts

Bootstrap alerts provide feedback messages.

<div class="alert alert-success" role="alert">
  Success! Your operation completed.
</div>

<div class="alert alert-danger" role="alert">
  Error! Something went wrong.
</div>

Dismissible Alerts:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Warning! Check your input.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Forms

Bootstrap forms are responsive and styled by default.

<form>
  <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</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Validation Styling:

<input type="text" class="form-control is-invalid">
<div class="invalid-feedback">Please provide a valid name.</div>

Modals

Modals are pop-up dialogs for notifications, forms, or images.

<!-- Trigger Button -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open Modal</button>

<!-- Modal Structure -->
<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 Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">This is a Bootstrap modal!</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Styling Components with Utilities

Bootstrap provides utility classes for spacing, colors, text, borders, etc.

Example:

<div class="card p-4 m-3 bg-light text-center rounded shadow">
  <h4>Styled Card</h4>
  <p>This card uses utility classes for styling.</p>
</div>

✅ Key Takeaways:

1. Bootstrap components save time and provide consistent design.
2. Use utility classes for spacing, colors, borders, text alignment.
3. Combine multiple components (navbar, card, modal, buttons) for functional UIs.
4. You can override styles with custom CSS for unique designs.