Before going to make some complicated projects we need to have a solid foundation for our bootstrap projects, which can be considered as a base for forth coming projects. bootstrap basic template consists upon some folders and a Startup file which suppose to be required in almost every project of bootstrap. In future we will write all our code in this basic structure. We need some common files to be included in our project so we need not to discuss them again and we only focus on our main project. so let’s start.
Following is the picture diagram of our basic structure of bootstrap:
This folder contains all necessary folder and files for working of bootstrap basic template. It further contains following sub-folders:
It contains the two necessary files in sub folders to run bootstrap.
this folder contains
style.css file which will contain our style code for different projects. It will be different for different projects.
this folder will contains our images which is going to be used our HTML projects with the help of this bootstrap basic template.
This folder basically contain minfied jQuery file. which is necessary for smooth functioning of bootstrap structure. it enhances the features provided by bootstrap. We can add more js files according to our needs.
This is the main file which will execute in browser. This file is calling and including all other files from this basic bootstrap template. If you are testing file on your home computer then it is good practice to execute your files through Xampp Testing server as it produces result same like in original web server over Internet. The code in this file is look like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap basic template</title> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/styles.css"> </head> <body> <div class="row"> <div class="col-md-12"> <h1> Welcome to Bootstrap Basic Template </h1> </div> </div> <script src="assets/js/jquery.min.js"></script> <script src="assets/bootstrap/js/bootstrap.min.js"></script> </body> </html>
We can add more files and folders in this basic template of bootstrap. but basic is basic. Now we are aware of our basic structure. In future we will no need to explain to keep things simple.
You can download this basic template here