Speed Up Development Time By Using Twitter Bootstrap

Posted by & filed under Tech, Web Development. 14,419 views

Twitter is not a stranger to everyone, but do you know twitter has a free bootstrap framework for all of us to take advantage of? Yes, some of you might have already know about this, some other might just like me – found out not long ago. Honestly, I’m amazed but its capability and stability.

In short, Twitter Bootstrap is a simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. It comes with bundles of CSS styles, Components and Javascript plugins. There are quite a few frameworks that do the same thing, but I reckon Twitter bootstrap is the most comprehensive and covers most UI component that you will needed to build a website or web application. Just briefly, this is what they have at the moment.

  • Grid Layout: 12-Column Grid, fixed layout, fluid or responsive layout.
  • Base CSS: for Typography, code (syntax highlighting with Google prettify), Tables, Forms, Buttons and uses Icons by Glpyhicons
  • Web UI Component: Buttons, Navigation menu, Labels, Thumbnails, Alerts, Progress bars and misc.
  • Javascript plugins: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and Typehead.
  • It uses LESS, so you can update the style according to your needs.

True Story

Personally, I have had a chance to use it in one of my projects few days ago, basically I used it to build a quick prototype of an event website, about 4 pages plus a contact form and a lengthily registration form. That was my first time using it, I was able to pick it up really quick and  finished the websites (with Javascript and PHP) in just 3 hours. During the development, I can see a lot of benefits of using it:

  • Cross platform support: It eliminates major layout inconsistencies
  • I don’t have to worry much about CSS, in fact, I just have to play with spacing once a while.
  • Everything just works! Good documentation I must say, And the Twitter Bootstrap’s website itself is a very good reference for real life example.
  • It’s semantical, everything makes sense and in best practice as well.
  • Finally, it saves me heaps of times! Pretty sure it cut the development time to half. Less testing, less browser issues.


  • Grid Layout
  • Table
  • Form
  • Buttons
  • Icons
  • Basic tabs, basic pills, stacked tabs, stacked pills, tas with dropdowns, pills with dropdowns, nav with icons
  • More tabs, breadcrumb, pagination, inline labels, alerts

Javascript plugins

It also includes a dozen ofbootstrap plugins! It will be great if there’s a datepicker and slider though 🙂

  • Modals
  • Dropdowns
  • Scrollspy
  • Togglable tabs
  • Tooltips
  • Popovers
  • Alert messages
  • Buttons
  • Collapse
  • Carousel
  • Typehead
  • Transitions


Twitter doesn’t pay me to write this article :p This is a great stuff, and great stuff should be shared to everybody! As I said before, this bootstrap can really save a lot of times, in fact, I should have used this to build my custom CMS, I would able to concentrate more on server side scripting and cut my development time to half! Alright, I hope you will find it useful as well. Do share it with us what do you think and your experience with it. For more useful article, latest update about web development, stay tuned with favbulous!



9 Impressive WebGL Javascript Effect Showcase
Make A Beautiful Carousel with carouFredSel and UI Kit from Design Deck
3 Most Flexible And Comprehensive UI Frameworks For Building Websites