11ty-plain-bootstrap5 is a minimalistic starter template for the Eleventy static site generator that combines Bootstrap 5 and Laravel Mix for compiling SCSS and JavaScript.
What is 11ty-plain-bootstrap5?
11ty-plain-bootstrap5 is an open-source boilerplate that gives you an Eleventy (11ty) site with Bootstrap 5 installed via npm and Laravel Mix as the build tool for SCSS and JS. It takes source files in the src/ folder and outputs a static _site/ folder that you can host anywhere. The template is maintained by mandrasch on GitHub and is licensed under MIT.
Key Features
- Eleventy static site generator — Uses Eleventy to generate fast static HTML/CSS/JS output from templates in the
src/directory. - Bootstrap 5 via npm — Imports Bootstrap 5 as an npm package, so you can customize Sass variables and use only the components you need.
- Laravel Mix build pipeline — Compiles SCSS and JavaScript with Laravel Mix (a webpack wrapper) and runs Autoprefixer automatically.
- Eleventy navigation plugin — Includes
eleventy-navigationfor creating and managing site menus. - Eleventy image plugin — Includes
eleventy-imgfor responsive image processing. - Eleventy RSS plugin — Includes
eleventy-rssto generate feeds and produce absolute URLs for social media open graph tags. - Gitpod support — One-click launch in Gitpod for an instant browser-based development environment.
- Live demo — A GitHub Pages demo is available at https://mandrasch.github.io/11ty-plain-bootstrap5/.
Who is it for?
Developers who want a clean Eleventy starter with Bootstrap styling without a heavy framework. It suits:
- Frontend developers — who want to build a marketing site or blog with Eleventy and need a ready-made Bootstrap 5 + Sass build setup.
- Static site enthusiasts — who prefer a minimal, readable codebase they can extend rather than a large multi-tool starter.
- Designers prototyping — who want a simple layout based on Bootstrap's Jumbotron example for quick page mockups.
- Open-source learners — who want to study how Eleventy, Laravel Mix, and the eleventy plugins work together.
Use cases
- Launch a personal website or blog — Use the built-in navigation, image handling, and RSS feed support to publish content quickly.
- Prototype a Bootstrap 5 page — Edit
src/index.njkand the SCSS insrc/scss/app.scssto see changes live on localhost:8080. - Customize the Bootstrap theme — Uncomment or comment out Bootstrap components in
app.scssto reduce the CSS bundle for sustainable web design. - Deploy to GitHub Pages or any static host — The GitHub Actions workflow demonstrates building and deploying automatically.
How does it work?
Install dependencies with npm install, then run npm run dev for a local development server at http://localhost:8080/. Make changes in the src/ folder — the homepage lives in src/index.njk and configuration is in .eleventy.js — and npm run build produces a static site in the _site/ folder.
Pricing
Free — released under the MIT license. The underlying tools (Eleventy, Bootstrap, Bootstrap Icons, Laravel Mix, and the eleventy plugins) are also MIT-licensed.
Alternatives
- 11straps — another Bootstrap-themed Eleventy starter.
- eleventyblog — an Eleventy blog starter from mesinkasir.
- Official Eleventy starters list — https://www.11ty.dev/docs/starter/ contains many other options.
FAQ
Is 11ty-plain-bootstrap5 free?
Yes, it is free and open source under the MIT license. You do not need to attribute the author's additions, although the underlying tools are MIT licensed as well.
What static site generator does it use?
It uses Eleventy (also called 11ty), a JavaScript-based static site generator. The template is preconfigured with Nunjucks (.njk) templates, and the homepage is src/index.njk.
Do I need PHP to use Laravel Mix?
No. Laravel Mix here is a Node.js wrapper around webpack, so it runs purely on JavaScript. The template needs only Node and npm installed.
How do I set the BASE_URL for open graph images?
Set BASE_URL as a Node environment variable when building. It defaults to http://localhost:8080 if not set, and is used by meta.njk to create absolute URLs for social media open graph tags. You can also strip them out in meta.njk.
Can I remove the eleventy plugins?
Yes, the navigation, image, and RSS plugins are optional. You can keep only the ones you need by editing .eleventy.js and removing plugin references.
