Viral

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Viral is a news and magazine blog template for viral stories, lifestyle blogs and trend sites, built on Bootstrap 5. The layout is responsive and mobile-ready. There are five pages: home, category, single post, quiz article and contact.

The home page opens with a breaking-news ticker, a sliding strip of top stories and a featured-post slider, followed by a story grid with category tags and pagination. The category page has a featured post and a story grid, the single post page an article with related posts, comments and a comment form, the quiz article three picture questions with answer choices, and the contact page a working contact form, contact details and a map that loads on click. Every page has a header with a dropdown, a mega menu and search, a sidebar with a newsletter sign-up, trending articles, latest comments and ad banner spaces, and a footer with a second newsletter sign-up. Viral gives you a ready-made site for a viral news, lifestyle or trend blog.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.0 and jQuery 2.2.4), compiled from Sass with the original proportions, and plain JavaScript with no jQuery; no page needs Bootstrap’s own script. Swiper 14 replaces Owl Carousel on the top-stories strip and the featured-post slider, and the mobile menu is a slide-in panel with the search field and Add Post that closes with Esc and returns focus to the menu button. Magnific Popup, WOW, CounterUp, Waypoints and the other plugins in a 140 KB bundle that loaded with nothing to run on are gone. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 3.2 MB and 43 requests to 1.3 MB and 35 requests, and the contact page from 1.7 MB and 74 requests to 426 KB and 17 requests. 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’s main image loads with high priority.
• No third-party requests: Montserrat is self-hosted, Font Awesome 4.7 and the menu’s icon font are replaced by Lucide SVG icons and a 1.2 KB social-logo subset (the Twitter bird is now the X logo), the contact map is an OpenStreetMap map (no API key needed) 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 web font from Google Fonts, and the contact page loaded a Google Maps embed from four Google hosts as soon as it opened.
• Working forms: the newsletter sign-up in the sidebar and the footer, the contact form and the blog comment form send through php/send-email.php, with validation, a spam trap and an in-page message. Before, they posted to “#” and most fields had no names, so nothing could be sent.
• Accessibility: a skip link, a main landmark and one h1 per page, names on icon-only links and buttons, descriptive alt text, a search toggle that is a real button, dropdowns and the mega menu that open from the keyboard, quiz answers that work as keyboard-accessible radio groups, visible focus outlines (the old CSS removed them), and WCAG AA text contrast, with dark text on the green, orange and blue category tags and the Subscribe buttons, black text on the pink-to-orange gradient, a dark shade under the featured-slider captions, and darker comment dates and social icons.
• Fixed: the story cards repeated the same two headlines, the breaking-news ticker showed placeholder text, the contact map showed a different city from the address, the ad banners read “Your add here” (now “Your ad here”), and headlines, the quiz and the footer had typos (“spoted”, “corect”, “Don’tMiss”).
• Demo content: headlines that match their photos, fictional contact details, comment snippets that no longer name a real company, and Unsplash photos without brand markings in place of photos that showed brand logos on cameras, sneakers and clothing or a trademarked slogan.