Atelier — Free Bootstrap 6 Portfolio Website Template
Atelier is a free, premium Bootstrap 6 portfolio template for designers, developers and freelancers. It pairs a personal landing page — selected work, about, skills, an experience timeline and writing — with a complete case study page, so you can show the work rather than just list it.
The contact form is more capable than a portfolio template usually gets: a Combobox for project type, the new Datepicker for an ideal start date, and a Range slider with a live value bubble for budget. None of those components exist in Bootstrap 5.
Key features
- Two pages — personal landing page and a full case study layout
- Selected work grid with hover states and project metadata
- Experience timeline and animated skill meters built on Progress
- Case study page using .prose typography, result metrics and a sticky summary rail
- Contact form with Combobox project type, Datepicker start date and a Range budget slider with live value bubble
- ScrollSpy navigation rebuilt on IntersectionObserver, offset for the sticky header
- Mobile navigation in a native
- Retheme the whole template by changing a single –brand token
- Full dark mode via data-bs-theme, remembered across visits
- Native form validation with data-bs-validate and :user-invalid
- ESM-only vanilla JavaScript — no jQuery, no bundler, 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().
