Syllabus — Free Bootstrap 6 Online Course & E-Learning Template
Syllabus is a free, premium Bootstrap 6 online course and e-learning website template. It pairs a course landing page — outcomes, a 34-lesson curriculum, instructor, reviews, enrolment and FAQ — with a full sample lesson page carrying notes, resources and the same course outline in a sidebar.
Course pages list a curriculum and stop there, which leaves the two questions a student actually has unanswered: how much is left, and when would I finish. Here every lesson carries its own duration and ticks off, the ticks persist in the browser with no account to create, and an hours-a-week slider turns what remains into a real date — “about 5 weeks — finishing around 2 September”. The curriculum is declared once, so lesson counts, per-module durations and the 11h 26m total are all derived rather than typed twice and left to rot. The lesson page shares the same progress store, and because its sidebar only lists three modules the full lesson-to-minutes map travels on <body> — otherwise “time remaining” would be computed from whatever happened to be on screen.
Key features
- Two pages — course landing page and a full sample lesson
- 34 tickable lessons across seven modules, progress kept in the browser
- Pace planner: hours a week in, a real finish date out
- Lesson counts, module durations and the 11h 26m total are all derived
- Landing page and lesson page share one progress store, synced across tabs
- No account, no request — and the footer states the trade honestly
- Per-module completion counts update as you tick
- Native details for both the curriculum and the FAQ, no accordion JS
- Sticky tracker and sticky lesson sidebar
- Bootstrap 6 vendored at a pinned commit, ESM-only, no build step
Before you use it
Bootstrap 6 has not been released. npm i bootstrap@6 does not work yet and the framework is still changing, so treat this as a head start on learning v6 rather than a foundation for a production site you need to maintain today. The framework is vendored into the template at a pinned commit, so nothing here can drift. It targets evergreen browsers only — Safari 16.4+, Chrome 111+ and Firefox 113+ — because Bootstrap 6 is built on oklch() and color-mix().
