If you already use Bootstrap: the kit, and what we'd change about it #40

fcapolini · 2026-08-27T17:15:04Z

fcapolini
Aug 27, 2026
Maintainer

Most people who find Markout aren't shopping for a framework. They have a page
that already uses Bootstrap, it already looks right, and they want to add some
behaviour to it without a build step and without rewriting it in something
else. That's the person @markout-lang/bootstrap-kit is for.

Bootstrap 5.3 as Markout components — 27 of them plus base and theme,
following Bootstrap's own cheatsheet,
with the id wiring, the ARIA attributes and the repetition written once.

The pitch is one example

Bootstrap's own markup for a modal with a trigger — ids that have to agree in
three places, aria-labelledby pointing at one of them, and a nesting you copy
from the docs every time:

<button type="button" class="btn btn-primary"
        data-bs-toggle="modal" data-bs-target="#signupModal">Sign up</button>

<div class="modal fade" id="signupModal" tabindex="-1"
     aria-labelledby="signupModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="signupModalLabel">Sign up</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"
                aria-label="Close"></button>
      </div>
      <div class="modal-body">…</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary"
                data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

The same thing through the kit:

<bs-button ::toggle="modal" ::target="#signup">Sign up</bs-button>
<bs-modal ::name="signup" ::title="Sign up">…</bs-modal>

Nobody writes an id. Nobody writes an aria- attribute. The footer is a named
slot with a working Close button as its default, so a modal that doesn't need a
custom one doesn't mention it.

And because it's Markout, there's a second door Bootstrap's markup has no way
to express — state:

<bs-modal ::name="signup" ::title="Sign up" ::open=${wantsSignup}>…</bs-modal>

::open is a value the page owns. Bootstrap's own API gets there through
new bootstrap.Modal(el).show(), which is a verb and therefore not something
markup can say. Binding it to a value is the whole difference between "a modal
you click open" and "a modal that is open when the page says it is".

What it does not do

It is not a fork of Bootstrap, and doesn't want to be. The CSS and JS still
come from Bootstrap — jsDelivr 5.3.8 with SRI hashes by default, and four
tokens to point it somewhere else:

<head :const-bsCssUrl="/vendor/bootstrap.min.css"
      :const-bsJsUrl="/vendor/bootstrap.bundle.min.js"
      :const-bsCssIntegrity=${null}
      :const-bsJsIntegrity=${null}>
  <:import src="/bootstrap-kit/all.htm" />
</head>

That matters for a CSP that allows no third-party origin, an air-gapped build,
a pinned vendored copy, or — most often — your own Bootstrap compiled from
Sass with your own variables. The kit's theming tokens only reach what
Bootstrap exposes as CSS custom properties; pointing bsCssUrl at your build is
how the kit gets out of the way of a real design system.

all.htm is the ordinary import even though it pulls in everything: a component
no tag on the page uses is dropped before the page is served.

The comparison you're actually making

If you're a Bootstrap user adding logic to a page, you are almost certainly
weighing this against Alpine, not against React. That's a fair fight and we'd
rather have it in the open: Alpine drops in with a <script src> and needs
nothing else, which is a lower floor than we have today. What it has no
primitive for is reusable markup — there's no way to declare a parameterised
chunk of HTML and instantiate it, so the modal above stays 20 lines every time
you need one, or moves into whatever renders your pages.

If you've tried both, that comparison is the most useful thing you could post
here.

What we'd like to know

The kit is 0.4.0 and shaped by one person's guesses about what a Bootstrap page
needs. Concretely:

Which component is missing, or wrong? 27 is not all of Bootstrap. What
did you reach for and not find?
Is ::name / ::title / ::open the right convention? :: marks a
component parameter. It reads fine in isolation; we don't know how it reads
after a hundred lines of it.
Does anyone want a Sass path? Today the kit consumes a built Bootstrap.
Compiling from source with your variables is a different, bigger idea.
Where did the abstraction get in your way? The awkward corners are
documented in the kit's README — bs-accordion-item reaching for $host,
bs-pagination having to say ::current because page is taken, tooltips
and popovers building their plugin from a handler. Those are the three we
found. We'd like to hear the fourth.

Kit source is in kits/bootstrap-kit/,
one file per component, each with the reasoning at the top.

Navigation Menu

If you already use Bootstrap: the kit, and what we'd change about it #40

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

If you already use Bootstrap: the kit, and what we'd change about it #40

Uh oh!

fcapolini Aug 27, 2026 Maintainer

The pitch is one example

What it does not do

The comparison you're actually making

What we'd like to know

Replies: 0 comments

fcapolini
Aug 27, 2026
Maintainer