Bootstrap Registration and Login System - Front End

As everyone knows, Bootstrap is a very popular framework for CSS. It is improving day by day and recently, Beta version of Bootstrap V4 has been released. Here I'm going to use Bootstrap V3.3.7 for this tutorial. Registration and login system is an essential part of any web site. It caan be nicely designed with the help of Bootstrap. Additionally I will use Font Awesome Icons for styling.

First you need to download Bootstrap. Visit here to download it.

Extract the zip file. Take a copy of the 3 folders called css, js and fonts.

Then create your project folder and paste the copied 3 folders extracted from Bootstrap zip file, in the project folder.

Font Awesome is not necessary to use Bootstrap. But here you want it. Go to the web site and download it also. Visit here to download. Extract the zip file and move the folder to your project folder. Later include the path for font-awesome CSS file in the head section of the files that you use the icons. Use the link tag in HTML to link the file. Now folder structure of your project should be like this.

Now you can create your index.html file and start coding. Your file can be either HTML or PHP. If you wish to code back-end later, create index.php file. Usually this index page is the page loading by default, when we launch a web project. So I include the Login in it.

Then go to Bootstrap web site and search for Basic Template. Then copy the code of that template. This is the link for the template => Bootstrap Basic Template

You need to include the correct path for your bootstrap css and js files. Here, the paths for css and js are same as they are in the basic template code.

Here I have created a CSS file called custom.css and moved it into the CSS folder. This is the file that contains the styles made by me for the parts in the files. You need to link it also using the same linking method.
Now the folder and file structure...(If you are using images, create a folder to include images.)