Hugo Bootstrap v4 Blog

Hugo Bootstrap v4 Blog is a Hugo static site generator theme for creating blog-style websites, built on the Bootstrap v4 CSS framework. It turns Markdown content into a responsive two-column blog with a simple, opinionated design.

What is Hugo Bootstrap v4 Blog?

Hugo Bootstrap v4 Blog is a theme for the Hugo static site generator, created by Alan Orth, that focuses on blog-style content. It takes Markdown files from your Hugo site and renders them as a responsive, two-column blog layout using Bootstrap v4. The theme is based on the now-retired Bootstrap blog example and follows a minimal, fast-loading approach.

Key Features

• Responsive two-column layout — Built on Bootstrap v4's grid system, the theme adapts cleanly to desktops, tablets, and phones.
• Native system font stack — Uses Bootstrap v4's reboot font stack, so no web fonts are loaded, which improves page speed and cross-platform consistency.
• Structured data & social metadata — Automatically emits JSON-LD, OpenGraph, and Twitter Card tags from post front matter, giving rich search results and share previews without additional plugins.
• Multilingual & RTL support — Works with Hugo's built-in i18n (added in Hugo 0.17) and supports right-to-left languages like Arabic and Farsi.
• GDPR-compliant Google Analytics — The analytics script is not loaded until the user agrees to a configurable consent banner, as shown in exampleSite/config.toml.
• Disqus comments — Enables per-post comment threads; site-wide or per-post disabling is possible by setting comments = false in front matter.
• Responsive image srcset — A custom figure shortcode generates srcset attributes for images in Hugo page bundles, with a fallback to the static directory for standard references.
• Configurable summaries — List templates can show content excerpts, and using the <!--more--> tag lets you control exactly where a post is truncated.

Who is it for?

• Individual bloggers — People who want a fast, clean blog without configuring a CMS or complex JavaScript.
• Hugo developers — Those who need a Bootstrap v4-based starting point for a blog-style site and want an example to customize.
• Site owners with multilingual audiences — Teams that publish in RTL languages can use the theme's i18n support out of the box.

What can you do with it?

• Personal bloggers: Write posts in Markdown under content/posts, and the theme renders them with summaries, social sharing icons, and optional Disqus comments.
• Multilingual site operators: Use Hugo's language configuration to create versions of posts in different languages, including Arabic or Farsi, with proper RTL layout.
• Privacy-focused publishers: Add GDPR-compliant Google Analytics with a consent banner so tracking starts only after user approval.

How does it work?

Clone the repository into your Hugo site's themes directory, copy recommended values from exampleSite/config.toml, and place posts in content/posts. For developers who want to customize Bootstrap assets, the theme includes SASS sources; run npm install and npm run build with Node.js version 14 or higher to rebuild them.