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 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.
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.
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!
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
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.
Latest posts by Syed Fazle Rahman (see all)
- Best Bootstrap Tutorials 2014 - February 13, 2014
- Getting started with Foundation 5 – Understanding HTML markup and installations - December 20, 2013
- Making Twitter Bootstrap 3 Compatible with Internet Explorer 7 and below - November 29, 2013
- Twitter Bootstrap Vs Yahoo Pure! Which one to opt? - November 5, 2013
- Getting started with Twitter Bootstrap 3 – Installations Tutorial - November 5, 2013