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 ( 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 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
├── ...
├── 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]
├── [ 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]
│ ├── [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(",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.

clone-Microverse - Online Coding School

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

\ _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]
├── [ 224] assets
│ ├── [ 128] bootstrap
│ │ └── [1.4K] scss
│ ├── [ 128] css
│ │ ├── [437K] custom.css
│ │ └── [451K]
│ └── [ 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.

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.

read original article here