Skip to content

README.md

Latest commit

 

History

History
157 lines (126 loc) · 8.44 KB

README.md

File metadata and controls

157 lines (126 loc) · 8.44 KB
Raw

Bootstrap Templates

Free, self-contained website templates built on Bootstrap 6 (6.0.0-alpha1) — 28 full site templates and 6 component packs, all MIT licensed.

Every template is a plain folder of HTML, CSS and ES modules. No build step, no bundler, no npm install to look at one. Open index.html and it works.

Important

Bootstrap 6 has not been released. npm i bootstrap@6 does not work — the v6 docs preview publishes that command ahead of the release, but npm latest is still 5.3.8. The framework is vendored into each template from the v6-dev branch at a pinned commit, so nothing here drifts when upstream moves. Treat these as a head start on learning v6, not as a foundation for a production site you need to maintain today.

Bootstrap 6 is built on oklch() and color-mix(), so these target evergreen browsers only: Safari 16.4+, Chrome 111+, Firefox 113+.

Templates

Template For Pages Demo
atelier Portfolio 2 preview
bedrock Construction & Civil Engineering 2 preview
caseworth Law Firm & Accountancy 2 preview
commerce E-commerce 3 preview
drafthouse Architecture & Interior Design 2 preview
fixwell Handyman & Home Services 1 preview
forecourt Car Dealership 2 preview
havenhomes Real Estate 2 preview
helm Admin Dashboard 8 preview
ironworks Gym & Fitness 1 preview
lantern Hotel & Resort 2 preview
ledgerline Fintech & SaaS 2 preview
liftoff Coming Soon 3 preview
locale Directory 2 preview
marigold Wedding 2 preview
meridian Medical & Clinic 2 preview
northgate School 2 preview
northmark Creative & Brand Agency 2 preview
openhands Charity & NGO 2 preview
pressroom Blog & Magazine 2 preview
shortlist Job Board 2 preview
silverhalide Photography 1 preview
soundstage Band & Musician 2 preview
stonebridge Church 2 preview
stratos SaaS 7 preview
summit-conf Conference & Event 1 preview
syllabus Online Course & E-Learning 2 preview
tavola Restaurant 2 preview

Component packs

Template For Examples Demo
bs6-auth 8 Free Login & Sign-ups 1 preview
bs6-cards 10 Free Cards 1 preview
bs6-dialogs 10 Frees 1 preview
bs6-forms 10 Free Forms 1 preview
bs6-navigation 8 Free Navbar, Menu & Sidebar Examples 1 preview
bs6-tables 10 Free Tables 1 preview

Using one

Take the folder. That's the whole process.

git clone https://github.com/ColorlibHQ/bootstrap-templates.git
cd bootstrap-templates/tavola
open index.html          # or: python3 -m http.server

Each folder carries its own assets/vendor/bootstrap6/, so it is independent of this repo and of every other template. Delete the rest and nothing breaks.

Some templates have a build.py that generates their pages from one source of truth — a menu, a curriculum, a pricing table — so the same figure can't end up different on two pages. Edit the data at the top, run python3 build.py. If you would rather just edit HTML, delete build.py; the generated files stand alone.

What's in _kit/

Shared tooling, not a dependency of any template.

File Does
base.css Rebuilds the whole --bs-primary-* family from one --brand token, plus the alpha1 workarounds every template needs
base.js Colour mode, sticky header, drawer auto-close, demo form handling
verify.mjs The gate: console errors, trailing gaps, dead links, undefined classes, v5 leftovers, themeless outline buttons
fetch-images.mjs Pulls CC0/public-domain placeholder photography from Openverse into a template's img/
new-template.sh Scaffolds a folder with the vendored framework and the kit
upgrade.sh Re-vendors every template onto a new Bootstrap 6 build, diffs the risk, then verifies them all 
npm install                       # playwright, for verify.mjs only
node _kit/verify.mjs tavola       # verify one
_kit/upgrade.sh <sha> --apply     # move the whole catalogue to a new v6 build

Bootstrap 6 gotchas worth knowing

The alpha renames more than the migration guide admits, and several of the changes fail silently — the class still exists, nothing errors, the result is just wrong. The ones that cost real debugging time:

  • gap-lg-3 → lg:gap-3. The responsive prefix moved to the front. The v5 form isn't an error, it's a class nobody defines, so it quietly does nothing.
  • d- is still required. md:d-inline, not md:inline. Paired with d-none that mistake hides an element permanently, at every width.
  • .btn-outline needs a .theme-* companion. Alone, --bs-theme-border is undefined, which makes the border: shorthand invalid at computed-value time — so the whole shorthand drops and the button renders with no border at all. Overriding border-color doesn't rescue it.
  • .form-select is gone as a component. Use .form-control.form-control-caret on a native <select>.
  • Accordions are native <details>/<summary>. No .accordion-button, no .collapse.
  • Modal → Dialog, Offcanvas → Drawer, Dropdown → Menu, all native <dialog>.
  • A closed .dialog still occupies layout — alpha1 ships .dialog { display: flex } with no :not([open]) guard. base.css fixes it.
  • .prose is a real component, not a spare name: a flex column driven by --bs-content-gap with margin-block: 0 on its children. Adding your own margins adds to the gap rather than replacing it.
  • Unlayered author CSS beats utilities. Bootstrap wraps everything in @layer, so a shorthand margin: 0 in your stylesheet silently kills .mb-6. Use longhands.

verify.mjs catches the first three automatically.

Contributing

Bug reports and fixes are welcome. Before opening a PR:

node _kit/verify.mjs <template>    # must pass

Please keep templates self-contained — no shared runtime, no CDN links, no external JS dependencies beyond the vendored framework.

Licence

MIT — use them commercially, no attribution required.

Placeholder photography is CC0 / public domain (sourced via Openverse; see each template's CREDITS.txt), or a generated gradient where no suitable public domain image exists. Replace it with your own before you ship.

Built by Colorlib. More free templates at uicookies.com.