OnlineEdu

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

OnlineEdu is an online school and course platform website template, built on Bootstrap 5. It has a light blue hero with a student photo, a course search in the header and a sticky menu, and the layout is responsive and mobile-ready. There are eight pages: home, about, courses, instructors, blog, a single blog post, contact and an elements page.

The home page shows six course categories, counters, popular course cards with ratings and prices, the teachers, an about block, a testimonial slider and the latest blog posts. The courses page sorts the course cards into tabs (all, web, graphic, video and language), the instructors page has eight profile cards, and the blog has a sidebar with search, categories, recent posts, tags and a newsletter form. The contact page has a working contact form and a map that loads on click. OnlineEdu gives you a ready-made site for an online school, a training academy or a course marketplace.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 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 runs the testimonial slider, PhotoSwipe 5 the elements gallery, and small built-in modules replace SlickNav, CounterUp, Nice Select and the date pickers. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the eight pages went from 19.1 MB and 454 requests to 4.6 MB and 197 requests in total; the home page from 4.8 MB and 62 requests to 0.75 MB and 30 requests. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading, and the full-page preloader is gone.
• No third-party requests: Josefin Sans, Roboto and Sen are self-hosted, Lucide SVG icons replace the Themify, Flaticon and Font Awesome icon fonts, and the social logos use a small Font Awesome Brands subset. The contact page map loads only when a visitor asks for it and needs no API key.
• Working forms: the contact form, blog comments and the newsletter send through included PHP handlers with a spam trap and show their result in the page.
• Accessibility: a skip link, one main heading per page, a visible keyboard focus ring, labelled form fields, named icon links, keyboard-operable course tabs and mobile menu, and text colours that meet WCAG AA contrast.
• New education photos for the blog, demo content written for an online school, typo fixes, and links that lead to real pages.