twitter-bootstrap-3

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.



  
    
    
    
    

    
    
    
  
  
    

Hello world

Submit

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 an experienced web developer and a Computer Science Engineer from India. With more than 4+ years of experience, he masters the art of Responsive Web Design (RWD). He's the author of the Book, Jump Start Bootstrap, published by SitePoint. He also excels in prototyping and developing hybrid apps for Mobiles and Smart TVs. You can also find him blogging about various web technologies on his own website HTMLxprs.
  • http://www.rgbgroup.in Dilip Paswan

    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

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

  • Pingback: Best Bootstrap Tutorials 2014 | Extreme CSS

  • http://iaintgotsawebsitewithoutblinkingscrollingglitterythingsonastarrybackgroundatgeocities.com iforgotmyname forreals

    This article was great. Thanks!

  • Sajala

    Nice article for a beginner. Thanks!