Creating a Clone of a Bootstrap Website using HTML and CSS

Faraz

By Faraz -

Dive into frontend development with our detailed tutorial on creating a replica of a Bootstrap site using HTML and CSS.

Join us on Telegram
Creating a Clone of a Bootstrap Website using HTML and CSS.jpg
Read AlsoBuild an Image Comparison Slider HTML, CSS, JavaScript Tutorial.jpgBuild an Image Comparison Slider: HTML, CSS, JavaScript Tutorial (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Preview
  5. Conclusion

Welcome to an exciting journey into the world of frontend web development! In this comprehensive tutorial, we will take you through the step-by-step process of creating a clone of a Bootstrap website using HTML and CSS. Whether you're a beginner eager to learn the ropes or an experienced developer looking to enhance your skills, this guide is designed to cater to all levels of expertise.

The Power of Hands-on Practice

Learning web development is an exhilarating experience, but theory alone can only take you so far. That's why we're taking a hands-on approach, giving you the chance to delve into actual coding and design. By the end of this tutorial, you won't just have theoretical knowledge; you'll possess practical skills that can be applied to real-world projects.

Why Clone?

You might be wondering, "Why to clone a website? Why not start from scratch?" Cloning serves as an excellent learning exercise. It provides you with a tangible goal, a roadmap to follow, and the opportunity to dissect and understand someone else's design and code. Moreover, as you embark on your web development journey, you'll often find yourself needing to replicate existing designs or features. This tutorial equips you with the skills to do just that.

Embrace Your Creativity

While cloning a website is a fantastic starting point, we encourage you to think beyond replication. As you gain confidence in your HTML and CSS skills, consider customizing your cloned website, and experimenting with different styles, layouts, and interactions. This is where your creativity can truly shine, transforming a clone into something uniquely yours.

Are you ready to dive in? Let's embark on this journey of discovery and creation. Whether you're here to learn, enhance your skill set, or unleash your creativity, this tutorial is tailored to your aspirations. So, let's fire up our code editors and bring this Bootstrap website clone to life!

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our bootstrap clone website.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Here's an explanation of the different sections of the HTML code:

1. Head Section:

  • The <meta> tag specifies the character encoding as UTF-8 for proper rendering of text.
  • The <title> tag sets the title of the webpage to "Bootstrap Clone."
  • The <link> tag includes an external stylesheet named "styles.css" for styling the webpage.
  • Two <script> tags include external JavaScript libraries. One is for the FontAwesome icon library, and the other is for the Iconify library.

2. Body Section:

  • The <header> tag defines the webpage header.
  • Inside the header, there's a navigation bar (<nav>) with two main sections: .navbar-left and .navbar-right. These sections contain navigation links and icons.
  • The main content of the webpage is within the <main> tag.
  • Within the main content, there are two major divisions: .first and .second, each containing different sections with information about Bootstrap.

3. First Section:

  • This section contains information about Bootstrap, including a headline, paragraph, buttons for getting started and downloading, and version information.
  • There's an image displayed using the <img> tag.
  • A call-to-action advertisement with a link is present at the bottom of the section.

4. Second Section:

  • This section is divided into multiple subsections, each showcasing a different aspect of Bootstrap.
  • Each subsection has an icon, a title, explanatory text, code snippets, and buttons.
  • The code snippets show how to include Bootstrap's CSS and JavaScript using different methods.

5. Footer Section:

  • The footer contains several columns, each containing links related to different aspects of Bootstrap.
  • These columns cover topics like links to Bootstrap's official website, documentation, examples, themes, and community resources.

This is the basic structure of our bootstrap clone website using HTML, and now we can move on to styling it using CSS.

Read AlsoCreate Connect Four Game Using HTML, CSS, and JavaScript.jpgCreate Connect Four Game Using HTML, CSS, and JavaScript (Source Code)

Step 2 (CSS Code):

Once the basic HTML structure of the bootstrap clone website is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our clone website.

Here's an explanation of the code section by section:

1. List Styling (li):

  • This section targets list items (<li> elements) and sets their display style to inline-block. This makes list items display horizontally next to each other.

2. Body Styling (body):

  • This section sets various styling properties for the entire page's body.
  • It sets the background color to white and specifies a font-family.
  • Margins and padding are set to 0, which removes any default spacing around the body.
  • The line height is set to 1.5, and the font size is set to 16px.

3. Header Styling (header):

  • This section styles the header of the page.
  • The header has a background color of #7952b3 (a shade of purple) and a fixed height of 68 pixels.
  • It's set to be a flex container with specific alignment and wrapping properties to organize its content.

4. Navigation Styling (nav, .navbar-left, .navbar-right, .navbar-left li a, .navbar-right li a, #bootstrap-button img, #open img, #download):

  • This section styles the navigation bar.
  • The navigation bar is divided into a left part (.navbar-left) and a right part (.navbar-right).
  • Navigation links (<a> elements) in both sections have specific padding, colors, and decorations.
  • The #bootstrap-button img and #open img images are styled with specific properties.
  • The #download button is styled with various properties such as color, background color, padding, and margin.

5. Main Content Styling (main, .first, .first-text, .first-content, .first-cont-1, h1, .para, .first-butt, .button1, .button2, .ver, .dot, .vlink, .bootad, .bootad-cont, .bootad img, .bootad-text, .big-graphic, .big-graphic img):

  • This section styles the main content area of the page.
  • .first and related classes define styles for the first content section, including gradients and padding.
  • .first-cont-1 specifies the styles for the first content's left portion.
  • h1 and .para define styles for heading and paragraph elements respectively.
  • .first-butt, .button1, and .button2 style buttons with different colors and sizes.
  • .bootad and related classes style an advertisement box.
  • .big-graphic and its child image are styled for a large graphic.

6. Second Content Section Styling (second, .second-text, section, h2, .p1, .p2, a, .button3, .sec-1, .sec-2, .copy, .copy-button, .code, .icons img, .bootstrap-icons img):

  • This section styles the second content section.
  • .second-text and related classes are used to align text and elements.
  • section defines a flexible section with padding and alignment properties.
  • h2, .p1, and .p2 style headings and paragraphs.
  • .button3 is a styled button.
  • .sec-1 and .sec-2 style the content's two sections.
  • .copy and .copy-button style the "copy" button.
  • .code styles code blocks.
  • .icons img and .bootstrap-icons img style images.

7. Footer Styling (footer, .foot-cont, .foot-text, .first-col, .col-logo, .col-top img, .col-bootstrap, .foot-col-1, .foot-col, h3, .col-top, .first-col-list, .col-list, .col-item, .col-item a):

  • This section styles the footer of the page.
  • .footer and related classes style the footer's appearance.
  • .first-col, .foot-col-1, and .foot-col define columns in the footer.
  • .col-logo, .col-top, .first-col-list, .col-list, and .col-item style various elements within the footer.
  • h3 styles footer heading elements.

8. JavaScript Code Styling (.jscode, .jscode-text, .js-codecode):

  • This section styles JavaScript code blocks.
  • .jscode styles the code block container.
  • .jscode-text and .js-codecode style the code's appearance.

9. Color Classes (.lg, .g, .b, .bb, .mg, .r):

  • These classes define different text colors.

This will give our bootstrap clone website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

li {
	display: inline-block;
}

body {
  background-color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0px;
  padding: 0px;
  line-height: 1.5;
  font-size: 16px;
  font-weight: 400;
}

header {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
/*   width: 100%; */
  background-color: #7952b3;
  height: 68px;
}

nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
/*   background-color: #7952b3; */
}

.navbar-left {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: -36px;
}

/*  has no class */
.navbar-left li a {
	color: #cdbfe3;
	text-decoration: none;
	padding: 8px;
}

#bootstrap-button img {
  display: inline-block;
  vertical-align: middle;
  align-items: center;
  width: 48px;
}

.navbar-right {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  margin-left: auto;
}

.navbar-right li a {
	color: #cdbfe3;
	text-decoration: none;
	padding: 7px;
}

#open img {
  width: 20px; 
  margin-bottom: -2px;
}

#download {
/*   display: inline-block; */
  vertical-align: middle;
  font-weight: 600;
  color: #ffe484;
  background-color: transparent;
	border: 1px solid #ffe484;
	border-radius: 3px;
	padding: 8px 10px;
  margin-left: 14px;
	text-decoration: none;
  text-align: center;
}

main {
  display: block;
}

.first {
  padding: 48px 0px;
  margin-bottom: 14px;
  background: linear-gradient(170deg, #f7f5fb 50%, #fff 50%);
}

.first-text {
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  padding: 0px 16px;
  max-width: 1320px;
  width: 100%;
}

.first-content {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  padding: 0px 14px;
}

.first-cont-1 {
  order: 1;
  text-align: left;
  flex: none;
  width: 60%;
  max-width: 100%;
}

h1 {
  display: block;
  line-height: 1;
/*   margin-top: 60px; */
  margin: 24px 0px 16px 0px;
  font-size: 64px;
  font-weight: 500;
  padding: 0px;
}

.para {
  display: block;
	font-size: 24px;
  font-weight: 400;
  color: #495057;
  line-height: 1.5;
/*   margin-top: -24px; */
  margin: 0px;
  padding: 0px 0px 24px;
}

.first-butt {
  display: flex;
  flex-direction: row;
}

.button {
  display: inline-block;
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

.button1 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  background-color: #7952b3;
  border-color: #7952b3;
  margin: 0px 16px 16px 0px;
  padding: 12px 30px;
  border-radius: 5px;
}

.button2 {
  font-size: 20px;
  font-weight: 600;
/*   color: #fff; */
  color: #6c757d;
  border-color: #6c757d;
  margin: 0px 16px 16px 0px;
  padding: 12px 30px;
  border-radius: 5px;
}

.ver {
  margin-top: 0px;
  opacity: 1;
  color: #6c757d;
/*     color: #00000080; */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.dot {
  padding: 4px 4px;
}

.vlink {
  color: inherit;
  text-decoration: underline;
}

.bootad {
  margin: 50px 0px 30px 12px;
  align-items: left;
  padding: 16px;
  max-width: 300px;
  display: flex;
  background-color: #0000000d;
  text-align: left;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.4;
}

.bootad-cont {
  align-items: left;
  padding: 16px;
  max-width: 300px;
  display: flex;
  flex-wrap: flex;
  background-color: #0000000d;
  text-align: left;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.4;
}

.bootad img {
  width: 130px;
  vertical-align: middle;
  justify-content: center;
  margin-right: 16px;
}

.bootad-text {
  display: block;
}

.bootad-text a {
  color: #343a40;
  text-decoration: none;
}

.big-graphic {
  order: 2;
  flex: none;
  width: 40%;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.big-graphic img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  mix-blend-mode: multiply;
}

.second {
  align-items: center;
  max-width: 1320px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 16px;
}

.second-text {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  padding-left: 300px;
}

section {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 48px;
  padding: 0px 0px -12px;
  align-items: center;
}

h2 {
  display: block;
/*   flex: */
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0px 0px 8px;
}

.p1 {
  display: block;
  flex-wrap: wrap;
  font-weight: 400;
  font-size: 20px;
  margin: 0px 0px 16px;
}

.p2 {
  display: block;
  flex-wrap: wrap;
/*   font-weight: 400; */
  font-size: 16px;
  line-height: 1.5;
  margin: 0px 0px 16px;
}

a {
  color: #0d6efd;
  text-decoration: underline;
}

.button3 {
  font-size: 20px;
  color: #0d6efd;
  border-color: #0d6efd;
}

.sec-1 {
/*   display: block; */
  flex: none; 
/*   width: 520px; */
  width: 42%;
  max-width: 100%;
  padding: 0px 12px;
}

.sec-2 {
/*   display: block; */
  flex: none; 
  width: 50%;
  max-width: 100%;
  padding: 0px 12px 0px 48px;
}

.copy {
  display: block;
  position: relative;
  float: right;
}

.copy-button {
  display: block;
  position: absolute;
  top: 10px;
  right: -38px;
  font-size: 10px;
  padding: 4px 8px;
  color: #0d6efd;
  background-color: #fff;
  border: 1px solid;
  border-radius: 4px;
}

.code {
  display: block;
  padding: 28px 24px;
  margin: 0px 0px 16px;
  background-color: #f8f9fa;
  width: 100%;
  font-family: "Courier New";
  font-size: 14px;
  overflow: hidden;
}
  
.icons img {
  vertical-align: left;
  overflow: hidden;
  width: 56px;
  height: auto;
}

.bootstrap-icons img {
  vertical-align: middle;
  max-width: 100%;
  width: 700px;
  margin: 16px 0px 0px;
}

footer {
  display: block;
  margin-top: 48px;
  padding: 48px 0px;
  background-color: #f8f9fA;
  opacity: 1;
  color: #495057;
  text-decoration: none;
}

.foot-cont {
  margin-right: auto;
  margin-left: auto;
  padding: 48px 0px;
  max-width: 1320px;
  width: 100%;
}

.foot-text {
  display: flex;
  flex-wrap: wrap;
/*   max-width: 100%; */
  margin: 0px -12px;
}

.first-col {
  flex: none;
  width: 25%;
  margin: 0px 0px 16px;
  padding: 0px 12px;
  max-width: 100%;
}

.col-logo {
  display: inline-flex;
  align-items: center;
  color: #495057;
  margin: 0px 0px 8px;
  text-decoration: none;
}

.col-top img {
  vertical-align: middle;
  margin-right: 8px;
  width: 40px;
}

.col-bootstrap {
  font-size: 20px;
  color: #495057;
}

.foot-col-1 {
  display: block;
  flex: none;
  width: 16%;
  margin-bottom: 16px;
  padding: 0px 12px;
  max-width: 100%;
}

.foot-col {
  display: block;
  flex: none;
  width: 16%;
  margin-bottom: 16px;
  padding: 0px 12px;
  max-width: 100%;
}

h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 0px 0px 8px;
  line-height: 1.2;
}

.col-top {
  color: #495057;
  text-decoration: none;
  margin: 0 0 8px;
  align-items: center;
  display: inline-flex;
}

.first-col-list {
  font-size: 14px;
  opacity: 1;
  color: #6c757d;
  padding-left: 0px;
  list-style: none;
  display: block;
  margin: 0px 0px 8px;
}

.col-list {
  padding-left: 0px;
  list-style: none;
  display: block;
  margin: 0px 0px 8px;
}

.col-item {
  margin: 0px 0px 8px;
  text-align: left;
}

.col-item a {
  color: #495057;
  text-decoration: none;
  display: inline;
}

.jscode {
  display: block;
  padding: 16px 24px;
  margin: 0px 0px 16px;
  background-color: #f8f9fa;
  width: 100%;
  font-family: "Courier New";
  font-size: 14px;
  overflow: hidden;
}

.jscode-text {
  display: block;
  /*   margin: 10px 0px; */
  padding: 0px;
  background-color: transparent;
/*   border: 0; */
  overflow: auto;
  font-size: 14px;
}

.js-codecode {
  font-size: inherit;
  color: #212529;
  word-wrap: normal;
  word-break: normal;
}

.lg {
  color: #727272;
}

.g {
  color: #212529;
}

.b {
  color: #2f6f9f;
}

.bb {
  color: #006ee0;
}

.mg {
  color: #555;
}

.r {
  color: #d73038;
}

Final Output:

Creating a Clone of a Bootstrap Website using HTML and CSS.gif
Read Alsohow to create pure css to do list using html and css.pngHow to Create Pure CSS To Do List Using HTML and CSS

Conclusion:

Congratulations on completing this invigorating journey of creating a clone of a Bootstrap website using HTML and CSS! You've taken significant strides in your frontend development skills, gaining firsthand experience in structuring web pages, applying styles, and ensuring responsiveness. As we wrap up this tutorial, let's reflect on what you've accomplished and explore what lies ahead.

Remember, while cloning is an excellent exercise, it's only the beginning. Armed with the knowledge you've gained, you're now equipped to tackle more complex projects and embark on your creative journey. Take the techniques you've learned and push the boundaries of design and functionality. Let your imagination guide you as you explore new ways to enhance user experiences.

With your newfound skills, the possibilities are endless. Whether you're building personal projects, contributing to open-source initiatives, or pursuing a career in web development, remember that the journey is just as important as the destination. Keep coding, stay curious, and continue honing your craft.

Thank you for joining us on this captivating journey of learning and creation. We hope this tutorial has ignited a passion for front-end development within you. As you venture forth, remember that every line of code you write is a step toward innovation. So, go forth, build, and make your mark on the digital landscape. Happy coding!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: bootstrap website clone, html, css, web development, frontend development, clone website tutorial, creating a bootstrap website clone from scratch, step-by-step html css website cloning guide
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post