Top 12 Bootstrap 5 Components Every Developer Should Know

Bootstrap 5 ships ready-made components for nearly every UI pattern. These twelve are the ones you'll reach for again and again — learn them once and you'll prototype faster than ever.

1. Navbar — responsive top navigation
2. Cards — content containers
3. Modal — dialog popups
4. Offcanvas — slide-in panels (mobile menus)
5. Accordion — collapsible sections
6. Toast — non-blocking notifications
7. Carousel — image sliders
8. Dropdown — menus and select-like UI
9. Tabs & Pills — section switchers
10. Forms — inputs, validation, and floating labels
11. Buttons & Button Groups — actions and toolbars
12. Pagination — page navigation

Example: a minimal modal

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#demo">Open</button>

<div class="modal fade" id="demo" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Hi</h5></div>
      <div class="modal-body">Hello world.</div>
    </div>
  </div>
</div>