How to Start a HTML Website using Bootstrap in 2019

This blog will teach you how to start an HTML website project using bootstrap 4, Jquery, and font awesome in 2019. Here you will find the step by step guide to integrate Bootstrap, Jquery and font awesome using CDN and this blog will give you complete guide to downloading bootstrap 4, Font awesome and Jquery and also you can learn the basic of bootstrap alignment and also you can find how to add font awesome icons to your website in 2019. and if you looking for a hosting to get started please visit Hosting Foundry. If you are looking to boost the SEO of your website please visit Diggity Marketing's article there you will find some helpful information. Now please go though the nine points listed below to start creating your first HML website

1, Create Project Folder and Choose your IDE

First, we need to create a folder to create an HTML website, for example, create a folder called my_project and inside the my_project folder create another folder called assets. After creating the folder for your website choose an IDE for your project. you can choose your favourite IDE for your project if you don't know much about IDE download Subline Text or VS Code from the given Link or if you want to know more about Top 10 IDES in 2019 please open this link and read more about IDES

2, Download Bootstrap from getbootstrap.com

Now we can download bootstrap from getbootstrap.com. Go to getbootstrap.com and go to the Download page and download compiled version of bootstrap

Extract the bootstrap zip file and past it inside the assets folder my_projects > assets

3, Now Download Jquery and Poper.js

Bootstrap requires Jquery and Poper.js to run so we need to download jQuey from jquery.com and download poper.js from the given link Download Poper.js. Now place jquery.min.js and popper.min.js in the js folder inside assets

4, Open project in IDE and create new html File

Now open the project folder in your favourite IDE, for example, open your project folder in the sublime text IDE and then create a new HTML file called index.html

5, Open project in IDE and create new html File

Now open the project folder in your favourite IDE, for example, open your project folder in the sublime text IDE and then create a new HTML file called index.html

6, Add Bootsrap and Jquery in index.html and start Coading

Add the following HTML to start your first HTML website

!doctype html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>

<body>
    <h1>Hello, world!</h1>

    
    
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
</body>
</html>

7, Download and add fontawsome

Download font awesome web free version from fontawsome.com . and extract it and place webfonts folder it into your assets folder and copy the all.css file from font awesome css folder and past it into the css folder of your project folder

Now add all.css file to index.html and start using fontawesome icons in your project

8, Adding Bootstrap Components to your website

Now its time to create your website by add bootstrap components to your website to add bootstrap components to your website you simply go to getbootstrap.com and visit docs and go to bootstrap components and add components to index.html before adding components just add a container to the website

<div class="container">
  <nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
    <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </nav>
</div>

9, Download Project File

If you want to download the project folder you can simply click the button to download

This blog will help you to start a html website project from scratch. In this tutorial you will learn what are the basic things needed to start a HTML website using bootstrap 4