Chariter

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Chariter is a website template for charities, nonprofits and community fundraising groups, built on Bootstrap 5, with a deep red accent and a serif heading font. The layout is responsive and mobile-ready. There are seven pages: home, causes, about, blog, blog post, elements and contact.

The home page has a top bar, a fading hero slider, a carousel of causes with goals, raised amounts and progress bars, an about block, a counter band, “where your gift goes” cards, a call to donate and a volunteer section. The causes page lists all six causes, and the about page repeats the about block, counters and cards. You will also find a blog with a sidebar (search, categories, recent posts, tags and a newsletter form), a blog post with comments and a comment form, an elements page with typography, buttons, lists, a table, a gallery and form fields, and a contact page with a working contact form and a map that loads on click. Chariter gives you a ready-made site to present your organisation and the causes it raises money for.

What’s new in 3.0

• Bootstrap 5.3.8 in place of the Bootstrap 5.0 beta of the earlier release, compiled from Sass into one stylesheet with the theme, and plain JavaScript with no jQuery. Swiper 14 replaces Slick on the hero and causes sliders, PhotoSwipe replaces Magnific Popup for the elements gallery, the selects are the browser’s own, and small built-in modules replace the jQuery plugins for the mobile menu, counters and progress bars. Owl Carousel, WOW, Waypoints and the form plugins, which loaded on every page with nothing to run, are gone. Lucide SVG icons replace Font Awesome 5, Themify and Linearicons, 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 one minified stylesheet and one script.
• Lighter pages: all seven pages together went from 14.4 MB and 412 requests to 4.6 MB and 192 requests, and the download from 6.5 MB to 3.5 MB. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading below the first screen, and each page preloads its hero image.
• No third-party requests: Lora and Roboto are 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 fonts from Google Fonts and an analytics tag, and the contact page loaded the Google Maps script.
• Working forms: the contact form, the blog comment form, the newsletter forms in the footer and blog sidebar and the elements sample form send through includes/send-email.php, with a spam trap and an in-page message. Before, the comment, newsletter and elements forms posted nowhere. The Donate buttons lead to the causes list and the contact form and take no payment (the README explains how to connect a payment provider); the header’s “Donate Now” button used to link to a page that did not exist.
• Accessibility: a skip link, a main landmark and one h1 per page, a labelled menu button, a Blog submenu that opens from the keyboard, labelled form fields, names on icon-only links, visible focus rings, sliders that pause on hover and focus and stop under reduced motion, and WCAG AA text contrast, with all text at 5.4:1 or better: the brand red behind white text, a red layer over the pink counter band, a scrim behind the hero text on phones, darker greys and readable demo buttons on the elements page.
• Fixed: on phones the menu was a plain grey bar because the theme’s menu styles were missing; it is now a menu button that opens a full menu panel. The home page no longer shows the same cause twice, the counters read sensibly (35+ active cases, 12k volunteers, 200+ projects a year, 1,200 families helped), and the Education card shows a book instead of the food icon. Links that pointed nowhere lead to real pages, the elements selects show one arrow instead of two, the “Right Aligned” sample is right-aligned, and every page has its own title and description.
• New demo content: charity copy in place of placeholder text, six causes with goals and progress, five blog posts and a full article, fictional names and contact details, credited Unsplash photos of volunteers, hands and supplies, and a logo, favicon and service icons redrawn from Lucide shapes.