Getting started with Twitter Bootstrap 3 – Installations Tutorial

Twitter Bootstrap is one of the most popular CSS framework in the Internet today. If you are a developer with Zero CSS knowledge, then Twitter Bootstrap is for you. It is a framework being developed and supported by Twitter. Many components in Twitter.com are built using this framework.

As of today, we have the third version of Twitter Bootstrap officially known as Twitter Bootstrap 3. Well, if you know me already then you might have read my previous articles on Twitter Bootstrap hosted by Sitepoint.com. Here’s the link to my works on Sitepoint.com.

Why Twitter Bootstrap?

I will be jotting down few questions which you should ask yourself. If the answers to those questions is Yes! then you are already on the right path.

  • You don’t have time to learn CSS?
  • You are a hard core server side developer who hates client side work?
  • You know HTML?
  • You know JavaScript?
  • You know how to download files?

Hopefully, you have answered YES to the above questions. So let’s proceed.

Getting Started with Twitter Bootstrap 3

In this tutorial, I will be teaching how to setup the Twitter Bootstrap 3 environment in your workspace. We will also create a very basic html page to verify if our setup is working or not.

The first thing that you have to do is to download the required files. Go to getbootstrap.com and download the latest archived files.

twitter-bootstrap-3

Once the download is complete, unzip the file and proceed inside the folder. Copy all the contents of the “dist” folder and paste them inside the home directory of your working workspace. In my case, “Twitter Bootstrap 3 Demos” was the name of the folder. Below is the screenshot my folder.

bootstrap 3 setup

Now, we have all the required files necessary to use Twitter Bootstrap.

Next, we will create a HTML file to see if the setup works. So proceed and create index.html using your favorite editor and save it inside the above folder. I am using “Sublime Text 2.0″ editor, its awesome! :D

Copy the below code snippet and paste it inside index.html file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <title>My First Twitter Bootstrap Page - Extreme CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 
    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello world</h1>
    <a href="#" class="btn btn-primary">Submit</a>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

code-bootstrap-3

There are few things that we should understand in the above code. Twitter Bootstrap 3 is by default responsive in nature. That means whatever you design using Twitter Bootstrap 3 will be compatible among all types of devices (mobile, desktop, tablets, etc). To achieve that we need viewport tag set properly in every html pages.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

This code tells the browser to set the width of the page to the size of the screen of the device it is opened in.

Next, we have to link our html files to proper CSS files.

<link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”>

There will be 2 CSS files present inside the CSS folder: bootstrap.css and bootstrap-min.css. Both are exactly identical. The only difference between these two is that the former contains documentations inside it while the later one is the minified version without any documentations or indentations. The minified version is used when finally deploying the web app.

Lastly, we need to include the jquery file and the bootstrap.js inside the html body. Twitter Bootstrap recommends adding all the js files at the end of the html file.

Go ahead and view index.html inside your web browser. You can see “Hello World”.

Twitter Bootstrap 3 in Action

Lets proceed and add some html elements and get surprised!

Add the following code and refresh your page :

<a href=”#” class=”btn btn-primary”>Submit</a>

You can see a blue colored button. Isn’t it great? We wrote zero lines of CSS codes for that button. It is basically a link with some necessary classes that helps Twitter Bootstrap to identify which style to apply.

So this was getting started with Twitter Bootstrap 3 tutorial. Hopefully, you have understand how it works. I will post more on Twitter Bootstrap 3 and create some dummy templates in near future. If you have any queries or want to encourage me by praising then do leave a comment below. :)

The following two tabs change content below.
Fazle is a computer science student who maintains an interest in web technologies and development. His main focus is CSS and front end designing. He has been in the web industry some years and has seen the web transform from traditional designs to responsive design structure. He is currently working for Gadgetic World, technology/gadgets blog.

About the Author

Syed Fazle Rahman

Fazle is a computer science student who maintains an interest in web technologies and development. His main focus is CSS and front end designing. He has been in the web industry some years and has seen the web transform from traditional designs to responsive design structure. He is currently working for Gadgetic World, technology/gadgets blog.

3 Comments

  • Dilip Paswan said:
    February 12, 2014 at 7:21 am

    thanks to for this bit i want to know that if i want my site in responsive the may i put all my html file in body and it would be responsive automatically or not?

    • extremecss said:
      February 13, 2014 at 11:07 am

      It won’t be responsive automatically! Obviously! You have to use the responsive classes released by Bootstrap.

Have any queries? Leave a comment.