Bootstrap Components

Introduction

Bootstrap includes a vast collection of pre-built components that save you hours of development time. From buttons and cards to navbars and modals, these components are responsive and accessible out of the box.

1. Buttons

Bootstrap provides a wide range of button styles to indicate different actions.

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

2. The Navbar

A responsive navigation header that collapses on mobile devices.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

3. Cards

Cards are flexible containers for content with options for headers, footers, images, and actions.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some content here.</p>
    <a href="#" class="btn btn-primary">Action</a>
  </div>
</div>

4. Alerts & Modals

Alerts

Provide contextual feedback messages.

<div class="alert alert-warning" role="alert">
  This is a warning alert.
</div>

Modals

Use modals to show dialogs or custom content on top of the page. (Requires Bootstrap JS).

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<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">...</div>
    </div>
  </div>
</div>