Bootstrap Kit

Bootstrap 5.3, as Markout components. Every example below is live: the values the controls write are the same values the rest of the page reads.

Content

Typography

Display heading

Lead paragraph, for the sentence that carries the section.

Body copy with a mark, a deletion, an insertion and fine print.

Plain markup stays plain markup.

No components here on purpose: typography is classes, and a component that only forwards a class earns nothing.

Images & figures

A purple placeholder
A teal placeholder
A figure, with its caption as one thing.

Tables

Sorted by name
NameRoleJoined
Ada LovelaceAnalyst1843
Barbara LiskovSubstitution1968
Grace HopperCompiler1952
Karen Spärck JonesRetrieval1972

:rows is an expression, so sorting the table is sorting the array — there is no second place where the order lives.

Forms

Form controls

We only use it to reply.
That doesn't look like an email address.
Please check this value.
Please check this value.
Please check this value.
40

:aka names the instance, and its :value is an ordinary value — which is why the sentence above needs no event, no binding and no state of its own.

Checks, radios & switches

Plan

Plan: Pro · terms not accepted

Input groups

@
$ .00

Components

Accordion

Every component on Bootstrap's own cheatsheet, as a tag.

It asks for $host — the instance it was slotted into, as opposed to $parent, which is the scope it was written in. Nothing here carries an id.

An item outside an accordion has no host, and opens and closes independently.

Alerts

Badges

primary secondary success danger warning info light dark 99+

Buttons

Link as button

Cards

A blue placeholder
Card title
With a subtitle

Parameters for the chrome, the slot for the content.

Go somewhere
Updated 2 days ago
Featured new
Special title treatment

A card that colours itself, header and all, from one parameter — and the header is a slot, so it can hold markup rather than a string.

Collapse

The trigger is a separate tag on purpose: more than one thing may open the same region.

List group

Inbox 14 Drafts Two of them are the same draft. Archive Spam

Offcanvas

A panel

Same shape as the modal: a trigger names it, or a value opens it.

One Two

Pagination

Showing page 2 of 5

:select is a function parameter, not a DOM event: the component calls it with the page number, and the page decides what that means.

Placeholders

Loading…



Progress

40%
40

One value, three bars: the slider writes it and the bars read it, with nothing in between.

Spinners

Toasts

Tooltips & popovers

These two are the only components Bootstrap does not start by itself. Change the pagination above and the last tooltip's text follows, because :handle-title rebuilds it.