bootstrap-patterns — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited bootstrap-patterns (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Bootstrap 5 is a mature, utility-rich CSS framework with a 12-column grid, extensive component library, and deep SCSS customization. Unlike utility-first frameworks (Tailwind), Bootstrap provides opinionated, pre-styled components that can be deeply customized via SCSS variables and the utility API.
# npm
npm install bootstrap @popperjs/core
# With SCSS customization (recommended)
npm install bootstrap sass
# CDN (quick prototyping only)
# <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
# <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><!-- Responsive 12-column grid -->
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-8 col-lg-6">Main content</div>
<div class="col-12 col-md-4 col-lg-6">Sidebar</div>
</div>
</div>
<!-- Container variants -->
<div class="container"><!-- max-width at breakpoints --></div>
<div class="container-fluid"><!-- full width always --></div>
<div class="container-lg"><!-- full width until lg breakpoint --></div>
<!-- Auto-layout columns -->
<div class="row">
<div class="col">Equal</div>
<div class="col">Equal</div>
<div class="col">Equal</div>
</div>
<!-- Offset and ordering -->
<div class="row">
<div class="col-md-4 offset-md-4">Centered column</div>
<div class="col order-md-2">Appears second on md+</div>
<div class="col order-md-1">Appears first on md+</div>
</div>// custom.scss — Import BEFORE bootstrap to override defaults
// 1. Override variables
$primary: #6366f1;
$secondary: #8b5cf6;
$success: #10b981;
$danger: #ef4444;
$warning: #f59e0b;
$info: #06b6d4;
$body-bg: #0f172a;
$body-color: #e2e8f0;
$font-family-base: 'Inter', system-ui, sans-serif;
$font-size-base: 1rem;
$border-radius: 0.75rem;
$border-radius-lg: 1rem;
$enable-dark-mode: true;
$enable-shadows: true;
$enable-gradients: false;
$enable-negative-margins: true;
// 2. Import Bootstrap
@import "bootstrap/scss/bootstrap";
// 3. Custom component overrides AFTER import
.btn-primary {
--bs-btn-bg: #{$primary};
--bs-btn-border-color: #{$primary};
--bs-btn-hover-bg: #{darken($primary, 8%)};
--bs-btn-hover-border-color: #{darken($primary, 10%)};
}/* Override Bootstrap's CSS variables directly */
[data-bs-theme="light"] {
--bs-primary: #6366f1;
--bs-primary-rgb: 99, 102, 241;
--bs-body-font-family: 'Inter', system-ui, sans-serif;
--bs-border-radius: 0.75rem;
}
[data-bs-theme="dark"] {
--bs-body-bg: #0f172a;
--bs-body-color: #e2e8f0;
--bs-primary: #818cf8;
--bs-primary-rgb: 129, 140, 248;
}<!-- Set theme at document level -->
<html data-bs-theme="dark">
<!-- Per-component theme -->
<div data-bs-theme="light" class="card">
<div class="card-body">This card is always light</div>
</div>// Toggle dark mode programmatically
function toggleTheme() {
const html = document.documentElement;
const current = html.getAttribute('data-bs-theme');
html.setAttribute('data-bs-theme', current === 'dark' ? 'light' : 'dark');
}
// Respect system preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-bs-theme', prefersDark ? 'dark' : 'light');// Generate custom utilities via the utility API
$utilities: map-merge(
$utilities,
(
"custom-opacity": (
property: opacity,
class: o,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1,
),
),
"backdrop-blur": (
property: backdrop-filter,
class: blur,
values: (
sm: blur(4px),
md: blur(8px),
lg: blur(16px),
xl: blur(24px),
),
),
)
);<!-- Card with glassmorphism -->
<div class="card border-0" style="
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
">
<div class="card-body">
<h5 class="card-title">Premium Card</h5>
<p class="card-text text-body-secondary">Glass effect panel</p>
</div>
</div>
<!-- Modal with custom animation -->
<div class="modal fade" id="premiumModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content border-0 shadow-lg">
<div class="modal-header border-bottom-0">
<h5 class="modal-title">Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">Content</div>
</div>
</div>
</div>
<!-- Offcanvas sidebar -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Navigation</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<nav class="nav flex-column">
<a class="nav-link active" href="#">Dashboard</a>
<a class="nav-link" href="#">Analytics</a>
<a class="nav-link" href="#">Settings</a>
</nav>
</div>
</div>// Programmatic component initialization
import { Modal, Toast, Tooltip, Popover, Collapse } from 'bootstrap';
// Initialize all tooltips
document.querySelectorAll('[data-bs-toggle="tooltip"]')
.forEach(el => new Tooltip(el));
// Modal control
const modal = Modal.getOrCreateInstance('#myModal');
modal.show();
modal.hide();
// Toast notifications
const toast = new Toast(document.getElementById('liveToast'));
toast.show();
// Listen for Bootstrap events
document.getElementById('myModal').addEventListener('shown.bs.modal', () => {
// Focus first input when modal opens
document.querySelector('#myModal input')?.focus();
});// Import only what you need (tree-shaking via SCSS)
// Instead of: @import "bootstrap/scss/bootstrap";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
// Only the components you use
@import "bootstrap/scss/type";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
// Generate only needed utilities
@import "bootstrap/scss/utilities/api";// Import only needed JS components
import Modal from 'bootstrap/js/dist/modal';
import Toast from 'bootstrap/js/dist/toast';
// NOT: import 'bootstrap'; // imports everything-sm, -md, -lg, -xl, -xxl)!important — use SCSS variable overrides insteadbootstrap.bundle.min.js when you only need Modaldata-bs-theme and rolling custom dark mode toggles.container inside .container (use .container-fluid inside .container if needed)getOrCreateInstance)tailwindcss-v4 — utility-first CSS alternativefrontend-design — design anchor selectionui-ux-pro-max — color palettes, typography, and UX guidelinesaccessibility — ARIA and keyboard navigation beyond Bootstrap defaults~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.