Bootstrap Environment Setup

This setup is very easy and starts using Bootstrap. This article will guide you to how to download and use Bootstrap. We will discuss here the file structure of Bootstrap and also demonstrate usage of Bootstrap with multiple examples.

Download Bootstrap

Latest version of Bootstrap you can download from here When you visit on this link, you will get to see a screen as below:

Bootstrap Download Screen

Here you can see three buttons:

  • Download Bootstrap: Clicking on this link, you can download the precompiled and minified versions of Bootstrap CSS, JavaScript, and fonts. No documentation or original source code files are included.

  • Download Source: Clicking this, you will get the latest Bootstrap LESS and JavaScript source code directly from GitHub.

  • Sass: by Clicking on this Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.

If you are working with Bootstrap’s uncompiled source code, you have to need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, Bootstrap officially supports only Recess , which is Twitter’s CSS hinter based on less.js.

For better knowledge and simplicity of use, we will use precompiled version of Bootstrap throughout the tutorial. As the Bootstrap files are complied and minified so you do not have to difficulty every time including separate files for individual functionality. We will download latest version (Bootstrap 3) for writing these tutorials.

File structure

Precompiled Bootstrap

One time the compiled version Bootstrap is downloaded, extract that ZIP file and you will find the following file/directory structure:

The same as you can see some compiled CSS and JS (bootstrap.*) are there, as well as compiled and minified CSS and JS (bootstrap.min.*). Fonts are included from Glyphicons, as is the optional Bootstrap theme.

Bootstrap Source Code

If you have download source code of Bootstrap then the file structure would be like as follows:

  • The files below less/, js/, and fonts/ are the source code for Bootstrap CSS, JS, and icon fonts (respectively).
  • The dist/ folder include everything listed in the precompiled download section above.
  • The docs-assets/, examples/, and all *.html files are Bootstrap documentation.

HTML Template

Start with this basic HTML template using Bootstrap would look like as this:

Here you can see some file like jquery.js and bootstrap.min.js and bootstrap.min.css are included to making a normal HTM file to Bootstrapped Template.

For more details regarding each of the elements in this above piece of code we will discussed in the article Bootstrap CSS Overview.

In all the following articles we have used dummy text from the site

Leave a Reply

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