Blog

Getting your next project started with Twitter Bootstrap

March 22nd, 2013

One of the greatest challenges when getting started on web, or mobile web software project is getting the UI designed and organize, let alone actually coded. Fortunately Mark Otto of GitHub and Jacob Thornton of Twitter have built a simple, flexible UI framework that’s easy to use, and fairly easy to implement as well.


bs1

1. Getting Started

First of all, you’ll need to head to the GitHub site and download Bootstrap. The primary download will get you the whole package, which is the easiest way to go about it. However, if you already have an idea of exactly what UI element you will, or won’t need, you can customize your download by cherry-picking only the pieces you’re sure you’ll need.

If you also would like to skip the actual templating part of the process as well, there are even some basic examples you can grab the code from, to get started even faster.


bs2

2. The Bootstrap Grid.

Twitter Bootstrap works on a 12-column grid system, which you can implement in a static, or fluid layout. These columns, which are grouped by each row they are placed in, can be nested or offset in an extremely wide variety of ways to satisfy almost any layout or design requirement. Also built in is the ability to make this grid work responsively for mobile devices. The dimensions at which these responsive points are triggered have, at the date of this blog being written, been designed to the greatest common denominator amongst mobile hardware, so you can be assured that your layout will behave the way you want, on the hardware you want.


bs3

3. UI Elements

Included in the framework, is pretty much any essential UI element you can think of for web and web software design. Everything from basic typography and layout styling, to navbars, toolbars, tables, and forms. The implementation of these is enhanced by their clean and structured, but fairly simple markup, allowing a great deal of flexibility, if customization is required. Also included within the main Bootstrap bundle as well is a complete icon set, courtesy of an agreement with Glyphicons, that will allow you to the put those finishing touches on your interface for a polished and professional look, with minimal effort.


bs4

4. JavaScript Components

One of the most valuable features of Bootstrap, in terms of sheer time saved during development, is the toolkit of Javascript functions to help bring functionality to a variety of UI elements. Complete with jQuery-driven transitions and behaviors, the addition of these scripts allows you to seamless integrate already-functioning tooltips, alerts, progress bars, popup menus, scrolling behaviors, image galleries, and other dynamic UI features to help bring your web project to life right away.


bs5

5. Conclusion

In addition to all these well-built and read-to-run features, of course the nicest thing about Twitter Bootstrap, is all this is freely available. You can simply plug it into your project and let it handle all the UI work, or build your very own custom library, based off the essentials in the code. There is quite a large community that has sprung up around the Bootstrap framework as well, meaning that community support and issue tracking, as well as developer involvement or input with the project, is fairly easy to come by. Also, the flexibility of Bootstrap allows for it to be used for almost any project, even if only the grid is used. I would highly recommend its use for anyone embarking on a web or web software project.