Every template on this page was designed and is maintained in-house by uiCookies. These are our own directory and listing layouts: a city guide and local business directory, a property marketplace and two job boards. The subjects differ, but the job is the same, which is helping a visitor narrow a long list down to the one entry worth clicking.
Directory and listing sites share a recognisable pattern, and all four templates are built on it: a search bar up front, filters that narrow the results, and listing cards that carry the facts people compare, such as rating, price, salary or location. Locale and Shortlist add a dedicated detail page for a single listing. What makes the pattern work is the detail. Filters have to be usable on a phone, cards need enough information for a visitor to skip the ones that don't fit, and the next step, whether that is booking a tour, leaving a review or applying for a role, should be obvious on every listing.
Each template is a static set of HTML, CSS and JavaScript files with a live demo and a direct download, free for personal and commercial use under the standard uiCookies licence; attribution is optional but always welcome, and the full terms are at uicookies.com/license. Acre and Roster run on Bootstrap 5 with vanilla JavaScript and no jQuery. Locale and Shortlist are built on Bootstrap 6, which is still in alpha: they make good use of new components such as Combobox, Range and Datepicker, but they target evergreen browsers only and are better treated as a head start on v6. Where search and filters are interactive, they work on the sample listings bundled with the template, and every form validates in the browser but sends nothing until you connect it to a backend or form service.
The templates
Locale
Locale is a two-page template for city guides and local business directories, demonstrated as a guide to good places in Ghent. The results page pairs a Combobox search bar, including a searchable multi-select for categories, with a category strip that folds extra items into a menu as the screen narrows, a listing grid and a sticky map rail. Guide collections such as "The specialty coffee crawl" and a "Claim your listing" prompt sit alongside. The listing page covers tabs, reviews, opening hours, a photo grid, a review form and nearby places.
Map pins highlight as you hover over or focus a listing, and the filter drawer combines Chip input, a Range slider with a live value bubble and the new Datepicker. One –brand token rethemes the whole directory, and the dark-mode choice is remembered across visits. Built on Bootstrap 6 (alpha, pinned build) with ESM-only vanilla JavaScript, no jQuery and no build step.
Acre
Acre takes the listing pattern into property as a single-page real estate marketplace with a dark proptech identity in ink navy, azure and amber. A floating Buy / Rent / Sold command bar searches by location, type, price and beds, and each card in the featured-homes grid shows price, beds, baths, square footage and an agent avatar. Below sit a bento mosaic of popular cities, browse-by-type tiles, a three-step path from first search to front-door keys and a top-agents rating grid. It suits agencies, brokerages, lettings sites and listing portals.
The favourite hearts actually work: they save to localStorage and update a Saved counter in the header. Filter chips for All, For sale, For rent and Just listed filter the grid live and show an empty state when nothing matches, while the search bar itself is a front-end demo. Built on Bootstrap 5 with vanilla JavaScript and inline SVG icons, no jQuery.
Shortlist
Shortlist builds a two-page job board around one editorial rule: every listing shows a real salary range. The board opens with a two-field search, then a sticky filter rail led by a salary-floor Range slider, with working-pattern and contract checkboxes, a multi-select sector Combobox and a salary-only switch, beside rows that list company, location, pattern and contract type. Sector tiles with live counts, a hiring-companies grid and a post-a-job form follow. The job page adds the full description, the hiring process and a sticky apply rail that opens an application form in a native dialog.
The one demo role without a range is badged "salary not disclosed" rather than styled like the rest, and the post-a-job form will not submit until both salary fields are filled. Active filters show as dismissible chips, and one set of job data renders both pages, so salaries can't disagree. Built on Bootstrap 6 (alpha, pinned build) with ESM-only vanilla JavaScript and no jQuery.
Roster
Roster pairs a conversion-focused landing page with a full job board filtered from a left sidebar. The landing page opens on a hero search by keyword, location and category with popular-search chips, then moves through a browse-by-category grid with live job counts, featured jobs, a tabbed how-it-works widget with separate candidate and employer flows, an employer call to action, a job-alerts signup and an FAQ. It fits niche career sites, recruitment and staffing agencies, and company careers or "we're hiring" pages.
Filtering is instant vanilla JavaScript by keyword, category, job type, minimum salary and remote-only, with sorting by most recent or highest salary, and category cards pass their choice to the board through a URL parameter. All content stays visible with JavaScript switched off. Built on self-hosted Bootstrap 5 with vanilla JavaScript, no jQuery and no plugins.
Compare at a glance
| Template | Best for | Pages | Standout feature |
|---|---|---|---|
| Locale | City guides and local directories | 2 | Sticky map rail with synced pins |
| Acre | Property listings and rental portals | 1 | Working favourites with a saved counter |
| Shortlist | Job boards and recruitment agencies | 2 | Salary-first filters and required pay fields |
| Roster | Careers pages and staffing agencies | 2 | Instant sidebar filters with URL handoff |
How to choose
Pick by what is being listed. Cafés, shops and services with addresses and opening hours belong on Locale, the only template here with a map rail and a full listing page with reviews. Homes for sale or rent suit Acre, whose cards already carry price, beds and baths and whose favourites work out of the box. For jobs, choose between the two boards on stance and stack: Shortlist makes salary transparency the point and adds a job detail page with an application dialog, while Roster is the Bootstrap 5 option, with a marketing-style landing page in front of a sidebar-filtered board. If the site has to launch on a framework that is already released, lean towards Acre or Roster, because Locale and Shortlist run on Bootstrap 6 alpha.
There is no classifieds-specific template here. The closest starting point is Locale, whose search, category strip, filters, listing grid, detail page and "Add a listing" link map onto a classifieds site, and Acre's saved-favourites pattern is worth borrowing. Neither provides what classifieds depend on, namely user accounts, ad posting, moderation and payments, so plan for a backend or platform behind the markup. Recruiters and HR teams are better served: Shortlist and Roster both suit recruitment agencies, and Roster also works as a company careers page. Neither includes candidate tracking, so route applications to an inbox or an applicant tracking system.
Frequently asked questions
Do the search and filters work with my own listings?
They work on the sample listings bundled with each template. Roster's filters and Acre's filter chips run in the browser and pick up new cards through data attributes, so adding a listing means duplicating a card and setting its category, and Shortlist keeps its job data in one place that renders both pages. For a directory that changes daily, generate the cards from your own database or API.
Can businesses or employers submit their own listings?
The entry points are there, but the forms are front-end only. Shortlist's post-a-job form validates in the browser and requires both salary fields, and Locale links to "Add a listing" and invites owners to claim theirs, yet nothing is saved or published until you connect a backend, form service or moderation workflow. Paid listings would also need a payment provider.
Do I have to show a salary on every job?
Shortlist is built on the idea that you should: its filter rail leads with a salary floor, the post-a-job form requires both salary fields, and a role without a range is badged "salary not disclosed" instead of blending in. Roster also shows salary ranges on its cards and filters by minimum salary. Both boards assume pay is published, so decide early how you will handle roles that don't state it.
Do favourites, reviews and saved settings persist?
Only in the visitor's own browser. Acre's favourite hearts save to localStorage and keep the header counter up to date, so they survive a reload on the same device, and Locale remembers the dark-mode choice across visits. Locale's review form validates but stores nothing, so reviews and saved lists that follow a user across devices need server-side storage.
Are the Bootstrap 6 directory templates ready for a live site?
Locale and Shortlist use Bootstrap 6, which has not been released and is still changing, so treat them as a head start on v6 rather than a base you will maintain for years. The framework is vendored at a pinned commit, so nothing drifts, but it targets evergreen browsers only: Safari 16.4+, Chrome 111+ and Firefox 113+. For a directory that must go live on a released framework now, Acre and Roster run on Bootstrap 5.
Related templates
Free Real Estate Website Templates · Free E-commerce Website Templates · All free HTML website templates
