Where to Discuss?

Local Group

Preface

This article series is intended for beginner.

Goal: Make your own theme using Bootstrap

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, blog building situation, there will other guidance, based on this Bootstrap example.

Reading

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

Version

Which Bootstrap?

I’m using Boostrap v4. By the time this article written, Bootstrap v5 is still in alpha stage.

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.

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

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?

Frankly speaking. I like Bulma, and I desire to learn Tailwind. But I most beginner start from bootstrap, and a lot of question comes up. So I took a step back. Rewrite my Bulma theme using Bootstrap.

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

Rewrite

My Bulma MD theme has these two additional stuff.

  • Icons: FontAwesome

  • Pallete: Google Material Color

Since the name Bootstrap MD has already taken, I use other pallete, so now we have Bootstrap OC name And also change the icons, just because I want to try something else. Now we have these two:

  • Icons: FeatherIcons

  • Pallete: Open Color

Part of Bootstrap

Just read again the offical documentation.


Example Showcase

Screenshot

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.

Tools

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.

Disclaimer

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

Open Color start from step 04. Step 01 until step 03 contain Bootstrap preparation.

Step 01

Adding Bootstrap CSS

  • Without Bootstrap

  • Using CDN

  • Using Local

screenshot

Step 02

Using Bootstrap CSS: Navigation Bar

  • From Simple to Full Featured

  • Javascript: With jQuery, With Vue JS, Plain Javascript.

  • Icons: FontAwesome, Boostrap Icon, Feathers Icon.

screenshot

Step 03

Custom SASS

  • Custom maximum width class

  • Simple responsive layout using Bootstrap

screenshot

Step 04

Open Color

  • Open Color Demo, using tailor made sass

  • Double column demo, responsive gap using custom sass

  • Single column demo, simple landing page

screenshot

Step 05

HTML Box using Open Color

  • Main Blog and Aside Widget

screenshot

Step 06

Finishing

  • Blog Post Example

screenshot


What’s Next

Thank you for cloning the Bootstrap Open Color repository. Have fun, and enjoy coding.

Consider continue reading [ Bootstrap - Minimal ].