Pre-styled, reusable UI elements for rapid web development.
A responsive navigation header with links, branding, and togglers.
Key classes: .navbar,
.navbar-expand-lg, .navbar-dark,
.bg-dark
Contextual feedback messages for user actions.
Key classes: .alert,
.alert-{color} (primary, success, warning, danger, info)
Standard clickable buttons with customizable sizes and styles.
Key classes: .btn,
.btn-{color}, .btn-outline-{color},
.btn-sm, .btn-lg
Small count or labeling elements for notifications.
Key classes: .badge,
.bg-{color}, .rounded-pill
Flexible content containers with headers, footers, and images.
A card with primary background color.
A card with a success border.
Key classes: .card,
.card-header, .card-body,
.card-title, .card-text
Collapsible content sections for organizing information.
Key classes: .accordion,
.accordion-item, .accordion-button,
.accordion-collapse
A popup dialog box that overlays the current page.
Key classes: .modal,
.modal-dialog, .modal-content,
.modal-header, .modal-body,
.modal-footer
Custom form controls with inputs, checkboxes, and selects.
Key classes: .form-control,
.form-select, .form-check,
.form-label
| Component | Description |
|---|---|
| Navbar | Responsive navigation header |
| Alerts | Contextual feedback messages |
| Buttons | Clickable buttons with styles |
| Badges | Small count/label elements |
| Cards | Flexible content containers |
| Accordion | Collapsible content sections |
| Modal | Popup dialog boxes |
| Forms | Custom form controls |
| Carousel | Slideshow for images/text |
| Dropdowns | Toggleable action menus |
| Progress | Progress bars with labels |
| Spinners | Loading indicators |
| Toasts | Lightweight notifications |
| Tooltips | Hover text boxes |