The Charity

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

The Charity is a website template for charities, nonprofits, foundations and fundraising campaigns, built on Bootstrap 5, with a warm orange accent. The layout is responsive and mobile-ready. There are eight pages: home, about, causes, single cause, gallery, news, contact and an elements page.

The home page has a hero slider, three ways to help, upcoming events, a featured cause with a funding bar, a causes slider and milestone counters. The about page adds progress rings and testimonials, the causes page lists cause cards with funding bars, and the single cause page has the cause details and a donation pledge form. You will also find a photo gallery with a “Load More” button, a news page with a search box, popular posts and upcoming events in the sidebar, a contact page with a working contact form and a map that loads on click, a newsletter form in every footer, and an elements page with buttons, an accordion, tabs, counters and progress rings. The Charity gives you a ready-made site to present your organisation, its causes and its events.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.0.0 and jQuery), compiled from Sass with the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Swiper 4 on the hero and causes sliders, and small built-in modules replace the jQuery plugins for the counters, progress rings, funding bars, accordion, tabs, mobile menu and “Load More”. Lucide SVG icons replace Font Awesome 4, ElegantIcons, Themify and the PNG line icons, and a subset of Font Awesome 7 Brands draws the social logos, with the X logo in place of the old bird. npm run build (Dart Sass and esbuild) compiles the minified stylesheets and script.
• Lighter pages: all eight pages together went from 10.8 MB and 237 requests to 4.1 MB and 179 requests, and the download from 4.3 MB to 3.2 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen, and the icon fonts and unused plugins are gone.
• No third-party requests: Montserrat is self-hosted, the icons are local SVGs, the contact page shows an OpenStreetMap map 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 font from Google Fonts, and the contact page’s Google Maps embed failed to load.
• Working forms: the contact, newsletter and donation pledge forms send through PHP handlers in includes/, each with a spam trap and an in-page message. The pledge form records a pledge by email and takes no payment (the README explains how to connect a payment provider), and every Donate button leads to it. Before, no form sent anything and the Donate buttons pointed nowhere.
• Accessibility: a skip link, landmarks and one h1 per page, alt text on every photo, an accordion and tabs that work from the keyboard, a real menu button that closes with Esc, visible focus rings and WCAG AA text contrast, with all text at 5:1 or better: near-black text on the orange buttons, top bar, funding-bar labels and active tabs, a darker orange for orange text, darker body and meta greys, and a footer credit link you can see.
• Fixed: every page was titled “Hello World” and now has its own title and description. The funding bars and progress rings are drawn at their values and fill as they scroll into view (they could show empty bars and rings with no numbers). The tabs on the elements page wrap on phones instead of running off the screen, the hero’s previous arrow is visible again, the hero has room for its heading and buttons on phones, and the gallery shows all its photos without JavaScript.
• New demo content: credited Unsplash photos of volunteers, tree planting, food drives and water points, a new SVG logo and favicon, fictional contact details, and corrected typos in the headings and menus.