Booke

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Booke is a one-page website template for a book and its author, built on Bootstrap 5. The layout is responsive and mobile-ready and works in all popular web browsers. Use it as a landing page for a new book: the hero shows the cover next to an order button that you can link to your order page or any store.

The page has a sticky header whose menu scrolls to each section, six feature cards for the book’s formats and details, a “look inside” photo slider, an about-the-author section with a signature, reader testimonials, a newsletter band and a footer with a quick-contact form and social media buttons. If you have a book to promote, Booke gives you a ready-made page to present it and tell readers where to get it.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.3.1 and jQuery), compiled from Sass, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the “Book Screenshot” slider, a built-in module replaces jquery.sticky for the sticky header, a keyboard-operable dialog replaces the off-canvas mobile menu, and smooth scrolling is done in CSS instead of jQuery Easing. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter page: the page went from 11.9 MB and 38 requests to about 1.0 MB and 21 requests, and the download from 12.9 MB to 4.1 MB. Every photo has an AVIF version with the original as the fallback, real dimensions and lazy loading below the fold, the hero book image is 1600 px wide (its PNG fallback went from 5.4 MB to 1.3 MB), the three reader portraits (PNG files with a .jpg name) are real JPEGs, and the 4.6 MB IcoMoon font and unused plugins such as AOS, Fancybox, Isotope, jQuery UI, Magnific Popup, Stellar and Slick are gone.
• No third-party requests: Oswald and Roboto are self-hosted, the IcoMoon and Flaticon icon fonts are replaced by Lucide SVG icons and a 1.2 KB social-logo subset, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, the page loaded its web fonts from another site.
• Working forms: the footer quick-contact form sends through includes/send-email.php, with validation, a spam trap and an in-page message. Before, it had no action and its fields had no names, so nothing could be sent. The newsletter band, two fields with no form around them, is now a real form that checks the address and thanks the visitor, ready to connect to your newsletter provider.
• Accessibility: a skip link, a main landmark, one h1, a real menu button, a mobile menu that keeps keyboard focus inside and closes with Esc, names on the social links, slider links and form fields (the name field was labelled “Enter Email”), descriptive alt text, visible focus rings (the old CSS removed them), an underlined footer credit link, reduced-motion support and WCAG AA text contrast, with darker grey body, card, role and footer text. The blue is unchanged.
• Fixed: the “Prev” and “Next” links above the slider moved it the wrong way, stray text (“div.social_”) showed in the author section, after scrolling down and back up the hero slid under the header, and the footer links pointed nowhere (they now lead to the page’s sections).
• Demo content that fits a book: the four slider photos are replaced with Unsplash photos without brand markings, the hero book carries a fictional title, the hero button reads “Order Your Copy” and leads to the contact form (it linked nowhere), the duplicate “Paper Back” feature card is now “Digital Edition”, and the readers have fitting names and roles (every one was a “Web Designer”, and a woman’s photo carried a man’s name).