CSS styling

Bootstrap

The original component framework. Bootstrap gives you a grid, ready-made components and a JavaScript bundle for interactive widgets — drop in classes and you have a polished UI instantly.

Demo 01

Alerts & button variants

Bootstrap's contextual classes give you a complete colour system for free. Every alert and button here is a stock Bootstrap component.

A success alert — .alert .alert-success.

A warning alert — .alert .alert-warning.

<div class="alert alert-success">A success alert</div>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-primary">Outline</button>

Demo 02

Progress bars

A striped, animated progress bar — pure Bootstrap markup, no extra CSS. Use the buttons to move it (Bootstrap reads the inline width).

45%

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated
              bg-info" style="width:45%">45%</div>
</div>

Demo 03

Accordion — Bootstrap JavaScript

This collapsing accordion is driven by Bootstrap's own JavaScript bundle. Click a header to expand it; opening one closes the others.

A front-end toolkit of CSS components and JS plugins built on a responsive 12-column grid.

Static components are CSS-only, but widgets like this accordion, modals and dropdowns use the bundled JS.

Yes — it's built on Sass variables you can override to retheme everything.

<button data-bs-toggle="collapse" data-bs-target="#ac1">...</button>
<div id="ac1" class="accordion-collapse collapse show"
     data-bs-parent="#bsAcc">...</div>

Demo 04

A working modal — Bootstrap JavaScript

Click the button to open a real Bootstrap modal: backdrop, focus trap, ESC-to-close and all. No code beyond the data attributes.

<button data-bs-toggle="modal" data-bs-target="#bsModal">Launch</button>
<div class="modal fade" id="bsModal"> ... </div>

Demo 05

Cards on the responsive grid

Bootstrap's 12-column grid (row + col-md-*) stacks on phones and sits side-by-side on wider screens. Resize to watch the columns wrap.

Grid card A

Half-width on desktop, full-width on mobile.

col-md-6

Grid card B

The grid handles all the responsive maths for you.

responsive

<div class="row g-3">
  <div class="col-md-6"><div class="card">...</div></div>
  <div class="col-md-6"><div class="card">...</div></div>
</div>

Built with real Bootstrap 5.3 — the official CSS and JavaScript bundle loaded from jsDelivr. The accordion and modal are powered by Bootstrap's own JavaScript (via data-bs-* attributes, no custom JS). Demos are wrapped in a frame so Bootstrap's component styles stay inside the demo area and don't fight the shared CSS shell.

↑ All 64 tools