Lets start a bootstrap project

Bootstrap is one of the popular HTML/CSS framework for developing responsive websites. It is following a mobile first approach. It helps to develop websites faster with most changes going into html and we only need to write a few lines into the css. So lets get started by downloading bootstrap.

Get Bootstrap from : http://getbootstrap.com/getting-started/#download

You will find 3 variants of bootstrap to download. First one is the minified files which are production ready. Second is the original source files, basically entire code along with docs, less files, unminified js etc. The third one is the sass version of the above. Bootstrap’s css was originally written in Less and this sass version is a port of the less to sass.

Bootstrap 3 folder structure

Bootstrap 3 folder structure

 

 

What we are going to use is the first one, the minified bootstrap as we are just starting with bootstrap. This file consists all those we need. Current version as of writing this post is 3.3.5. Download those files and extract the contents to a folder and you will see a folder structure as shown here.

 

 

So now we have bootstrap files, We now need an html page which uses bootstrap’s files. I prefer keeping all bootstrap files inside a folder within our project and not to make any changes to the files that come with bootstrap. Whatever changes I need with be done on my own style and js files. The folder structure and basic html is given below. All the styles of the website are kept inside “css/style.css” and javascripts in “js/scripts.js” file. This separation of bootstrap files will help for easy upgrading or modifying the bootstrap core without affecting the styles we have written.

A basic website folder structure with bootstrap files

A basic website folder structure with bootstrap files



Now you have a bootstrap project ready to develop. Check out http://getbootstrap.com/css/ , http://getbootstrap.com/components/ and http://getbootstrap.com/javascript/ for features and builtin functionalities that bootstrap is packed with.

follow me on

Sandeep MT

Module Lead at Mindtree Ltd
It takes some time to write an "about me" section :)
Now I am in a world of html/css and javascript ...
follow me on

Latest posts by Sandeep MT (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">