Can Bootstrap 4 Clone Entire Websites?

I am a junior web developer recently learned Bootstrap 4 and try to explore the possibility of the framework in a real world frontend project.

Before Start …

To tell the possibility, I decided to do a real-world project with Bootstrap 4 to get the experiences.

I choose to clone the website of an Online Coding School (Microverse.org) I am attending to for this project, because:

• It is a Single Page Application which is common for today’s job market.
• It has about 7 ~ 8 sections to introduce its features and services which make it complicated enough compared to other real-world projects.
• It uses #Bootstrap4 and custom CSS for its fronted decoration, which is exactly what I am looking for.
• I didn’t build the website from scratch, but I tried not to get any help from the school or any other people to ensure that is how I will work in the real world project.

I finished this project in about a month, but I was doing a few other projects and studying during the period, so the total hours I spent on this project are about 30 ~ 40 hours.

The final project is not completely identical to the original one (and I am not intend to), you can see it from this link.

Below are how I have accomplished this project and what conclusion I came out of it.

Let’s start => First Part — Project Setup

At first, I go to GetBootstrap.com to download the latest version of Bootstrap Source Files. (It is V.4.2.1), unzip it, and I saw the following files inside the folder. (There are many sub-folders and files I have omitted).

bootstrap-4.2.1 tree -L 2
    .
    ├── CNAME
    ├── CODE_OF_CONDUCT.md
    ├── ...
    ├── build
    │   ├── banner.js
    │   ├── ...
    │   └── vnu-jar.js
    ├── composer.json
    ├── dist
    │   ├── css
    │   └── js
    ├── js
    │   ├── dist
    │   ├── src
    │   └── tests
    ├── nuget
    ├── package-lock.json
    ├── package.js
    ├── package.json
    ├── scss
    │   ├── _alert.scss
    │   ├── _badge.scss
    │   ├── _breadcrumb.scss
    │   ├── _button-group.scss
    │   ├──  ...
    └── site
        ├── _data
        ├──  ...
        └── sw.js

    17 directories, 67 files

For my purpose, I only focus on one major folder — ./scss, because I will compile my own version of CSS through Sass. I copied the entire ./scss folder to my project folder, below are my project folder structure.

➜  clone-microverse git:(development) tree
.
├── [1.0K]  LICENSE
├── [ 736]  README.md
├── [ 224]  assets
│   ├── [ 128]  bootstrap
│   │   └── [1.4K]  scss
│   │       ├── [1.1K]  _alert.scss
│   │       ├── [1.0K]  _badge.scss
│   │       ├── [1.2K]   ...
│   │       ├── [ 920]  bootstrap.scss
│   │       ├── [1.0K]  mixins
│   │       └── [ 576]  utilities
│   ├── [ 128]  css
│   │   ├── [438K]  custom.css
│   │   └── [452K]  custom.map
│   ├── [2.0K]  images
│   │   ├── [9.8K]  1-r-kn-gdqsl-5-lie-3-l-r-7-j-n-0-a-zq-2-x.png
│   │   ├── [9.5K]  2000-px-stack-overflow-logo-svg.png
│   │   ├── ...
│   └── [ 128]  scss
│       ├── [ 27K]  _style.scss
│       └── [1.2K]  custom.scss
└── [ 48K]  index.html
7 directories, 47 files

There are 2 /scss folders in this project, one is ./asset/bootstrap/scss (from Bootstrap source files) and another one is ./asset/scss (for me to write customized code inside), and the output folder is ./asset/css (Where my HTML will refer link to).

For Sass compiler, I use Scout-App to help, it is a Sass GUI so it is very straightforward and easy to set up.

Once I finish the project setup, I start my coding in HTML & Sass files.

Second Part => Coding … (the hardest part)

Base on Bootstrap Official Documentation, I created a custom.scss file to add my customized elements and bootstrap base file together.

// Custom.scss
// Option A: Include all of Bootstrap

/* -------begin customization-------- */

$theme-colors: (primary: #6f23ff,
secondary: #ffd540);

:root {
  --dusk: #3e396b;
  --very-light-blue: #f8faff;
  --purplish-blue: rgb(111, 35, 255);
  --tealish: rgb(65, 211, 189);
  --light-tan: #f9f1ae;

  --padding-sm: calc((100vw - 540px) / 2);
  --padding-md: calc((100vw - 720px) / 2);
  --padding-lg: calc((100vw - 960px) / 2);
  --padding-xl: calc((100vw - 1140px) / 2);

  --oPadding: calc(0.16 * 100vw);
  --oHeight: calc(0.16 * (100vw - var(--padding-xl)));
  --oHalfHeight: calc(0.16 * (50vw -var(--padding-xl)));
}

/* -------end customization-------- */

/* import Bootstrap to set the changes! */

@import "../bootstrap/scss/bootstrap.scss";

/* ----------- custom font import  ------------ */

@import url("https://fonts.googleapis.com/css?family=Domine:400,700|Maven+Pro:400,500,700,900|Montserrat:400,500,600,700,900&display=swap");

/* ------------ Self-styling -------------- */

@import "./style";

I used “Option A” — to include all the bootstrap components in this project, put all self-styling customization into a separated file ./style.scss, Sass will compile all sass files into one big giant CSS output to ./asset/css/custom.css, which I refer it back in my index.html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./assets/css/custom.css" type="text/css" />
    <title>clone-Microverse - Online Coding School</title>
  </head>

So far all the steps above are very clear and easy to follow ( I finish them in about an hour), but what coming in next is out of my calculation.

I spent the first few hours trying to re-create the navigation bar and landing page by myself. The more I tried, the more I found it is hard and complex. I tried to utilize more bootstrap 4 classes and less customize CSS, but it seemed impossible.

The original website looks pretty slick and stylish, isn’t it? Yes, but the price is very specified and complex frontend code.

I finally gave it up and try to look at the original website’s code to see how they actually come together, the result is shocking — there are more stacks or layers to make up one component than I originally thought, there are more custom CSS than use Bootstrap 4 class directly, they intend to use more #id rather than class for specificity of CSS style. Below are a peek on the code -

# Index.html
<div id="homepage" class="row bg-primary">
        <div class="content">
          <div id="homepage-navbar-container" class="container-fluid p-0">
            <nav id="homepage-navbar" class="navbar navbar-expand-lg w-100">
              <div class="container">
                <a href="#" class="navbar-band logo">microverse</a>
                 ....
                <div id="navbarToggler"
                  class="collapse navbar-collapse w-100 align-items-baseline">
                  <ul class="nav navbar-nav w-100 justify-content-end">
                    <li class="nav-item pr-3">
                      <a
                        class="nav-link font-weight-bold text-white text-capitalize"
                        href="#"
                        >curriculum</a
                      >
                    </li>

\\ _style.scss
#homepage-header {
    margin-top: 163px;
    position: relative;
    z-index: 105;

    .head-line {
      font-family: "Domine", serif;
      font-size: 3rem;
      font-weight: bold;
      line-height: 1.27;
    }

    .head-text {
      font-size: 1.25rem;
      line-height: 1.65;
      margin-top: 15px;
      margin-right: 30px;
      color: #fff;
    }

Because of these complexities, I spent almost one month to finish all the coding, there are some on and off time and I just do this project on my spare time, but it still overly difficult than most of the frontend project I have done before. The final finished index.html file has 1204 lines, _style.scss file has 1512 lines,

├── [1.0K]  LICENSE
├── [ 736]  README.md
├── [ 224]  assets
│   ├── [ 128]  bootstrap
│   │   └── [1.4K]  scss
│   ├── [ 128]  css
│   │   ├── [437K]  custom.css
│   │   └── [451K]  custom.map
│   └── [ 128]  scss
│       ├── [ 27K]  _style.scss
│       └── [1.1K]  custom.scss
└── [ 48K]  index.html

Finally, You can check out all the code in here. I have clone about 95% of the code from the original website, but it still took me many hours to accomplish it. I can’t image how much hours I have to spend if I need to do this project from scratch.

Lesson Learn & Conclusion …

At first, after finishing this project, I think I can answer the question I raise at the beginning now — How much Bootstrap 4 Can help for a real-world project?

• A short answer is — “Not much”
• A longer answer is — “It help on its grid system and some spacing utilities, but the project still needs a lot of customizing CSS to help make the website look unique and outstanding.”
• An even longer answer is — “Bootstrap framework help provide a solid foundation for the project, it contributed about 20 ~ 30 % of the code base, but a real-world project needs more unique design and differentiation, imaginations and creativities are needed as a Frontend Developer!”

Second, below are some lesson learned I got from this project -

• A Real-world FrontEnd Project is usually complex and challenging. (It will be much more complex than the projects in Odin project or any other online learning platforms).
• A Frontend framework such as Bootstrap 4 might help, but diligentness and creativities are still the main contributors.
• Frontend development mainly involves repetitive coding and being requested to update frequently, make sure I like this kind of working style before I jump in.
• There are still much more to learn about SASS, CSS & HTML.

Finally, due to the limitation of my knowledge and resources, I might do this project in a completely wrong way or an immature way, hence I got a completely wrong answer from it. But so what? I did it and write about it anyway, I definitely learn a lot from it.

There are free resource can help customize Bootstrap 4 theme too, but they seem no fit for this project, so I might try them in the next project.

• themestr.app
• Top-Hat

I will do it again if there is a question I can’t get the answer from google or any other sources, I think that is how a self-taught programmer learn to evolve in today’s environment.

PS: I am open to your critiques and suggestion for this project, thanks again for reading this whole story.