Etrain

Author: Colorlib

Updated: October 2026 · v3.0.3

Credits: Images from Unsplash

Etrain is an online education website template built on Bootstrap 5, with a clean and contemporary look. The layout is responsive and mobile-ready and works in all popular web browsers. It comes with fifteen pages: home, about, courses, course details, instructors, pricing, testimonials, FAQ, a student dashboard, login, registration, blog, blog post, contact and an elements page.

Etrain is a good fit for online courses, where you can share your knowledge with the whole world. It comes with sticky navigation, animated statistics, a testimonial slider, course cards with level badges and a category filter, a curriculum accordion, instructor bios, a three-plan pricing table, an FAQ, a newsletter signup and a contact page with a working form and a click-to-load map. Etrain helps you set up your online learning platform sooner, and you can link it to your social media accounts as well.

What’s new in 3.0

• Bootstrap 5.3.8 and plain JavaScript as before, now with the theme’s Sass sources and npm run build (Dart Sass and esbuild), which compiles one minified stylesheet and one script. Swiper 14 replaces Swiper 12 and loads only on the home page, a small CSS animation replaces animate.css, and the elements page gallery opens in a PhotoSwipe lightbox.
• Lighter pages: the fifteen pages together went from 35.3 MB and 504 requests to 9.7 MB and 343 requests, and the download from 8.3 MB to 4.6 MB. Every image has real dimensions, background photos have AVIF versions too, images below the fold load lazily, and the 1.4 MB inner-page header image is now an 85 KB JPEG.
• No third-party requests: Poppins and Roboto are self-hosted, the Themify and Flaticon icon fonts are replaced by Lucide SVG icons and a 1.3 KB social-logo subset, the contact map is OpenStreetMap, loaded only when a visitor clicks “Show map”, and the analytics snippet stays commented out until you add your own ID. Before, every page loaded web fonts and an analytics script with a placeholder ID from other sites, and the contact page loaded a full maps embed.
• Working forms: the contact, comment and newsletter forms send through php/send-email.php, with validation, a spam trap and an in-page message. Before, the comment and newsletter forms went nowhere. Login and sign-up are clearly marked as demo forms, and the blog and course searches are real search forms.
• Accessibility: one h1 per page, names on icon-only links and buttons, star ratings read out as one value, visible keyboard focus (the old CSS removed it) and WCAG AA text contrast, with a darker grey for body text, a darker orange for orange text and navy text on the orange tags.
• Fixed: half of the icons were missing from the icon font and showed nothing (course details, dashboard stats, pricing checks, contact details, instructor social links), the home page blog titles were white on white, the “About us” list icons sat at the edge of the page, the course category buttons did nothing, the “4.8” counter stopped at 4, and each select box on the elements page was drawn twice.
• Demo content: instructor and reviewer names now match their photos, the address, phone and email are fictional (a real street before), the bios mention no real universities or companies, and five blog photos are replaced with education photos (one showed a branded phone).