Setting up the Bootstrap working environment

How to setting up a working place for Bootstrap websites?

Required software:

  1. Code editor for writing HTML, CSS, JavaScript and Less or Sass. You can use whatever you like for example Dreamweaver and Notepad++ but I recommended Sublime Text to start as a pro. In this tutorial we are going to use Sublime Text 3.
  2. Image editor, here I recommended the one and only image editor Photoshop. Don’t waste your time with other image editors. However there is GIMP which is free but quite complex program. It is work even with PSD (Photoshop’s native file format).

Required files:

Of course we need Bootstrap’s files themselves. Bootstrap came with 3 flavor the first one with necessary CSS, JavaScript, and fonts. The second one came with the same files as the first one and additionally Less files. The flavor as the second one but with Sass files instead of Less.

If you know how to Less or Sass go with the second or the third flavor. But this is not necessary. Most of the time the first flavor is enough.

You can also customize Bootstrap before downloading it.

Optional software:

To compile Sass or Less you need additional software.

For Sass:

  • CodeKit (Paid) – Run in Mac.
  • Compass.app (Paid, Open Source) – Run in windows, Linux and Mac.
  • Hammer (Paid) – Run in Mac.
  • Koala (Open Source) – Run in windows, Linux and Mac.
  • LiveReload (Paid, Open Source) – Run in windows and Mac.
  • Mixture (Free) – Run in windows and Mac.
  • Prepros (Paid) – Run in windows and Mac.
  • Scout (Open Source) – Run in windows and Mac.

For Less

  • Koala (Open Source) – Run in windows, Linux and Mac.
  • Simpless (Open Source) – Run in windows, Linux and Mac.
  • Less.js (Open Source) – Run in windows, Linux and Mac.

I highly recommended using Koala as it is free and compiling both Sass and Less and cross-platform i.e. run in windows, Linux and Mac.

How to compile Sass and Less files?

Setting up the working environment:

Now you should have all software, files needed I will assume you have Sublime Text 3 as a code editor and the necessary CSS, JavaScript, and fonts. Same steps apply for any code editor you choose.

If you choose to download only the compiled and minified CSS, JavaScript, and fonts, you will get a file named “bootstrap-3.3.4-dist.zip”. The 3.3.4 is the current version of Bootstrap. Same steps apply for any version of Bootstrap.

First thing to do is to extract the zip file. Inside the extracted folder there are 3 folder named css, fonts and js which all are necessary for bootstrap site.

Next create a project folder and name it whatever relevance to your project or website. I will call it “bootstrap-project”.

Copy the 3 extracted folder css, fonts and js and paste them inside bootstrap-project folder.

Open your code editor. (I use Sublime Text 3).

Drag the project folder to Sublime Text 3 window.

Bootstrap project tutorial
Bootstrap project folder inside Sublime Text 3

Create the first HTML file and name it index.html this file should be inside the main directory not inside any sub-folder.

Write the following code inside the head tag:

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

The previous code add the minified version of Bootstrap’s CSS. It is recommended to use the un-minified version “bootstrap.css” if you are going to edit the file.

Write the following code inside the body tag:

<!-- Compiled and minified JavaScript -->
<script src=js/bootstrap.min.js"></script>

The previous code add the minified version of Bootstrap’s JavaScript file.

Write the following code inside the body tag just before the last code we add:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

The previous code add the necessary jQuery file. This file is hosted by Google CDN.

Write the following code inside the head tag:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

As bootstrap official website recommended that the above 3 meta tags *must* come first in the head; any other head content must come *after* these tags.

If you are going to support IE8 and IE9 add the following code at the end of  the head tag: (Optional)

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Now you should have index.html which look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Project</title>

    <!-- Compiled and minified CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Compiled and minified JavaScript-->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

That’s it guys.

If you have any question please post it in comment.

Leave a Reply

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