Bootstrap
By Amr
Bootstrap 5 usage patterns in Zer0-Mistakes.
Estimated reading time: 1 minutes
Table of Contents
Bootstrap
Zer0-Mistakes uses Bootstrap 5.3.3 for responsive layouts, components, and utilities.
How Bootstrap is Loaded
Bootstrap CSS and JavaScript are loaded via CDN in the theme’s core includes:
<!-- CSS in _includes/core/head.html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- JS in _includes/components/js-cdn.html -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
Key Components Used
Navigation
- Navbar - Responsive navigation with collapse
- Offcanvas - Mobile sidebar navigation
- Breadcrumbs - Hierarchical navigation trail
Layout
- Grid System - 12-column responsive grid
- Containers - Content width constraints
- Flex Utilities - Flexible layouts
UI Components
- Cards - Content containers
- Modals - Dialog boxes
- Accordion - Collapsible content
- Alerts - Status messages
Responsive Breakpoints
| Breakpoint | Class prefix | Dimensions |
|---|---|---|
| Extra small | (none) | < 576px |
| Small | sm |
≥ 576px |
| Medium | md |
≥ 768px |
| Large | lg |
≥ 992px |
| Extra large | xl |
≥ 1200px |
| XXL | xxl |
≥ 1400px |
Custom Styles
Custom CSS is layered on top of Bootstrap in:
assets/css/main.css- Main stylesheet_sass/custom.scss- Custom Sass partials
Bootstrap Icons
Bootstrap Icons are included:
<i class="bi bi-house"></i>
<i class="bi bi-search"></i>
<i class="bi bi-gear"></i>