Courses

Author: Colorlib

Updated: October 2026 · v3.0.1

Credits: Images from Unsplash

Courses is an online learning website template, built on Bootstrap 5, for an online course platform, an academy or a teacher. The layout is responsive and mobile-ready, and the header stays at the top of the screen as you scroll. There are nine pages: home, courses, about, blog, blog post, elements, contact, log in and create account.

The home page has a hero with the platform pitch, three features, a featured courses slider, an intro video, subject tiles, learner outcomes, an instructors slider and a call to action. The inner pages add a courses page with six course cards, an about page with the intro video, subjects, outcomes and instructors, a blog with a sidebar of search, categories, recent posts, tags, class photos and a newsletter form, a blog post with an author box, comments and a comment form, an elements page with typography, buttons, lists, a table, a gallery with a lightbox and form elements, a contact page with a working contact form and a map that loads on click, and log in and create account pages. Courses gives you a ready-made site for a general online learning platform or a school that teaches one subject.

Please note: This is a simple Bootstrap template. For a beginner-friendly solution, we recommend combining any of these course WordPress themes with online course plugins.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery 1.12), 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 Slick on the featured courses and instructors sliders, a keyboard-friendly mobile menu replaces SlickNav, PhotoSwipe replaces Magnific Popup in the elements gallery, the play button opens a built-in video dialog, and the selects are native; Owl Carousel, WOW, CounterUp, Waypoints, a countdown, a date picker and other plugins that were loaded on every page with nothing to act on are gone. Lucide SVG icons and a 1.3 KB social-logo subset replace Font Awesome 5, Themify and Flaticon (the Twitter bird is now the X logo). npm run build (Dart Sass and esbuild) compiles the minified stylesheet and script.
• Lighter pages: the home page went from 3.7 MB and 73 requests to 825 KB and 41 requests, the log in page used to load a 50 MB background video and now loads 370 KB (both sign-in pages show a still photo instead), and the download went from 67.1 MB to 3.9 MB. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading below the first screen, the home hero image is preloaded, and 8.9 MB of unused images, another template’s stylesheet and the unused plugin files are gone.
• No third-party requests: Josefin Sans and Mulish are self-hosted, the contact map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks “Show map”, the intro video loads from YouTube’s privacy-enhanced player only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its web fonts from Google Fonts, and the contact page loaded the Google Maps script with a sample key that showed only an error.
• Working forms: the contact form, the comment form on the blog post and the newsletter form in the blog sidebar send through php/send-email.php, with validation, a spam trap and an in-page message, and the sidebar search opens the blog. Before, the contact mail script put the visitor’s address into the email headers, the comment and newsletter forms posted nowhere, and the log in and sign-up forms posted to the video file; those two are now demo forms that check their fields in the browser, ready to connect to your account system.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, a labelled menu button with a mobile menu that keeps focus inside and closes with Esc, a Blog submenu that opens from the keyboard, labelled form fields, names on icon-only links and buttons, visible focus rings, sliders that pause on hover and focus and under reduced motion, and WCAG AA text contrast: a darker purple for text and behind white text, navy text on the orange buttons (white on orange was 2.0:1), darker body and meta greys, a navy shade behind the white header links and headlines on the hero gradients, and darker subject tiles.
• Fixed: the sticky header’s white links were hard to read on its light gradient (3.5 to 4.0:1), so the gradient is darker; the course and instructor slider arrows were pale grey (1.4:1) and are now clearly visible; the preloader that hid every page until it had fully loaded is gone, and so is a script error on five pages; the “Learn new skills” photo on the home and about pages, which never shipped, is in place; the elements page no longer overflows the screen at tablet width; contact.html has a body tag; and course, subject, instructor, blog and footer links that pointed to “#” or to a missing page now go to the matching pages.
• Demo content: online-course copy instead of lorem ipsum and off-topic filler, six different courses (the cards were six copies of one), eight named subjects (all eight said “Programing”), four instructors and the blog authors with fictional names, five education blog posts (all five had the same headline), a fictional address, phone and email, a stock classroom clip for the play button, and photos that showed brand logos replaced with Unsplash photos or blurred.