---

Search posts under Bootstrap:

---

Download Bootstrap in Bootstrap

How to download and install Bootstrap?

In previous post, we learnt why bootstrap? In this, let's learn how to install Bootstrap.

Download Bootstrap

To download Bootstrap, go to Bootstrap's official website http://getbootstrap.com and click on Download. In current, website design you would be redirected to another webiste where there would be "Download Bootstrap" button, click on it and it will download a .zip file.

Unzip the downloaded .zip file and we would get following folders and files

1.  Root folder (unzipped)
   
   
2. Sub folders under root folder
   
   

   
   
   

3. Files under "css" folder - contains main bootstrap css files
   
   
   
   
4. Files under "fonts" folder - contains font files containing Glyphicons icons
   
   
   
   
5. Files under "js" folder - contains .js files supported for different bootstrap functionality
   

Installing Bootstrap

Depending on a specific folder structure, we can cut-paste these files into our project.

For example, for ASP.NET MVC default project structure we can move all .css files to "~/Content" folder, .js files to "~/Scripts" folders and keep fonts folder in the root.

Pre-requisite

To use all functionality of the Bootstrap including its .js functionality that contains carousel, model, drodown and other functionality we need to use jQuery.

Important setup for Glyphicons icons

It is important to change the folder path (in bootstrap.css and bootstrap.min.css of css folder) of fonts files in case we are moving fonts folder to a different location inside the project.

Open above .css file and locate to below .css class and change the highlighted path accordingly.

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');

  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Look at the highlighted path of the font files. If we are not keeping all files of three folders (css, js and fonts) into the root of the application, please change the folder path of above @font-face class for accordingly in order to work Glyphicons accordingly.