SCSS Bootstrap

A bare-bones Bootstrap theme for Hugo, a great starting point for making a fast site with your own styling and no extra bulk. This is a fork of a different theme, extending it to use Hugo Pipes for processing Bootstrap's Sass files for easier theme customization. The benefits include:

• Use variables to make global style changes in multiple places—things like colors and margins can be consistent with a change in a single place
• Better organization of base styles and customization
• Automatically generate one minified css file for your whole site, with no additional dependencies
• Can include only css for functionality you are interested in—no need to import components you don't use in your site

Read more in the customization section below.

Table of Contents

• Minimum Hugo version
• Installation
• Updating
• Run example site
• Configuration
• Customization
• Homepage content
• Shortcodes
  • bootstrap-blockquote
  • bootstrap-table
  • bootstrap-card
• Getting help
• Credits

Minimum Hugo version

The extended variant of Hugo version 0.60.1 or higher is required. View the Hugo releases and download the binary for your OS. To ensure you have the extended version installed, you can run the following command and expect a non-empty return:

hugo version | grep extended

Installation

From the root of your site:

git submodule add https://github.com/obar/scss-bootstrap-hugo-theme.git themes/scss-bootstrap-hugo-theme

Updating

From the root of your site:

git submodule update --remote --merge

Run example site

From the root of themes/scss-bootstrap-hugo-theme/exampleSite:

hugo server --themesDir ../..

Configuration

Copy config.yaml from the exampleSite, then edit as desired.

Customization

The combination of Hugo's easy overrides to files in assets and layout, as well as Bootstrap's SCSS code, make this a starting point theme for you to build with.

For quickly getting going with stylesheet tweaks, copy the files assets/scss/_custom.scss and assets/scss/_variables.scss from the theme root to your site root. Editing just these files, you have most of your site ready to go. For 99% of uses I suspect that's all one will need to do.

A file in your own assets/scss directory called _theme_default_nav.scss or _theme_default_footer.scss can override those default styles from the theme. Even if you don't want to change these, they are worth looking at for examples of extending scss files if you aren't already familiar. You might also want to copy layouts/ files to your own site root for customizing, for instance the nav.html partial to change how the top of the site looks.

For more advanced customization, for instance excluding parts of Bootstrap that you aren't using in your site, copy assets/scss/style.scss to your site root in the same way and comment out the @import lines you aren't interested in. The same example as seen in that file of using bootstrap_ext/_{category}.scss extensions can be used to organize themes with more complex parts.

You can remove JS dependencies by configuration by setting the following site parameters in your config.[yaml/toml] file:

• includeBootstrapJs
• includeFeatherJs
• includeNavIcons

Homepage content

By default the homepage uses the homeText param for content. If you wish to provide content from a file, then create content/_index.md and it will be used instead. For example:

---
title: Home
---

Homepage content goes here.

Shortcodes

blockquote

Uses Bootstrap blockquotes to format your blockquotes nicely. Pass the quote inside the shortcode. The author argument is optional.

Here's an actual usage, and here's an example usage:

{{< blockquote author="Carl Jung" >}}
Knowing your own darkness is the best method for dealing with the darknesses of other people.
{{< /blockquote >}}

bootstrap-table

Uses Bootstrap tables to format your tables nicely. Pass the markdown table inside the shortcode, then pass the classes as an argument.

Here's an actual usage, and here's an example usage:

{{< bootstrap-table "table table-dark table-striped table-bordered" >}}
| Animal  | Sounds |
|---------|--------|
| Cat     | Meow   |
| Dog     | Woof   |
| Cricket | Chirp  |
{{< /bootstrap-table >}}

bootstrap-card

Uses Bootstrap cards and Hugo image processing to display your page bundle images nicely. Only the img, command, and options arguments are required.

Here's an actual usage, and here's an example usage:

{{< bootstrap-card
img="sun.jpg"
command="Resize"
options="700x"
title="The Sun"
text="The Sun is the star at the center of the Solar System."
alt="sun"
class="mb-3"
style="" >}}

Getting help

If you run into an issue that isn't answered by this documentation, then visit the Hugo forum. The folks there are helpful and friendly. Before asking your question, be sure to read the requesting help guidelines.

Credits

In addition to Bootstrap and Hugo, thank you to:

• Feather for icons
• zwbetz-gh for creating the initial theme
• neexee for enhancements from his fork of the same initial theme