Blog Homepage Template

Dark, warm Bootstrap 6 personal blog homepage with a featured essay hero, topic chip filters, bookmarkable post cards, a start-here stepper, reader letters and a newsletter signup.

Also known as: personal blog homepage, writer blog landing page, blog with filterable posts, dark blog homepage

Bootstrap 6 Home Pages Responsive Dark #blog #dark #landing-page #newsletter #responsive

Blog Homepage Template live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

A warm, dark personal blog homepage built with Bootstrap 6 for a fictional writer, Mara Ellison, and her blog Slow Notes. It combines a featured essay hero, filterable post cards, a start-here series, reader letters and a newsletter signup, and suits lifestyle, travel, food or writing blogs.

How it works

The page lives inside .sn-page, which pins data-bs-theme="dark" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast, --bs-control-checked-bg) to apricot, so btn-solid theme-primary, badges and chips share the brand color.

Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end">. Below 1024px the toggler opens the drawer; wider, the links sit centred in one row. The script syncs aria-expanded and closes the drawer after an in-page link.
Hero: an intro with an avatar, a DM Serif Display headline, two calls to action and an avatar-stack of readers, next to .sn-featured, a featured essay card with a stretched-link.
Latest posts: chip theme-primary buttons with data-sn-filter filter the .sn-post cards by data-sn-topic; the active chip gets .active and aria-pressed, and a live region announces the count. Each bookmark button uses the Bootstrap 6 Toggler (data-bs-toggle="toggler") to add .sn-saved, and the script keeps aria-pressed in sync.
Dates: every <time data-sn-ago="5"> is turned into a real date relative to today, so post dates never go stale.
Start here: a stepper sm:stepper-horizontal inside .contains-inline, a progress bar and an About card.
Letters: reader quotes as tilted note cards plus a <dl> of stats.
Sunday letter: a <form data-bs-validate novalidate> with two form-fields and a .check. Invalid fields get .is-invalid; a valid submit shows a spinner, simulates the request and opens .sn-toast with Toast.getOrCreateInstance().

Customization

Change --sn-apricot, --sn-sage and --sn-bg on .sn-page in style.css; update the --bs-primary-* overrides beside them.
Swap fonts through --sn-display and --sn-body (and the Google Fonts link).
Add a post by copying an .sn-post article; set data-sn-topic to match a chip's data-sn-filter, and data-sn-ago to its age in days.
Mark series steps as read by adding .active to .stepper-item and changing the .sn-w50 width.
Replace the setTimeout in the .sn-form submit handler with fetch() to your newsletter provider.
Remove .sn-letter-tilt to keep all reader cards straight.

The photos come from Unsplash; replace them with your own images.

Use cases

Personal blogs: a featured essay hero introduces the writer and the latest post
Lifestyle, travel and food blogs: topic chips filter post cards and a live region announces the count
Reader engagement: bookmark buttons save posts, and reader letters appear as note cards
Newsletter growth: a start-here stepper and a Sunday letter signup guide new readers

Accessibility

A skip link jumps to #sn-main. The drawer is a native <dialog> with a labelled title, filter chips and bookmarks expose aria-pressed, icon buttons have aria-label, and the toast uses role="status". Focus rings use the brand apricot, and motion is disabled under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). lg:navbar-expand with a Drawer replaces navbar-expand-lg and navbar-collapse, btn-solid theme-primary replaces btn-primary, .chip, .stepper, .avatar and Toggler are new v6 components, and data-bs-validate replaces the old needs-validation script.

Blog Homepage Template at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons, fonts.googleapis.com
Layout: Responsive, works on mobile, dark design
Category: Home Pages
License: Free for personal and commercial use

Questions about this template

Can I use the Blog Homepage Template code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons and fonts.googleapis.com from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Karla:wght@400;500;600;700&display=swap">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.