Autohaus
Autohaus is a free two-page Bootstrap 5 website template for car dealerships and automotive sales, built with self-hosted Bootstrap and dependency-free vanilla JavaScript. It ships with a filterable vehicle inventory, a live finance calculator, a test-drive booking form, and a premium dark-charcoal showroom design accented in electric blue. Every interaction is progressively enhanced, so content stays visible and usable without JavaScript.
Key features
- Instant inventory filtering by New, Used, Electric, SUV and Sedan
- Dedicated inventory page with sort by price, year or mileage
- Live vanilla-JS finance calculator with monthly payment and cost breakdown
- Hero inventory mini-search: make, model, max price and condition
- Accessible test-drive booking form with inline validation
- Keyboard-friendly vehicle photo lightbox
- Sticky blur-on-scroll navbar with working mobile menu
- Animated trust stats, testimonials and Bootstrap FAQ accordion
- Dark showroom design with Space Grotesk + Inter type pairing
Best for
- Car dealerships and used-car lots
- Independent automotive sales showrooms
- EV and pre-owned vehicle retailers
- Auto brokers and vehicle listing sites
- Dealer groups needing a fast, no-framework landing site
At a glance
- Pages: index.html, inventory.html
- Framework: Bootstrap 5 (self-hosted)
- JavaScript: Vanilla ES5-safe, no jQuery
- Fonts: Space Grotesk (display) + Inter (body)
- Palette: Charcoal / near-black base, electric-blue accent, metallic neutrals
- License: Free for personal and commercial use
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is the Autohaus template free to use?
Yes. Autohaus is free for both personal and commercial projects, including a real dealership website. You can customize the copy, colors, vehicles and imagery without restriction, and there is no attribution requirement baked into the template.
Does the finance calculator actually work?
It does. The calculator is written in plain vanilla JavaScript and uses the standard amortized-loan formula. As you move the price, down payment, term and APR sliders it recalculates the estimated monthly payment, amount financed, total interest and total cost live in the browser. No server or third-party API is required.
How does the inventory filtering work?
Each vehicle card carries data attributes describing its type, and the filter buttons toggle which cards are visible instantly with no page reload. The homepage shows featured vehicles while the dedicated inventory page adds sorting by price, year or mileage. Because it is client-side, it stays fast even with a large listing.
Is Autohaus built with Bootstrap and does it need jQuery?
Autohaus is built on Bootstrap 5, which is self-hosted in the template's css/vendor and js/vendor folders so nothing loads from a CDN. It uses zero jQuery — every interaction, from the mobile menu to the calculator, lightbox and form validation, is handled with modern vanilla JavaScript.
Will the site work if JavaScript is disabled?
Yes. The template uses progressive enhancement: a small inline script adds a 'js' class to the page, and only then are scroll-reveal elements hidden for animation. With JavaScript off, all content, inventory and text remain fully visible and readable, so you never lose content or SEO value.
How do I add or edit vehicles in the inventory?
Each vehicle is a self-contained card in the HTML. To add one, copy an existing card, update the image, year, make, model, price and spec row, and set the data-category attribute (for example "Used Electric SUV") so it matches the right filters. On the inventory page, also set data-price, data-year and data-mileage so sorting works correctly.
Is the template accessible and mobile friendly?
Accessibility is built in. The template uses semantic landmarks, descriptive alt text on every image, ARIA attributes on custom widgets, visible focus outlines, and full keyboard support for the lightbox, booking form, tabs and accordion. It also honors the prefers-reduced-motion setting and is fully responsive with a mobile navigation menu.
What do I need to change before going live?
Replace the placeholder vehicle photos, team portraits and map image in the img folder with your own assets, then update the dealership name, address, phone number, showroom hours and vehicle listings in the HTML. The booking form is front-end only, so connect it to your email handler or CRM endpoint to receive real test-drive requests.
