Introduction

This project is built with Hugo and uses the Minimal Hugo theme.

This post is part of an ongoing effort to tailor the theme over time.

Objective

In this post we’ll override the CSS styling for certain HTML elements.

Since this project utilizes a Hugo theme that in turn utilizes Bootstrap, much of the styling for this site comes from Bootstrap. Consequently, to make changes to the CSS styling of this site, we’ll need to override some of the styles currently defined by Bootstrap.

Solution approach

General guidelines

There are various online articles and answers that address the question of overriding Bootstrap CSS styles and many of them are useful.

To quote from one succinct and helpful StackOverflow answer:

There are 3 rules to follow when overriding Bootstrap CSS..

1. import/include bootstrap.css before your CSS rules (overrides)
2. use more CSS Specificity (or equal) than the Bootstrap CSS selectors
3. if any rule is overridden, use !important attribute to force your rules. If you follow rules 1 & 2 this shouldn’t be necessary except for when using Bootstrap utility classes which often contain !important as explained here

Yes, overrides should be put in a separate styles.css (or custom.css) file so that the bootstrap.css remains unmodified. This makes it easier to upgrade the Bootstrap version without impacting the overrides. The reference to the styles.css follows after the bootstrap.css for the overrides to work.

A note specific to testing with the Hugo server

This project encountered one additional wrinkle that initially caused some confusion.

Even after following the above guidance, page elements did not seem to change when testing updates to custom.css via the Hugo server.

It was only after manually reloading the page and sometimes stopping and restarting the Hugo server that changes were reflected.

This is atypical behavior when working with Hugo. Most changes are reflected immediately and without the need for any manual intervention.

It’s not clear under what circumstances the changes weren’t reflected or why. It well might have been something setup incorrectly on this project.

Nevertheless, it’s something that others may want to consider if they are struggling to test updates to Bootstrap CSS styling via the Hugo server.

Building the solution

Changing the order of CSS imports

As the quoted answer indicates, the first step is to confirm that your custom.css file is imported after bootstrap.css.

For this project, that required changing the import order in the css.html file located in the /layouts/partials/ directory.

Updating the CSS style of posts

Next, to effect the desired changes to post styling, updates were made to the custom.css file in the /static/css/ directory.

Specifically, the following was added:

/*  Overriding Bootstrap Formatting  */

h1, .h1 {
    margin-top: 100px;
}

h2, .h2 {
    margin-top: 80px;
}

h3, .h3 {
    margin-top: 40px;
}

h4, .h4 {
    margin-top: 40px;
}

blockquote {
    font-size: 15px;
    font-style: italic;
}

Maintaining the CSS style of list pages

The above changes also impacted the layout of list pages and created an undesirable spacing. Specifically, the new styling of the <h4> tag created too much space between list elements.

To fix this an id was added to the <h4> tag for list items in the list-item.html partial layout file located in the /layouts/partials/ directory:

<h4 id="listpage-item"><a href="{{ .Scratch.Get "link" }}">{{ .Title }}</a></h4>

Then this id was used to target list items with an additional styling rule in the custom.css file to restore the original spacing:

h4#listpage-item {
    margin-top: 10px;
}

Conclusion

Both post pages and list pages have the desired styling.