Preface
This article is intended for beginner.
Goal: Use Bootstrap Features in Hugo Layout
All these examples below based on official bootstrap examples:
1: Navigation, Header, and Footer
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.
Assets: Stylesheet
Add necessary stylesheet. You should find the stylesheet on official site. This guidance is using Bootstrap v4.1.
-
- themes/tutor-02/layouts/partials/site-head.html
- gitlab.com/…/layouts/partials/head.html
<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.
-
- themes/tutor-02/layouts/partials/site-scripts.html
- gitlab.com/…/layouts/partials/scripts.html
<script src="{{ "js/jquery-slim.min.js" | relURL }}"></script>
<script src="{{ "dist/js/bootstrap.min.js" | relURL }}"></script>
Assets: Logo
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.
-
- themes/tutor-02/static/images/logo-gear.png
- gitlab.com/…/static/images/logo-gear.png
- Size [width x height]: 96px * 96px
Assets: Custom Stylesheet
-
- themes/tutor-02/static/css/bootstrap-custom.css
- gitlab.com/…/static/css/bootstrap-custom.css
.layout-base {
padding-top: 70px;
}
.navbar-brand img {
width: 48px;
height: 48px;
margin-top: -10px;
margin-bottom: -10px;
}
Partial: HTML Head
-
- themes/tutor-02/layouts/partials/site-header.html
- gitlab.com/…/layouts/partials/header.html
<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>
Partial: Footer
-
- themes/tutor-02/layouts/partials/site-footer.html
- gitlab.com/…/layouts/partials/footer.html
<footer class="bg-dark text-light">
<div class="container text-center">
<span class="text-muted">© {{ now.Year }}.</span>
</div>
</footer>
Server Output: Browser
Open in your favorite browser. You should see, a section list, with fixed top taskbar.
2: Posts
Consider remake our simple single.html, adding a more useful information, semantic, and bootstrap’s classes.
Post: Single
-
- themes/tutor-02/layouts/post/single.html
- gitlab.com/…/layouts/post/single.html
{{ 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:
-
- themes/tutor-02/layouts/partials/site-head.html
- gitlab.com/…/layouts/partials/head.html
<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.
Post: Single, Again
Why not go further with bootstrap grid ?
-
- themes/tutor-02/layouts/post/single.html
- gitlab.com/…/layouts/post/single.html
{{ 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.
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.
-
- themes/tutor-02/layouts/index.html
- gitlab.com/…/layouts/index.html
{{ 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.
-
- themes/tutor-02/content/_index.html
- gitlab.com/…/content/_index.html
<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
-
- themes/tutor-02/static/css/bootstrap-custom.css
- gitlab.com/…/static/css/bootstrap-custom.css
.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.
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.
There are, some interesting topic about Using SASS in Bootstrap in Hugo. Consider continue reading [ Hugo Bootstrap - SASS ].
Thank you for reading.