Libro

Author: Colorlib

Updated: October 2026 · v3.0.1

Credits: Images from Unsplash

Libro is a fashion and lifestyle magazine blog template, built on Bootstrap 5. It has a split-screen layout: on large screens a full-height photo slider stays fixed on the left half of the screen while the posts scroll on the right, and the menu button opens a full-screen gradient menu. The layout is responsive and mobile-ready. There are seven pages: home, fashion, model, travel, about, contact and a single blog post.

The home page has a two-column grid of post cards with pagination. The fashion page has large post cards with a meta column and a video, the model page full-bleed photo tiles with a caption on hover, and the travel page posts with round thumbnails. You will also find an about page with social links, a blog post with photos, tags, an author box, comments and a comment form, and a contact page with a working contact form and a map that loads on click. Libro gives you a ready-made site for a fashion, style or travel blog.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.0 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 replaces Owl Carousel on the hero sliders, a video dialog replaces Magnific Popup, a small built-in module replaces Waypoints and animate.css, and unused plugins such as Stellar, AOS, Scrollax and the date and time pickers are gone. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 3.4 MB and 46 requests to 1.1 MB and 18 requests, and the contact page from 1.8 MB and 46 requests to 316 KB and 7 requests. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen, the first hero photo is preloaded, and the full-page preloader is gone.
• No third-party requests: Work Sans and Playfair Display are self-hosted, the IcoMoon icon font is replaced by Lucide SVG icons and a 1 KB social-logo subset, and the unused Flaticon, Ionicons and Open Iconic fonts are gone. The contact page map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks “Show map”, the video on the fashion page 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 Google Maps script with a sample key, which threw errors on the six pages without a map.
• Working forms: 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 had no action and no field names, so nothing could be sent.
• Accessibility: a skip link and a main landmark on every page, one h1 per page with headings in order, a real menu button, a full-screen menu that moves focus to its first link, keeps the page behind out of reach, closes with Esc or the × and returns focus to the button, names on image and icon links, visible focus rings, model captions that also show on keyboard focus, reduced-motion support and WCAG AA text contrast, with dark text on the bright menu gradient and the pink buttons, a darker pink for pink text, darker meta greys and a soft shade at the top of the hero behind the white logo and menu button.
• Fixed: the menu button was a link half the header wide, so an invisible 702 px strip across the top of the posts opened the menu on a 1440 px screen (the button is 50 px wide now), and opening the menu jumped the page back to the top. On phones and tablets the white logo and menu button vanished on the white posts once the hero scrolled away (the header now turns white with dark text there), and the model page no longer scrolls sideways.
• Demo content: fashion copy replaces the off-topic headings in the blog post and the software-tutorial title on the video card, each model photo has its own caption (all ten were identical), the video is a stock city clip, the contact page shows a fictional address, and a photo with a brand logo on a camera strap is replaced with an Unsplash photo.