Skip to main content

Hey guys,

in this post I want to give you some introduction into Twitter Bootstrap and tell you why I think that it is really awesome.

### What is it?
Twitter Bootstrap is a set of CSS classes, JS files and Icons which enable you to build fast and good looking websites, even if you are not a designer AND its like „ready, set, GO!“.
If you want, it is totally responsive to the client device/resolution. To be more precise, it optimizes the look and feel according to the capabilities of the device.
Additionally it provides you with cool, ready to use components which you only have to integrate. This library includes but is not limited to: navigation bars, alerts, popovers, buttons, labels, progress bars and many many more. They are build with pure HTML/CSS so they can be integrated into any webapp.
To make the framework more interactive, Bootstrap also provides a lot of JS-Plugins. With these it is possible to create modal dialogs, dropdowns, tabs, tooltips and many more.

_Pheww! Pretty much, but pretty cool!_

### How does it work?
Basically just go to the Bootstrap Homepage, download the current version and unzip it. Then you should copy at least the bootstrap.css (or the minified version bootstrap.min.css) to an appropriate path into your project (in my actual JEE Project its /src/main/webapp/resources/css) and include it in your HTML file(s).The best and most up to date way to get started in this direction is to look at the Bootstrap Homepage. It will show you the best way to integrate each of the components. In general, its like adding some divs, some css classes and you are done. Nothing too special. Even HTML beginners can do a good job if they follow the rules

### I want to see something!
Yeah, we all want to do this before investigating too much time. Well, ok. Lets have a look…Soo, of course the Bootstrap Homepage itself is made with Bootstrap.There are several websites listed which use Twitter Bootstrap.You can for example have a look at:http://soundready.fm/https://kippt.com/http://www.fleetio.com/http://www.jshint.com/I am using Twitter Bootstrap since mid 2011 and I always asked myself if I have to change the default theme to fit my needs. I also did this until I found out today that there are other, third-party themes available.You can find some here:Bootswatchhttp://stylebootstrap.info/This wasn´t enough to me so I searched on and I also found even more professional themes based on Bootstrap on WrapBootstrap.com. They have got really really good fully functional themes. One theme I want to point out at this points is Admin Simplenso. The author has build an incredible cool looking template which has a very wide range of functions and dummy data. When I first saw it I thought like „Wow, this would definitly fit into you admin panels“.

### Last words
Bootstrap has an amazing community around itself. As of today there are 29983 (!!!) watchers and 5940 forks! They are developing rapidly and there are always around 30-50 Rull Requests open waiting to be merged.I personally am thankful for such a great project. It saved me alot of time and if you have had a look at the results you can build pretty amazing websites with very simple to use techniques. From my point of view its worth a look and if you are looking for a HTML/CSS framework then you can´t make any mistakes with Bootstrap.What do you think? In which scenarios do you use Twitter Bootstrap? Do you have something fitting your needs in a better way? Do you have any improvements?Please let me know in the comments!Thanks for tuning in!w0mbat

Daniel Sachse

Author Daniel Sachse

More posts by Daniel Sachse