Medex

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Medex is a website template for medical centres, clinics and specialist practices, built on Bootstrap 5. The layout is responsive and mobile-ready. There are ten pages: home, about, services, doctors, departments, pricing, gallery, blog, a single blog post and contact.

The home page opens with a full-screen hero and a department picker, followed by services next to an appointment form, an about section, the departments as tabs, the doctors, counters, the latest blog posts and patient reviews in a slider. You will also find a doctors page with eight doctor cards, a departments page with a tab for each department, pricing plans, a photo gallery with a lightbox, a blog with a single post, comments and a comment form, and a contact page with a working contact form and a map that loads on click.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.5.0 and jQuery), compiled from Sass together with the theme and the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the patient reviews, PhotoSwipe replaces Magnific Popup in the gallery, Jarallax replaces Stellar on the page headers, small built-in modules replace Waypoints and animateNumber, and the date and time pickers are the browser’s own fields. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all eleven pages together went from 20.9 MB and 396 requests to 8.5 MB and 212 requests, and the home page from 4.0 MB and 52 requests to 1.6 MB and 36 requests. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen, the hero photo is preloaded, and the full-page preloader is gone.
• No third-party requests: Roboto is self-hosted, the icon fonts are replaced by Lucide SVG icons and a small social-logo subset, and the contact page map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks “Show map”. A Google Analytics 4 snippet stays commented out until you add your own ID.
• Working forms: the appointment form, the contact form and the blog comment form send through PHP handlers in php/, with validation, a spam trap and an in-page message, and the department picker in the hero opens the appointment form with that department chosen. Before, the forms had no action and no field names.
• Accessibility: a skip link and a main landmark on every page, labelled form fields, names on icon and image links, visible focus rings, reduced-motion support and WCAG AA text contrast, with deeper shades of the blue and green brand colours, darker greys, denser colour bands and a soft shade behind the home hero text.
• Fixed and updated: footer, social, blog and department links that went nowhere now open the right page or department tab; the header phone and address icons; typos; sharper photo replacements; fictional names, address and phone number; and page titles, descriptions, social sharing tags and structured data on every page.