Skip to content
  • No data uploaded
  • Instant results
UI Component Generator

Bootstrap 5 Feature Grid for React — Glassmorphism

A production-ready glassmorphism 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 React code update instantly in your browser.

Live component editor

Library
ReactVueHTML
Framework
TailwindBootstrap
Style
MinimalGlass
Theme
Corner radius
Live preview 
import 'bootstrap/dist/css/bootstrap.min.css';
import './theme.css';

export default function FeatureGrid() {
  return (
    <section className="px-4 py-5">
      <div className="mw-6xl mx-auto">
        <div className="mw-2xl mx-auto text-center mb-5">
          <span className="badge rounded-pill bg-brand-subtle text-brand">Features</span>
          <h2 className="mt-2 fs-3 fw-bold text-body-emphasis">Everything you need to launch</h2>
          <p className="mt-2 text-body-secondary">Batteries included, zero lock-in.</p>
        </div>
        <div className="row row-cols-1 row-cols-md-3 g-4">
          <div className="col">
            <div className="h-100 p-4 glass shadow-lg rounded-3">
              <span className="badge rounded-pill bg-brand-subtle text-brand" aria-hidden="true">⚡</span>
              <h3 className="mt-3 fs-5 fw-semibold text-body-emphasis">Blazing fast</h3>
              <p className="mt-2 small text-body-secondary">Static HTML served from the edge — sub-50ms anywhere.</p>
            </div>
          </div>
          <div className="col">
            <div className="h-100 p-4 glass shadow-lg rounded-3">
              <span className="badge rounded-pill bg-brand-subtle text-brand" aria-hidden="true">🔒</span>
              <h3 className="mt-3 fs-5 fw-semibold text-body-emphasis">Secure by default</h3>
              <p className="mt-2 small text-body-secondary">Hardened headers, no server attack surface.</p>
            </div>
          </div>
          <div className="col">
            <div className="h-100 p-4 glass shadow-lg rounded-3">
              <span className="badge rounded-pill bg-brand-subtle text-brand" aria-hidden="true">🎨</span>
              <h3 className="mt-3 fs-5 fw-semibold text-body-emphasis">Themeable</h3>
              <p className="mt-2 small text-body-secondary">Swap the brand color and radius in one place.</p>
            </div>
          </div>
          <div className="col">
            <div className="h-100 p-4 glass shadow-lg rounded-3">
              <span className="badge rounded-pill bg-brand-subtle text-brand" aria-hidden="true">🌙</span>
              <h3 className="mt-3 fs-5 fw-semibold text-body-emphasis">Dark mode</h3>
              <p className="mt-2 small text-body-secondary">Every component ships light and dark palettes.</p>
            </div>
          </div>
          <div className="col">
            <div className="h-100 p-4 glass shadow-lg rounded-3">
              <span className="badge rounded-pill bg-brand-subtle text-brand" aria-hidden="true">♿</span>
              <h3 className="mt-3 fs-5 fw-semibold text-body-emphasis">Accessible</h3>
              <p className="mt-2 small text-body-secondary">Semantic markup and visible focus states.</p>
            </div>
          </div>
          <div className="col">
            <div className="h-100 p-4 glass shadow-lg rounded-3">
              <span className="badge rounded-pill bg-brand-subtle text-brand" aria-hidden="true">📱</span>
              <h3 className="mt-3 fs-5 fw-semibold text-body-emphasis">Responsive</h3>
              <p className="mt-2 small text-body-secondary">Mobile-first layouts that scale to 4K.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

More Bootstrap components for React

All components →

Free Bootstrap 5 Feature Grid for React — Glassmorphism by pGento

Install Bootstrap 5 for React

Create a React project with Vite and install Bootstrap:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm install bootstrap

Save the generated theme.css next to the component; the component file already imports bootstrap/dist/css/bootstrap.min.css and ./theme.css. No Bootstrap JavaScript is required — interactivity uses useState.

Use the feature grid in React

// App.jsx
import FeatureGrid from './FeatureGrid';

export default function App() {
  return <FeatureGrid />;
}

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. The glass style relies on backdrop-filter, supported in all current browsers; place it over a colorful background for the best effect.

Compatibility

ItemDetails
CSS frameworkBootstrap 5.3+ (CSS only)
LibraryReact 18+ (function component)
Interactive stateNone (static markup)
Dark modeYes — toggle in the editor
StyleGlassmorphism (backdrop blur)

Frequently asked questions

How do I install this Bootstrap feature grid in React?
Create a React project, 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.
Bootstrap 5 Feature Grid for React — Glassmorphism

Embed this tool on your site

Paste this code into any web page. It stays free, fast and ad-free inside your site.

Print or save as PDF

Prints just this tool and its result. Choose “Save as PDF” as the printer to get a file. Branding is stored only in this browser.