Where to Discuss?

Local Group


This article series is intended for beginner.

Goal: Make your own theme using Bootstrap5

With this guidance, you can make your own theme, for use with blogging, or simple company profile. You can also enhanced later to create, your own portfolio based on this knowledge.

To face real life, web building situation, there will be other guidance, based on this Bootstrap example.


Always refer to official documentation first, before you start this real world example.


Which Bootstrap?

I’m using Boostrap v5. By the time this article written,

The obsolete Bootstrap v4 article series is also available.

HTML Tools

My intention is simplicity

I’m using pure HTML instead of static site generator, so that any beginner can follow this Bootstrap show case.

You can just open the file in the browser, and this will works.



Since there is a repetitive reusable part, such as navbar, footer, and so on. For development, I use templating engine.

Explaining HTML as building block , is also easier with templating engine.

My choice is Nunjucks. And the automation can be done with Gulpjs.

CSS Tools

I’m using Sass to generate CSS, with .scss format instead of .sass. Because Bootstrap use .scss format.

Of course you can use any .sass format if you want, for your web design.

Learning Stylesheet

The Scope of CSS Tools

As stated in previous Bootstrap V4 article series. Learning CSS Frameworks is a part of this bigger picture below:

The Scope of CSS Tools

About Bootstrap

Bootstrap is an opensource CSS Framework. There are other alternative as well, such as Materialize or Bulma.

Why Bootstrap?

Although Bootstrap is not the most popular CSS framework anymore, Bootstrap is still en entry point for beginner.

Frankly speaking. I like Bulma, and I desire to learn Tailwind.

This theme is a direct port from my Bulma MD theme.


Beside palin framework, I also include additional options.

  • Icons: FontAwesome, Bootstrap Icon

  • Pallete: Google Material Color, Open Color, BS5

You can see example of FeatherIcons in my previous Bootstrap v4 tutorial.

Part of Bootstrap

Just read again the offical documentation. There is more complete than here.

Example Showcase


I add some aestethic appeal, with more custom stylesheet.

Bootstrap: Preview

Source Code

Source code used in this tutorial, is available at:

This is also intended as a Demo.


Opening Example in Browser

You can open the html file artefact directly from your file manager, or alternatively setup simple web server example such as browsersync, and enjoy the localhost:3000.


This is would not be the best blog template that you ever have. Because I only put most common stuff, to keep the tutorial simple.

After you learn this guidance, you understand the fundamental skill. Thus, a base for you, to make your own blog site. With your imagination, you may continue, to build your own super duper Bootstrap site. Far better than, what I have achieved.

Table of Content

The table content is available as header on each tutorial. There, I present a Bootstrap Tutorial, step by step, for beginners.

Begin The Guidance

Step 00


  • Without Bootstrap

  • Nunjucks Example


Step 01

Adding Bootstrap CSS

  • Using CDN

  • Using Local


Step 02

Using Bootstrap CSS: Navigation Bar

  • From Simple to Full Featured


Step 03

Icon Choices

  • Icons: FontAwesome, Boostrap Icon.

  • Navbar and Sidebar


Step 04

Custom SASS

  • Custom maximum width class

  • Simple responsive layout using Bootstrap


Step 05

Color Choices

  • Color using tailor made sass

  • Open Color, Bootstrap5 Color, Google Material Color

  • Double column demo, responsive gap using custom sass

  • Single column demo, simple landing page

  • Dark Mode


Step 06

HTML Box using Google Material Color

  • Main Blog and Aside Widget


Step 07

Blog Post Example

  • Post Header

  • Post Navigation

  • Landing Page

  • Javascript Toggler


Step 08

Custom Javascript

  • Hover and and Animation

  • Numerator

  • Progress Bar


Step 09


  • Login Form

  • User Form


This form section deserve more coverage, more examples.

Step 10


Gather all together.

  • Datatables

  • ChartJS

  • Dashboard


What is Next 🤔?

Thank you for cloning the Bootstrap5 repository. Have fun, and enjoy coding.

Consider continue reading [ Bootstrap 5 - Nunjucks Template ].