Twitter Bootstrap{8}

by Silva H

Twitter Bootstrap


           Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter in August 2011 as a framework to encourage consistency across internal tools. Before the creation of Twitter Bootstrap, engineers had lot of difficulties to create descent websites and web application. They used various libraries that they were familiar with for interface development; however, there were lot of inconsistencies among the individual applications that made the scaling and maintaining them very difficult. Bootstrap began as an answer to these challenges and quickly accelerated during Twitter’s first Hackweek.

           Twitter Bootstrap is a free collection of tools for creating websites and web applications. “It is a collection of CSS and HTML conventions. It uses some of the latest browser techniques to provide you with stylish typography, forms, buttons, tables, grids, navigation and other interface components.” (Otto, 2011) Bootstrap is modular and consists essentially of a series of LESS stylesheet that offers much more power and flexibility than regular CSS. The LESS stylesheet language allows the users to use variables, functions and operators, nested selectors, color functions and as well as so-called mixins. (Reuven, 2012) “Bootstrap’s basic page layout is a 12-column grid, 940 pixels wide by default; all widths are adjustable properties.” (Yegulalp, 2012) Alternatively, the developer can use a variable-width layout. For both cases, the toolkit has four variations to make use of different resolutions and types of devices: mobile phones, portrait and landscape format, Tablets and PCs with a low and high resolution (widescreen). This adjusts the width of the columns automatically.

Twitter bootstrap offers lots of amazing features:

  • “Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
  • Styles for common HTML elements like typography, code, tables, forms, and buttons, and a great little icon set.
  • Basic styles for common interface components like tabs and pills, alerts, page headers, and more.
  • JavaScript plugins for things like tooltips, popovers, modals, and more.” (Verdan, 2012)

But the most important part it’s really easy to learn and use, plus it has a very good documentation and all the examples a developer could dream of.

          There are lots of companies and stores that used Bootstrap for creating their websites. Followings are some of the companies who used Bootstrap:

  • “Two Sweet Cupcakes is the Huntington Beach cupcake bakery, and their website is built on the Bootstrap framework.” (Hamp, 2013)

 (Picture obtained from

  • Aspect Studios is a bootstrap based, WordPress powdered website.” (Hamp, 2013)

(Picture obtained from

  •   “Indonesia BlackBerry Blogs uses Bootstrap as its framework of choice.” (Hamp, 2013) 

 (Picture obtained from

  •  EventRFP is a free event organization and sourcing tool for meeting and event planners.” (Hamp, 2013)

(Picture obtained from

  • LUX Soap Skin Care have chosen bootstrap for developing their website.” (Hamp, 2013)

(Picture obtained from

          While doing this blog, I did some research about why developers should use Twitter Bootstrap as a framework and I found out 10 reasons about why to use Twitter Bootstrap:

1.   Save Time

With Bootstrap, you will save a lot of time. A web developer doesn’t have to spend much time working out and writing code, but simply find the right piece and fit it into the structure they’re working on.  (David, 2013)

2.   Customizable

A great aspect of Bootstrap is that you can make it your own. You can go through the whole framework and keep what you need and delete what you don’t. The whole point of Bootstrap is that it lets you factor in your own needs and tailor your development project accordingly. (David, 2013)

3.   Factor in the Design

        3.1.   The Grid Speaks

        On default mode the platform provides a 12-column grid, which is 940px wide. A single column holds 40px with an additional 20px acting as the gutter. Rows and spans can be manipulated as needed. Styling is completed in auto mode and a developer can get the job done just by dropping content into the HTML they’re working with. (David, 2013)

        3.2.   LESS is more

        LESS has in reality gone ballistic within development circles. With its additions to the Bootstrap platform, you can use LESS mixins and CSS manipulations to customize the built-in grid. Bootstrap takes some of the most popular CSS3 utilities and brings them to life as a homogenous reaction on all browsers. (David, 2013)

        3.3.   JavaScript

        Bootstrap comes equipped with JavaScript libraries. JavaScript often becomes an integral part of a web design and developers have to pull in all elements together to see the final form flourish. With Bootstrap, a developer can easily manipulate modal windows alerts, tooltips, Scrollspy, Popover, Button, Typehead, etc. (David, 2013)

4.   Consistency

One of the main reasons this toolset was developed was because Twitter was seeing big inconsistencies between developers working on their projects. This caused some issues both on the development front and the end-user front. Since it works with a central set of development code, Bootstrap’s results are uniform across platforms. You’ll see the same thing on Internet Explorer, Chrome and Firefox. (David, 2013)

5.   Integration

If you use table styling, all you need to do is take the styles you need and copy them to the CSS file you’re working with. Bootstrap will immediately kick in with its own style and all you need to do from there is link up the file you are working with or hotlink to Twitter. (David, 2013)

6.   Responsiveness

Bootstrap is responsive. If you shift from a laptop to an iPad and from an iPad to a Mac you won’t have to fret over your work. Bootstrap adapts to the change in platforms with super speed and efficiency. (David, 2013)

7.   Future Compatibility

Bootstrap comes equipped with many elements that are being considered the future of design itself. For instance both HTML5 and CSS3 are things that are going to be big in the future. (David, 2013)

8.   Competitiveness

Bootstrap has been pitted against JQuery UI and the HTML5 Boilerplate, but a more realistic competitor is the Zurb Foundation. (David, 2013)

9.   The Docs Talk

Bootstrap’s documentation is impressive. Bootstrap gives you a head start because you don’t have to play with everything to learn and instead can find information on just about anything through the documentation. (David, 2013)

10.   For the Bosses

You don’t need to spend a lot of time learning to use Bootstrap, as compared to HTML and CSS. Bootstrap allows for immediate quality work, which makes it great for facilitating efficient, outcome-oriented design communication. (David, 2013)

           I hope I managed to introduce Bootstrap to you in a good way and that you would give it a try. You do need a working knowledge of web development concepts like HTML and CSS to get the ball rolling. It is very easy to use it. The first thing that you need to do is to visit the Bootstrap download page. You can either download the framework from their homepage or you can download a customized version, which gives you a choice of what you need or want. The documentation that comes with the platform can walk you through the different tools and components you’ll be working with, for example Base CSS, Scaffolding, JS plugins, etc.



David, Natalia. (2013). 11 Reasons to Use Twitter Bootstrap. SitePoint. Retrieved 04/13/13 from

Hamp, Simon. (2013). Built With Bootstrap. Built With Bootstrap. Retrieved
04/12/13 from

Otto, Mark. (19/08/2011). Bootstrap from Twitter. Retrieved
04/12/13 from

Reuven, M. Lerner. At the forge: twitter bootstrap. 2012(218). Houston, TX : Belltown Media.
Retrieved 04/13/13 from ACM Digital Library. (Document. No. 6).

Vedran, Cindrić. (2012). How to use Twitter Bootstrap to Create a Responsive Website Design. OnExtraPixel.
Retrieved 04/12/13 from

Yegulalp, Serdar. (2012). Review: Free mobile-friendly Web design frameworks. San Mateo: Infoworld Media
Group. Retrieved 04/12/13 from ABI/INFORM Complete. (Document. No. 1040848417).