Academia

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Academia is a website template for online schools, course providers and e-learning platforms, built on Bootstrap 5. The layout is responsive and mobile-ready. There are eight pages: home, about, courses, teachers, pricing, blog, blog post and contact.

The home page has a full-height hero, a “why learn with us” section, achievement counters, a course carousel, course categories, a student testimonial carousel, recent blog posts, pricing plans and a newsletter sign-up. The inner pages add an about page with counters and testimonials, a courses page with course cards and categories, teacher cards with social links, a pricing page with three plans, a monthly/yearly switch, a plan comparison table and an FAQ, a blog grid with pagination, a blog post with an author box, comments, a comment form and a sidebar, and a contact page with contact details, a working contact form and a map that loads on click. Academia gives you a ready-made site to present your school, its courses and its teachers.

What’s new in 3.0

• Still Bootstrap 5.3.8 and plain JavaScript with no jQuery, as in 2.x, but Bootstrap is now compiled from Sass together with the theme into one minified stylesheet, and its script ships with the template instead of loading from a CDN. Swiper 14 replaces the hand-written course and testimonial carousels (same three, two and one slides per view, autoplay and highlighted middle testimonial), a small built-in reveal module replaces AOS, small modules run the counters and the map, and the unused GLightbox and Tiny Slider files are gone. Lucide SVG icons and a 1.3 KB five-logo subset of Font Awesome 7 Brands replace Bootstrap Icons. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the contact page went from 1.8 MB and 37 requests to 656 KB and 13 requests. Every photo has an AVIF version with the JPEG as the fallback (2.x shipped WebP only), oversized JPEGs are re-encoded, and each page preloads its hero photo. The download is now 5.2 MB (it was 1.5 MB): it is larger because it includes the Sass sources (the 2.x download had empty Sass folders) and the original JPEG photos alongside the AVIF copies.
• No third-party requests: Roboto is self-hosted, the icons and the Bootstrap script are local, the contact page map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks “Show map”, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its fonts from Google Fonts and its icons and Bootstrap script from jsDelivr, and the contact page loaded map tiles as soon as it opened.
• Working forms: the contact form, the blog comment form and the newsletter form on every page send through php/send-email.php, with validation, a spam trap and an in-page message, and the blog sidebar search opens the blog. Before, every form only reloaded the page.
• Accessibility: a skip link and a main landmark on every page, one h1 per page and headings in order, a labelled menu button, a labelled billing switch, names on the LinkedIn links, a plan comparison table that scrolls from the keyboard, a visible focus ring (focus outlines had been removed), carousels that pause on hover and keyboard focus, reduced-motion support and WCAG AA text contrast: dark text on the bright teal buttons and badges, a darker teal for teal text and behind white text, darker body text, and dark overlays behind the text on the hero, page-title and counter photos, where white text on the light photos was hard to read.
• Fixed: the contact map was invisible on tablets (between 768 and 991 px it had no height); it now loads on click in a box that keeps its size. 341 placeholder links that pointed to “#” (buttons, course cards, blog posts, pagination, footer menus and contact details) now go to real pages, phone and email links. The home page plan prices are correct ($49 to $149; they read “$49K” to “$149K”), the newsletter divider and the blog post sidebar spacing, which used Bootstrap 4 classes, show again, typos are corrected, and every page has its own title and description, with Open Graph tags and school and blog post structured data.
• Demo content: course, FAQ, blog and comment copy in place of placeholder text, distinct course titles and teacher roles, and a fictional address, phone number and example email.