How to perfectly clone a website using Bootstrap 4.
Tags: bootstrap4, flexbox, webdev
Published: 2019-10-10 15:30:16

---
title: How to perfectly clone a website using Bootstrap 4.
published: true
description: working with Bootstrap 4
tags: Bootstrap 4, flex-box, web-development
---




Setting up a layout for your responsive website should not take too much time. After planning the layout of the website, most developers tend to get stuck in the implementation stage. 

This stage is critical as this is where you need to consider the behaviour of the website on various devices and if one can get this part right, 90% of your work is complete.



**Where it all started**


Recently, my knowledge of the Bootstrap framework was put to test.  I was required to make an exact copy of the [Newsweek](https://www.newsweek.com/) website using Bootstrap. Now If you must know, the Newsweek website is a CMS built with Drupal.

Cloning a framework based website like [Newsweek](https://www.newsweek.com/) using vanilla HTML and CSS can be a pretty daunting task for beginners. However, It does not need to be daunting anymore as I am about to walk you through on how I cloned the [newsweek](https://www.newsweek.com/) website.  

This [project](https://tundeiness.github.io/Newsweek-clone/), took me between 4-6 days to complete and I had to do a 2-day refresher on bootstrap 4 (last time I used bootstrap was 3 years ago). Yep, I was that rusty 😓️. 

There are lots of frameworks available for use out there, and setting up a quick layout is dependent on your knowledge of your chosen framework. If you are using bootstrap 4 framework like I am, you can quickly set up a layout in record time using both the bootstrap 4 framework and the flex-box included in this framework. 



**The new Bootstrap 4**


The Bootstrap framework enables website designers and front-end developers to easily create a highly-responsive and good-looking modern website.

Recently, Bootstrap 4 has brought about so many changes from its previous versions. There are new grid classes, default flex-box, Sass instead of Less, cards replacing wells, panels, and thumbnails, and new utility classes, etc. 

The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flex classes to control the layout of its components. It's now easier to design flexible responsive layout structure without using float or positioning.


**Let's get started**


In this writeup, I will be attempting to guide you on how to set up your layout to get started with for your frontend project, in the same way, that it was applied it in this demo [project](https://tundeiness.github.io/Newsweek-clone/).

My focus will also be on explaining (using a few sub-sections) how I used Bootstrap 4 classes in the development of the main section. 

The reason for the aforementioned is that similar Bootstrap 4 classes are in use in other sections.



**Initial Setup**


The setup for this project can be found in this [repository](https://tundeiness.github.io/Newsweek-clone/). To get started, there is a 
 starter template that can be copied and used in your HTML file.  It can be found [here](https://getbootstrap.com/docs/4.3/getting-started/introduction/).


In the head tag, I included various links to resources that will be required in this project. These links correspond to resources from font-awesome(free icon website), Bootstrap CDN, and google fonts as well. Links to local resources were also provided. These links to additional CSS files to be used in the project for re-styling and resetting. 
A reset file - reset.css - was also included to remove default styling for the HTML elements. See code snippet below:



```html
<head>
 ...
  <link rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
  integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
  crossorigin="anonymous">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css family=Roboto+Condensed:400,700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
  <title>Newsweek clone</title>
</head>
```


In the `<body></body>` I had 3 main parts: 

* the `<header></header>`, 

* `<main></main>` and,

* `<footer></footer>` section. 



```html
<body>
   <header class="heading ">..
   </header>
   
   <main class="container-fluid" ">..
   </main> 

   <footer class="footer-content">..
   </footer>
</body>
```


**The Layout**


On extra small devices, the section that gets displayed first, when viewing the Newsweek website is the "Top Story" and it stacks on the next section called "Featured stories", "Opinions", and the last section in the stack is "Newsletter".

On medium devices, however, the websites display a 2 column behaviour with the "Featured stories" as the first section to be displayed in normal flow appearance followed by "Top-story".

Scrolling down also shows different sections exhibiting visual behaviours different from what was observed on extra small devices. This visual behaviour continues to changes as the device screen gets wider and different sections are ordered based on the preference on the developer/client. The observed visual behaviours are also considered in the development of the main section.



**The container class**


I decided that the main section `<div>` should have a bootstrap class `.container-fluid`(As far as I'm concerned, using a `.container` class here will not match the exact Newsweek website layout). In Bootstrap 4, Containers provide a means to centre and horizontally pad your site’s contents. 

The difference between `.container` and `.container-fluid` class are that the latter provides for width: 100% across all viewport and device sizes, whereas the former has a max-width pixel value. 

Also, `.container-fluid` continuously resizes as one adjusts the width of the browser by any amount, while `.container` class resizes in chunks at determined widths, controlled by media queries. You can read more about the classes `.container-fluid` and `.container` [here] (https://getbootstrap.com/docs/4.3/layout/overview/#containers)

Nested within the `<main>` tag are 2 `<div>`s. the first one was declared with a `.row` class and the second one with a `.col-md-12` class.



```html

<!-- MAIN SECTION -->
<main class="container-fluid">

  <div class="content row">
    <div class="left-content col-12 col-sm-12 col-md-12 col-lg-8 px-lg-3 order-sm-0">
   <!-- FEATURED STORIES -->
     <div class="row">
       <div class="featured-story col-12 col-sm-12 col-md-5 col-lg-5 mt-sm-4 mt-md-4 mb-sm-3 order-0 ">
       </div>
     </div>
   </div>


   <!-- OPINIONS -->
   <div class="right-content col-12 col-md-12 col-lg-4 order-sm-2">
   </div>

  </div>


  <div class="other-concerns col-md-12">..</div>

</main> 

```



**The row class**

Rows are containers for columns and to implement it the Bootstrap way, column classes needs to be declared in divs with row classes. Bootstrap 4 documentation specifies that "In a grid layout, the content must be placed within columns and only columns may be immediate children of rows".
 

Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side. 


The div with `.content` & `.row` classes also have 2 `<div>`'s corresponding to the opinions sub-section of the magazine and the featured stories section. 

On large devices, "featured stories" section occupies 8 spaces `.col-lg-8` while from medium to extra small devices they occupy 12. While on mobile devices, the featured stories will be the first section seen on the stack. 

This is made possible by using the class `.order-sm-0`. However, the "opinions" section has a class `.order-sm-2` which means it is the last section to be seen in class `.content`. 

Also nested within the div with `.content` & `.row` class are 2 divs with class `.left-content` and `.right-content` both designated to hold "featured stories" and "opinion" contents.

The "featured stories" section is a div with `.row` class and wraps the featured stories and top story sections. 


```html
...
<div class="row">

   <div class="featured-story col-12 col-sm-12 col-md-5 col-lg-5 mt-sm-4 mt-md-4 mb-sm-3 order-0 ">..
   </div>

   <!-- TOP STORY -->
   <div class="middle-content col-12 col-sm-12 col-md-7 col-lg-7 px-sm-0 px-lg-3 order-1">..
   </div>

</div>
...

```

The divs with class `.featured-story` and `.middle-content` both have `.order-0` and `order-1` as well. The order class is a new addition to bootstrap 4 and it's derived from the new flexbox power with which bootstrap 4 was developed from. 


By including this class to the divs, the containers can have the same visual behaviour which cuts across different devices. This means the div with class `.featured-story` will get displayed ahead of the div with class `.middle-content` from a normal flow appearance perspective. 


The contents of `.featured-story` class has classes like `.card` to give them the card like appearance:


```html
...
  <div class="card rounded-0 border-0  pb-sm-2" >
  </div>
...

```
Read more about `.card` class [here](https://getbootstrap.com/docs/4.3/components/card/)



**Col class**

The Column classes indicate the number of columns I'd like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4. In the codes above I have used variants of `.col-` class and is based on the number of columns I want per row across different devices. For example `.col-sm-12` class specified on a div means I want 12 columns on small devices, while `col-md-5` means the columns should be 5 on medium-sized devices. Read more [here](https://getbootstrap.com/docs/4.3/layout/grid/#how-it-works)



**Order class**

In the `.left-content` class  apart from the usual bootstrap `.col-` classes, there is also the `.order-` class. The same class was applied to the div with the `.right-content` class. 


By applying the class `.order-sm-0` and `.order-sm-2` on the div containers, I have inadvertently described them as flex items in a flex container without explicitly stating a parent flex container. 

As a result of this, I can now change the visual order of specific flex items and also use available options for making an item first or last, as well as a reset to use the DOM order.

Now `.left-content` class will stack first ahead of class `.right-content` also with a class `.order-sm-2 ` on small devices and extra small devices.

Both the `.left-content` and `.right-content` class are containers (wrapped in `.row` class in the main section) for other small sections as at the time of implementing this project. 


Also wrapped in class `.row` in `.left-content` are the following classes and the additional flex class included to order the class structure which stacks first on various devices are: 

* `.featured-story` with flex class `.order-0`, and 

* `.middle-content` with flex class `.order-1`. 

This means that the div with class `.order-0` will also stack first on small devices or come first from left ahead of div with class `.order-1`. 



**Flex class**

After the div with class`.featured-story` is the `.middle-content` class. This div is the container for the divs' with classes`.top-story` and `more-story`.


```html

 <div class="top-story d-flex flex-column mt-sm-4 mb-sm-3 py-0 px-sm-3">.. 
 </div>

 <div class="more-story d-flex flex-column px-sm-4">..</div>

```

Translated to CSS flex-box format, the above code block can be written as:


```css
.top-story {  
              display: flex;  
              flex-direction: column; 
              margin-top: 4px;
              margin-bottom: 4px;
              padding:3 4 3 4;
           }

.more-story {  display: flex;  flex-direction: column }

```


Applying the bootstrap 4 flex-box display utility (`.d-flex`) will create a flexbox container and, also transform direct children elements into flex items (just like CSS flexbox). 


Furthermore, the Flex containers and items can be modified further with the addition of flex properties like `.flex-column`, `.justify-content-between` etc.



**Conclusion**


Looking at the structure of the remaining sub-sections in the main section, the Bootstrap 4 classes used in their development is similar to the classes in use in previous sub-sections.

In summary, this article has introduced Bootstrap 4 classes which can ease all styling tasks. Some odd-looking classes observed in this demo project are mostly styling classes that can be read up [here](https://getbootstrap.com/docs/4.3/utilities/). 

This writeup has also explained how to use Flexbox for inner elements that require certain visual behaviour with native Bootstrap 4 components. 

Comparing the [clone](https://tundeiness.github.io/Newsweek-clone/) and,  the original [newsweek](https://www.newsweek.com/) magazine, you will observe that they exhibit the same visual behaviour and are both responsive. 


The project demo can be found on codepen:
{% codepen https://codepen.io/highness/pen/zYOqrxw %} 

Here is the link to the [repository](https://tundeiness.github.io/Newsweek-clone/) for the full Newsweek homepage implementation. 


Thanks for Reading!

You have comments or suggestions on how to improve this article? Please drop them here or you can reach me on twitter via @tundeiness 



**_REFERENCES_**

https://getbootstrap.com/docs/4.3/getting-started/introduction/