• Post your Requirement
  • Login or Signup

How to Start a HTML Website using Bootstrap in 2019

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

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.

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>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" crossorigin="anonymous">
   
    <title>Hello, world!</title>
  </head>


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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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


Copyright © 2018 Smarteyeapps.com Design & Developed by Smarteye Technologies