bootstrap-bp-hugo-theme — Hugo Blog Template

SHA-256: 378aa5b790706d77f5ad99d77e466531089bdadb6293ac6e4555c76e6cac554b

2026-10-03T07:55:37.053Z

# Bootstrap-BP hugo theme

[Bootstrap v5](https://getbootstrap.com/) based Hugo theme which provides out of the box best practices like performance and SEO readiness. Featured images will be resized automatically. This is based on the [Hugo docs](https://gohugo.io/templates/homepage/), [hugo-best-practices](https://github.com/spech66/hugo-best-practices), [Front-End Checklist](https://github.com/thedaviddias/Front-End-Checklist) and the [Front-End Performance Checklist](https://github.com/thedaviddias/Front-End-Performance-Checklist). Contains four different color themes.

Other themes by Sebastian Pech: [Bootstrap-BP](https://github.com/spech66/bootstrap-bp-hugo-theme), [Materialize-BP](https://github.com/spech66/materialize-bp-hugo-theme),
[Bootstrap-BP hugo startpage](https://github.com/spech66/bootstrap-bp-hugo-startpage).

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Bootstrap-BP hugo theme](#bootstrap-bp-hugo-theme)
  - [Table of contents](#table-of-contents)
  - [Features](#features)
  - [Install the theme](#install-the-theme)
  - [Update the theme](#update-the-theme)
  - [Run example site](#run-example-site)
  - [Configuration and theme specific settings](#configuration-and-theme-specific-settings)
  - [Screenshots of configurations](#screenshots-of-configurations)
  - [Google Analytics](#google-analytics)
  - [Page templates / archetypes](#page-templates--archetypes)
  - [Schema.org support](#schemaorg-support)
  - [Images, Open Graph and Twitter Cards](#images-open-graph-and-twitter-cards)
  - [Menus](#menus)
  - [Social Icons](#social-icons)
  - [Icons](#icons)
  - [Custom CSS/JS](#custom-cssjs)
  - [Post cards](#post-cards)
  - [Floating images](#floating-images)
  - [Performance: Bootstrap parts, JavaScript and Font Awesome](#performance-bootstrap-parts-javascript-and-font-awesome)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Features

- Color themes
- SEO best practices supported (Schema.org, open graph, meta information, ...)
- Automatically resizing of images and conversion to WebP (partial `image-webp.html`, used by cards, `optfigure` and `featurette-image`)
- One minified file per resource only (js, css)
- CDN font support (Google Fonts, ...)
- Optional masonry-like mode for startpage
- Settings for easy customization of layouts and features
- Multiple page templates / archetypes supported
- Icons for Social Media as inline SVG (no icon font)
- No Bootstrap JavaScript bundle by default (~1 KB navigation script)
- Custom css/js
- Floating images in posts (shortcode `img-post`)
- Multilingual and i18n support
- ...

## Install the theme

With Git installed, run the following commands inside the Hugo site folder. If Hugo has not yet been installed, read the setup guide [here](https://gohugo.io/getting-started/quick-start/).

```sh
mkdir themes
cd themes
git clone https://github.com/spech66/bootstrap-bp-hugo-theme.git
```

You can get a zip of the latest version of the theme from the [home page](https://github.com/spech66/bootstrap-bp-hugo-theme) and extract it to the themes folder.

## Update the theme

Go to the themes folder as in the installation and run the following command.

```sh
git pull
```

## Run example site

Go to the `exampleSite` folder from the theme `themes/bootstrap-bp-hugo-theme/exampleSite` and run the following command.

```sh
hugo server --themesDir ../..
```

## Configuration and theme specific settings

Most settings should be done with hugo specific variables. There are only a few (optional) additional `[params]`.
Use the `config.toml` from the `exampleSite` subdirectory as base.

- `startPageColumns = true` will show the start page in a Masonry-like mode.
- `customDateFormat = "02.01.2006"` to override the date format.
- `showListsGrouped = true` to add headers for every year.
- `showPostSummary = true` to only show a summary on index and lists.
- `alwaysExpandMenu = true` to expand the menu on non-mobile devices otherwise the mobile button is shown on all devices.
- `themeColor` set to dark, light, blue (do not set for bootstrap default).
- `hideReadingTime` to hide reading time.
- `bootstrapJS = true` to load the full Bootstrap JavaScript bundle (modals, tooltips, carousels, ...). Default: only a small navigation script.

## Screenshots of configurations

`startPageColumns = false`

![startPageColumns = false](https://raw.githubusercontent.com/spech66/bootstrap-bp-hugo-theme/master/images/tn.png)

`startPageColumns = true`

![startPageColumns = true](https://raw.githubusercontent.com/spech66/bootstrap-bp-hugo-theme/master/images/tn2.png)

## Google Analytics

The native Hugo Google Analytics template has been removed!

## Page templates / archetypes

This theme has support for the following archetypes. Based on the specified types the layout and functionality of a page is slightly changed.

- Page (not on the startpage)
- Post (regular post/blog pages)
- Audio (shows spotify in the header)
- Video (shows youtube in the header)
- Quote (highlights a quote and the author)
- Link (show a link with the page title)

## Schema.org support

Provide one author to enable the Schema.org support.

```yaml
[params.author]  
  name = "Sebastian Pech"
```

Pages with a `datum` in the front matter (courses, workshops, events) get an `Event` schema. Used parameters: `datum`, `enddatum` or `termine` (list with `end`), `ort`, `adresse`, `preis` ("kostenlos"/"Spende" becomes 0), `image` and `anmeldung_ab`. The offer's `validFrom` is taken from `anmeldung_ab`, then the page date, then a `YYYY-MM` prefix of the content folder name, otherwise the event start.

## Images, Open Graph and Twitter Cards

This theme uses Hugos `feature/cover` name method to set the optimized feature image. The image named `*feature*` or `*cover*` is used for the posts featured image and get resized. This will also be in the Twitter Cards and Open Graph block.

The header image is automatically added if there is a file called `*feature*` or `*cover*`. The first wildcard is preferred over the second one. If there are multiple images the first one is used.

```yaml
# Site Config toml
title = "My hugo site"

[params]
  description = "Text about the site"

# Post yaml
---
title: "{{ replace .Name "-" " " }}"
date: {{ .Date }}
publishdate: {{ now.Format "2006-01-02" }}
lastmod: {{ now.Format "2006-01-02" }}
draft: true
description: "Text about this post"
tags:
    - "tag 1"
---
```

## Menus

There are two menus in the theme. `main` and `footer`. Specify the entries in the config or the header of the content. `params.icon` shows an icon from `data/bpicons.json` in front of the name (see [Icons](#icons)).

```yaml
[menu]

  [[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = 10
    [menu.main.params]
      icon = "newspaper"

  [[menu.footer]]
    identifier = "Imprint"
    name = "Imprint"
    url = "/imprint/"
    weight = 10

  [[menu.footer]]
    identifier = "categories"
    name = "Categories"
    url = "/categories/"
    weight = 20

  [[menu.footer]]
    identifier = "tags"
    name = "Tags"
    url = "/tags/"
    weight = 30
```

```yaml
---
[...]
menu = "main"
---
```

## Social Icons

Icons for Social Media. Add the block to the config.

```yaml
# Sets Social Media icons to appear and link to your account. Value should be your
# username unless otherwise noted.
# Code from https://themes.gohugo.io/future-imperfect/ theme
[params.social]
  # Coding Communities
  github           = ""
  gitlab           = ""
  stackoverflow    = "" # User Number
  bitbucket        = ""
  jsfiddle         = ""
  codepen          = ""
  # Visual Art Communities
  deviantart       = ""
  flickr           = ""
  behance          = ""
  dribbble         = ""
  # Publishing Communities
  wordpress        = ""
  medium           = ""
  # Professional/Business Oriented Communities
  linkedin         = ""
  linkedin_company = ""
  foursquare       = ""
  xing             = ""
  slideshare       = ""
  # Social Networks
  facebook         = ""
  googleplus       = ""
  reddit           = ""
  quora            = ""
  youtube          = ""
  vimeo            = ""
  whatsapp         = "" # WhatsApp Number
  instagram        = ""
  tiktok           = "" # @username
  tumblr           = ""
  twitter          = ""
  skype            = ""
  snapchat         = ""
  pinterest        = ""
  telegram         = ""
  discord          = "" # invite link
  # Email
  email            = ""
```

## Icons

All icons of the theme are inline SVGs rendered by the `icon.html` partial. Only the icons a page actually uses end up in its HTML, no icon font is downloaded.

```go-html-template
{{ partial "icon.html" "clock" }}
{{ partial "icon.html" (dict "name" "github" "class" "icon-2x") }}
```

The icons are stored in `data/bpicons.json` (glyphs from [Font Awesome Free 5](https://fontawesome.com/license/free), CC BY 4.0). To add your own icon, create `data/bpicons.json` in your site with an entry `"name": {"w": <width>, "d": "<path>"}`. The path uses font units (512 units high, baseline at 0, like the Font Awesome 5 SVG fonts).

## Custom CSS/JS

The theme provides two ways for custom css/js. The first way is writing your styles to `/assets/css/custom.css` and scripts to `/assets/js/custom.js`. This will merge and minify the styles/scripts with the theme specific files resulting in only one file for the whole website.

The second way is using the Site configuration or the post metadata to target specific files in the `/assets/` folder. This will result in one import line per script/style.

```toml
[params]
  js=["/js/test_site.js"]
  jscdn=["https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"]
  css=["/css/test_site.css"]
  csscdn=["https://fonts.googleapis.com/css?family=Roboto&display=swap"]
```

```yaml
---
js:
    - /js/test.js
jscdn:
    - https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js
css:
    - /css/test.css
csscdn:
    - https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900
---
```

## Post cards

Cards show the categories as a small line above the title, a meta line (date, reading time; on the full page also last updated and author) and the tags below. Tags that are also a category are skipped, lists show at most three tags. In lists the whole card links to the post and the summary is cut after four lines.

- Accent color of the category line: set `--bp-accent` in your `assets/css/custom.css`, e.g. `:root { --bp-accent: #c2410c; }`. Default is the `$primary` color of the color theme.
- Extra content below the meta line: create `layouts/partials/content_card_body_extra.html` in your site. The theme ships an empty one.
- Reading time label: i18n key `readingTimeShort`.

**Upgrading from older versions:** sites with their own copy of `content_card_body.html` should remove it (or compare it with the new one), otherwise the old meta line and "Read more" link stay.

## Floating images

`img-post` shows a resource of the page (max. 384 px wide, WebP) floating right or left of the text, or centered.

```
{{< img-post file="photo.jpg" alt="Description" type="right" >}}
```

`type` is `right`, `left` or `center` (default). Positional parameters (`path`, `file`, `alt`, `type`) still work, `path` is ignored.

## Performance: Bootstrap parts, JavaScript and Font Awesome

To keep pages small the theme only compiles the Bootstrap components it uses (see `assets/sass/_bootstrap-imports.scss`). Modal, carousel, tooltip, popover, offcanvas, accordion, toasts and a few others are left out.

If you need one of them, copy `assets/sass/_bootstrap-imports.scss` from the theme to `assets/sass/_bootstrap-imports.scss` in your site and uncomment the component. Components that need JavaScript also require `bootstrapJS = true`.

**Upgrading from older versions:** Font Awesome is no longer part of the theme and the Bootstrap JavaScript bundle is no longer loaded by default.

- Bootstrap JavaScript components (modal, tooltip, ...): set `bootstrapJS = true`.
- Menu icons via `pre = "<i class='fas fa-...'></i>"`: replace them with `[menu.main.params] icon = "..."`.
- Font Awesome classes in your content or layouts (`<i class="fas fa-...">`): switch to `{{ partial "icon.html" "name" }}`, or load Font Awesome yourself with the existing `csscdn` parameter:

```toml
[params]
  csscdn = ["https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"]
```