- No data uploaded
- Instant results
Bootstrap 5 Feature Grid for Vanilla JS
A production-ready minimal feature grid: a marketing section with a centered heading and a responsive grid of six feature cards, each with an icon badge, title and description. Pick your brand color, toggle dark mode and corner radius — the live preview and the Vanilla JS code update instantly in your browser.
Live component editor
Live preview
<!-- Requires Bootstrap 5.3 CSS + theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css"> -->
<section class="px-4 py-5">
<div class="mw-6xl mx-auto">
<div class="mw-2xl mx-auto text-center mb-5">
<span class="badge rounded-pill bg-brand-subtle text-brand">Features</span>
<h2 class="mt-2 fs-3 fw-bold text-body-emphasis">Everything you need to launch</h2>
<p class="mt-2 text-body-secondary">Batteries included, zero lock-in.</p>
</div>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="h-100 p-4 bg-body border shadow-sm rounded-3">
<span class="badge rounded-pill bg-brand-subtle text-brand" aria-hidden="true">⚡</span>
<h3 class="mt-3 fs-5 fw-semibold text-body-emphasis">Blazing fast</h3>
<p class="mt-2 small text-body-secondary">Static HTML served from the edge — sub-50ms anywhere.</p>
</div>
</div>
<div class="col">
<div class="h-100 p-4 bg-body border shadow-sm rounded-3">
<span class="badge rounded-pill bg-brand-subtle text-brand" aria-hidden="true">🔒</span>
<h3 class="mt-3 fs-5 fw-semibold text-body-emphasis">Secure by default</h3>
<p class="mt-2 small text-body-secondary">Hardened headers, no server attack surface.</p>
</div>
</div>
<div class="col">
<div class="h-100 p-4 bg-body border shadow-sm rounded-3">
<span class="badge rounded-pill bg-brand-subtle text-brand" aria-hidden="true">🎨</span>
<h3 class="mt-3 fs-5 fw-semibold text-body-emphasis">Themeable</h3>
<p class="mt-2 small text-body-secondary">Swap the brand color and radius in one place.</p>
</div>
</div>
<div class="col">
<div class="h-100 p-4 bg-body border shadow-sm rounded-3">
<span class="badge rounded-pill bg-brand-subtle text-brand" aria-hidden="true">🌙</span>
<h3 class="mt-3 fs-5 fw-semibold text-body-emphasis">Dark mode</h3>
<p class="mt-2 small text-body-secondary">Every component ships light and dark palettes.</p>
</div>
</div>
<div class="col">
<div class="h-100 p-4 bg-body border shadow-sm rounded-3">
<span class="badge rounded-pill bg-brand-subtle text-brand" aria-hidden="true">♿</span>
<h3 class="mt-3 fs-5 fw-semibold text-body-emphasis">Accessible</h3>
<p class="mt-2 small text-body-secondary">Semantic markup and visible focus states.</p>
</div>
</div>
<div class="col">
<div class="h-100 p-4 bg-body border shadow-sm rounded-3">
<span class="badge rounded-pill bg-brand-subtle text-brand" aria-hidden="true">📱</span>
<h3 class="mt-3 fs-5 fw-semibold text-body-emphasis">Responsive</h3>
<p class="mt-2 small text-body-secondary">Mobile-first layouts that scale to 4K.</p>
</div>
</div>
</div>
</div>
</section>
/* theme.css — brand color #4f46e5 for Bootstrap 5.3 */
:root { --brand: #4f46e5; --brand-hover: #433cc3; --brand-rgb: 79, 70, 229; --brand-contrast: #ffffff; }
.btn-brand {
--bs-btn-color: var(--brand-contrast); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
--bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
--bs-btn-active-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.text-brand { color: var(--brand) !important; }
.border-brand { border: 2px solid var(--brand) !important; }
.bg-brand-subtle { background-color: rgba(var(--brand-rgb), .12) !important; }
.form-control:focus, .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.overlay { background: rgba(15, 23, 42, .5); backdrop-filter: blur(4px); z-index: 1050; }
.choice[aria-pressed="true"] { border-color: var(--brand) !important; color: var(--brand) !important; box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2); }
.mw-sm { max-width: 24rem; } .mw-md { max-width: 28rem; } .mw-lg { max-width: 32rem; } .mw-xl { max-width: 36rem; }
.mw-2xl { max-width: 42rem; } .mw-4xl { max-width: 56rem; } .mw-6xl { max-width: 72rem; }
More Bootstrap components for Vanilla JS
All components →- Hero Section A landing-page hero with an announcement badge, a large headline, supporting copy, primary and secondary calls to action and a row of social-proof stats
- Pricing Table A three-tier pricing section with a monthly/yearly billing toggle, a highlighted “most popular” plan and feature checklists
- Testimonial Slider A customer testimonial carousel that shows one quote at a time with labelled slide buttons — no autoplay, so users stay in control
- FAQ Accordion A frequently-asked-questions section with four expandable items, each toggled by a button that exposes its state via aria-expanded
- Currency Pricing Table A dynamic pricing section that detects the visitor’s currency, shows purchasing-power-adjusted regional prices and lets users switch between USD, EUR, GBP, INR and JPY
- Login Modal A centered sign-in dialog with email and password fields, “remember me”, a forgot-password link and a social sign-in button
- Signup Form A registration card with name, email and password fields, a password hint, a terms-of-service checkbox and a primary call to action
- Navbar A responsive top navigation bar with a logo, primary links, a sign-in/CTA pair on desktop and a collapsible hamburger menu on mobile
Install Bootstrap 5 for Vanilla JS
Include Bootstrap 5.3 from the CDN (or npm install bootstrap) and the generated theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css">Use the feature grid in Vanilla JS
Paste the markup where the component should appear. It is pure HTML/CSS — no JavaScript required.
Accessibility & customization
Each card uses an <h3> under the section <h2> for a correct heading outline; emoji icons are marked aria-hidden so they are not read aloud.
Every color, radius and dark-mode choice is baked into plain Bootstrap classes plus a tiny CSS-variable theme file, so the copied code has no runtime dependency on this site.
Compatibility
| Item | Details |
|---|---|
| CSS framework | Bootstrap 5.3+ (CSS only) |
| Library | Plain HTML + optional vanilla JS |
| Interactive state | None (static markup) |
| Dark mode | Yes — toggle in the editor |
| Style | Minimal |
Frequently asked questions
How do I install this Bootstrap feature grid in Vanilla JS?
Create a web page, install Bootstrap 5 as shown in the installation section, then paste the generated code. Also save the generated theme.css file.
Can I change the color of the feature grid?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the feature grid support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the feature grid accessible?
Each card uses an <h3> under the section <h2> for a correct heading outline; emoji icons are marked aria-hidden so they are not read aloud.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.