Hugo - Bootstrap - Components

   
   
 hugo  bootstrap  css  
 ssg  frontend  
Table of Content

Preface

This article is intended for beginner.

Goal: Use Bootstrap Features in Hugo Layout

All these examples below based on official bootstrap examples:

Based on:

Server Output: Browser

This section is long, before you get lost, this is what we want to achieve.

A homepage, with fixed top taskbar.

Hugo Bootstrap: Homepage with Navigation Bar

Assets: Stylesheet

Add necessary stylesheet. You should find the stylesheet on official site. This guidance is using Bootstrap v4.1.

    <link rel="stylesheet" type="text/css" href="{{ "css/sticky-footer-navbar.css" | relURL }}">
    <link rel="stylesheet" type="text/css" href="{{ "css/bootstrap-custom.css" | relURL }}">

Assets: Javascript

Bootstrap menu require JQuery. You can also find in Bootstrap official repository.

    <script src="{{ "js/jquery-slim.min.js" | relURL }}"></script>
    <script src="{{ "dist/js/bootstrap.min.js" | relURL }}"></script>

You are free to use your custom logo. I actually made some logo, and here we can use it as an example for this guidance.

Hugo Bootstrap: Custom Logo

  • Size [width x height]: 96px * 96px

Assets: Custom Stylesheet

.layout-base {
  padding-top: 70px;
}

.navbar-brand img {
  width: 48px;
  height: 48px;
  margin-top:    -10px;
  margin-bottom: -10px;
}

Partial: HTML Head

<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="{{ .Site.BaseURL }}">
       <img src="{{ "images/logo-gear.png" | absURL }}"
           alt="Logo" />
    </a>
    <button class="navbar-toggler" type="button" 
        data-toggle="collapse" data-target="#navbarCollapse" 
        aria-controls="navbarCollapse" aria-expanded="false" 
        aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="{{ .Site.BaseURL }}"
             >Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Archives</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" 
          placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-light my-2 my-sm-0" 
          type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>
<footer class="bg-dark text-light">
  <div class="container text-center">
    <span class="text-muted">&copy; {{ now.Year }}.</span>
  </div>
</footer>

Server Output: Browser

Open in your favorite browser. You should see, a section list, with fixed top taskbar.

Hugo Bootstrap: Index List with Navigation Bar

2: Posts

Consider remake our simple single.html, adding a more useful information, semantic, and bootstrap’s classes.

Post: Single

{{ define "main" }}
  <main role="main" class="container-fluid bg-light">
    <div class="blog-main">
      <div class="blog-post">
        <section>
          <h2 class="blog-post-title"
              >{{ .Title | default .Site.Title }}</h2>
          <p  class="blog-post-meta"
              >{{ .Page.Date.Format "January 02, 2006" }} by <a href="#">epsi</a></p>
        </section>

        <article>
          {{ .Content }}
        </article>
      </div><!-- /.blog-post -->
    </div><!-- /.blog-main -->
  </main>
{{ end }}

Most tags are in official bootstrap documentation.

Assets: Stylesheet

We can also apply, custom bootstrap stylesheet, taken from examples:

    <link rel="stylesheet" type="text/css" href="{{ "css/sticky-footer-navbar.css" | relURL }}">
    <link rel="stylesheet" type="text/css" href="{{ "css/blog.css" | relURL }}">
    <link rel="stylesheet" type="text/css" href="{{ "css/bootstrap-custom.css" | relURL }}">

Server Output: Browser

Open in your favorite browser. You should see, an ordinary post.

Hugo Bootstrap: Post without Layout

Post: Single, Again

Why not go further with bootstrap grid ?

{{ define "main" }}
  <main role="main" class="col-md-8">
    <div class="blog-main p-3 mb-3 bg-light rounded">
      <div class="blog-post">
        <section>
          <h2 class="blog-post-title"
              >{{ .Title | default .Site.Title }}</h2>
          <p  class="blog-post-meta"
              >{{ .Page.Date.Format "January 02, 2006" }} by <a href="#">epsi</a></p>
        </section>

        <article>
          {{ .Content }}
        </article>
      </div><!-- /.blog-post -->
    </div><!-- /.blog-main -->
  </main>
{{ end }}

{{ define "aside" }}
  <aside class="col-md-4 blog-sidebar">
    <div class="p-3 mb-3 bg-light rounded">
      <h4 class="font-italic">About You</h4>
      Are you an angel ?
    </div>
  </aside>
{{ end }}

Server Output: Browser

Open in your favorite browser. You should see, a post, with sidebar.

Hugo Bootstrap: Post with sidebar Layout

Note that, this is already using responsive grid. It has different looks on different screen. You should try to resize your browser, to get the idea.

3: Landing Page

This guidance is not the place to dump all my blog template. So this is the last example on this article.

Layout: Homepage

We need more aesthetic accent for our landing page.

{{ define "main" }}
  <main role="main" class="container-fluid">
      <div class="jumbotron">
        <div class="container bg-light text-dark">
    <section>
      <h2 class="cover-heading">{{ .Title | default .Site.Title }}</h2>
    </section>

    <article>
      {{ .Content }}
    </article>
        </div>
      </div>
  </main>
{{ end }}

Content: Homepage

Just add lead class, as cosmetic.

  <p class="lead">There are so many things to say.
  I don't want to live in regrets.
  So I wrote this for my love.</p>

Assets: Custom Stylesheet

.cover-heading,
.blog-post-title {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
}

Server Output: Browser

Open in your favorite browser. You should see, homepage, with jumbotron, and nice font.

Hugo Bootstrap: Nice Landing Page

What is Next ?

Before we continue, consider have a break, and look at this cute kitten. Relax for a while, make another cup of coffe, and resume our tutorial.

adorable kitten

There are, some interesting topic about Using SASS in Bootstrap in Hugo. Consider continue reading [ Hugo Bootstrap - SASS ].

Thank you for reading.