Compass — Free Adventure Tour Operator Website Template
Compass is a free, single-page Bootstrap 5 template for adventure-tour operators and outfitters who sell real expeditions rather than package holidays. Its standout is a hero trip-finder paired with a featured-trips grid where every card carries a colour-coded Easy/Moderate/Challenging difficulty badge, duration, group cap, price and rating. Built with zero jQuery and inline-SVG icons.
Key features
- Hero "Find a Trip" search bar: destination, activity and difficulty
- Trip cards with colour-coded Easy / Moderate / Challenging difficulty badges
- Each card shows duration, group size, star rating and "from" price
- Bento-style destinations mosaic with region labels and trip counts
- Expedition-stat counters that animate up on scroll (reduced-motion aware)
- Three-step "how booking works" flow with a dashed trail connector
- Guides team cards with portrait avatars, specialty tags and stats
- Vanilla scroll-snap reviews slider with accessible prev/next controls
- Front-end validated enquiry form with per-field errors and success state
Best for
- Adventure-tour operators and expedition outfitters
- Guided trekking, climbing or activity companies
- Small tour businesses wanting a one-page site
- Client projects needing a rugged outdoors theme
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Rugged outdoors — deep pine green, trail-blaze ember, Bricolage Grotesque + Hanken Grotesk
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 Compass free to use, including for commercial projects?
Yes. You can use it for a real tour company, a client build or a paid product at no cost. Attribution to uiCookies is appreciated but not required, and there's no premium tier or licence fee to unlock.
Do I need a build tool or framework to edit it?
No. Compass is a static front-end made of plain HTML, one CSS file and a single vanilla JavaScript file. Open the files in any editor, change the markup and refresh the browser. There's no npm install, no bundler and no compile step.
How do I change the colours and fonts?
The whole palette lives in CSS custom properties at the top of css/style.css, including –pine, –ember, –amber and the difficulty-badge colours. Change those values to re-skin the site from one place. The type uses two Google Fonts, Bricolage Grotesque and Hanken Grotesk; swap those links and the font variables to restyle it.
Is it responsive and mobile-friendly?
Yes. It's built on Bootstrap 5's responsive grid and adapts from large desktop down to phones. On small screens the sticky header collapses into a full-screen mobile menu, and the trip cards, destinations mosaic and reviews slider all reflow for touch.
Does it use jQuery or icon fonts?
No. Every interaction is vanilla JavaScript in a single file, and every icon is inline SVG, so nothing extra loads and it runs on strict-CSP hosts without blocked script or icon-font requests. Only Bootstrap's bundle and Google Fonts load externally. It works in all current versions of Chrome, Firefox, Safari and Edge.
Do the trip finder and enquiry form actually submit anywhere?
They're front-end only by design. The "Find a Trip" bar scrolls the page to the trips grid, and the enquiry form validates each field, checks the email format and shows a success message, but nothing is sent or stored. To go live, point the form's action at your booking system, CRM or an email endpoint. There is no payment processing built in.
How do I add or edit trips?
Each trip is a plain HTML card block you can copy, paste and edit. Change the title, image, duration, group size, price, star rating and the Easy/Moderate/Challenging difficulty badge directly in the markup. Add as many cards as you like and the grid handles the layout; no data file or CMS is required, though you can wire one up if you prefer.
What's included, and is it fast?
It's a complete single page: hero trip-finder, expedition-stat counters, six bookable trips, a destinations mosaic, a why-us block, the three-step booking flow, a guides team, a reviews slider and the enquiry form. It stays light because the icons are inline SVG and the hero uses a CSS topographic motif instead of a heavy background image, so there's very little to download.
