It is the most popular front end tool for web development.
History of Origin
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter Inc. as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.
The first deployment under real conditions happened during Twitter’s first Hack week. Mark Otto showed some colleagues how to accelerate their projects development with the help of the toolkit. As a result, dozens of teams have moved to the framework.
In August, 2011 Twitter released Bootstrap as open-source. As of June 2013, it is the most popular GitHub development project.
Bootstrap has relatively incomplete support for HTML5 and CSS 3, but it is compatible with all major browsers. Basic information of compatibility of websites or applications is available for all devices and browsers. There is a concept of partial compatibility that makes the basic information of a website available for all devices and browsers. For example, the properties introduced in CSS3 for rounded corners, gradients and shadows are used by Bootstrap despite lack of support by older web browsers. These extend the functionality of the toolkit, but are not required for its use.
Since version 2.0 it also supports responsive design. This means the graphic design of web pages adjusts dynamically, taking into account the characteristics of the device used (PC, tablet, mobile phone).
At its heart, Twitter Bootstrap is basically simple good old CSS, but it uses the LESS preprocessor to add a lot more functionality that CSS could otherwise provide. The total package is a tiny 6KB is size, and only comprises of seven files. The features are included here is the low down:
- Layout grid – A standard 940 pixel width grid layout is provided, allowing developers to quickly get an apps page structure sorted. There is an optional variable width layout, should developers wish to use that instead.
- Support for responsive design – Websites adjust dynamically based on device being using to browse them. The included grid layout comes in four variations for various devices.
- Interface components – A large number of interface components are also provided. These include standard buttons, labels, preformatted warning and system messages, navigation controls, wizard controls, pagination, and breadcrumbs.
- Extensibility – Twitter’s Bootstrap can easily be extended or replicated to your needs. Flat UI and Boot Metro are excellent examples of CSS built on top of Twitter’s Bootstrap that makes the user experience seem totally different. Pure is an example of an alternative which uses YUI to create a standardization of HTML syntax. But, that said, you don’t necessarily need their code to build a standard HTML syntax for your development team.
Now it’s time to give twitter bootstrap a try. This article is a beginners tutorial for strarting twitter bootstrap. Here the latest stable version of of twitter bootstrap 2.3.2 will be used. For starting development with twitter bootstrap toolkit we have to setup it properly. To do so the required elements are
- Twitter Bootstrap
- Code Editor or IDE
- A browser
- HTML Templete
- jQuery [Optional]
Lets start the set-up process of twitter bootstrap
At 1st go to the Bootstrap homepage: http://twitter.github.com/bootstrap/
Click on the large Download Bootstrap button.
Locate the downloaded file and unzip or extract it. You should get a folder named simply bootstrap. Inside this folder you should find the folders and files as shown in below:
Now we need a basic HTML templete. Copy and paste it In your code editor
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap</title> <meta name="description" content="Twitter Bootstrap"> <meta name="author" content="Hungry Coder"> </head> <body> <h1>Twitter Bootstrap Example</h1> </body> </html>
Save it as test.html then double click on test.html to view in a browser. The following result will be shown in the browser
So we have our basic html templete now its time to add twitter bootstrap style sheets to the templete
Now Save or move the test.html file inside your main bootstrap folder, just alongside the folders named css, img, and js.
You should now see something similar to the following screenshot:
Next, we need to add this line
<link href=”css/bootstrap.min.css” rel=”stylesheet”> inside the <head></head> tag like below
<div class="container"></div> <!-- /container -->
and put the <H1></H1> tag inside this div tag like below:
now the final code looks like as follows
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap</title> <meta name="description" content="Twitter Bootstrap"> <meta name="author" content="Hungry Coder"> <!-- Bootstrap styles --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div> <h1>Twitter Bootstrap Example</h1> </div> <!-- /container --> </body> </html>
- Its time to save the changes you made and then double click the test.html file located inside your bootstrap folder
- Wow! it works! the output will be like below
- Now you can see the differences of before and after adding twitter bootstrap on the HTML templete .
In the upcoming tutorials we will dig more deeper into twitter bootstrap. Till then happy Bootstrapping!