Any new idea needs rapid prototyping. In case of startup, it is both important to reduce costs and have done current development iteration as soon as possible. Generally, there are tools to help you move this way. Bootstrap [] is a must-have solution, when we are talking about fast web design and prototyping, but want to avoid wasting our time on standard Usability and UI design.


First of all, Twitter Bootstrap is a pure front-end HTML/CSS framework freely provided by Twitter team. It’s not a JavaScript library for coding on client side like jQuery or AngularJS. Main purpose of Bootstrap is providing nice professional look-and-feel out of the box for the most general use cases of modern web. You have to keep in mind all features to hold the project in cross-browser state, but it’s not a problem anymore for Usability and UI design. Bootstrap supports all modern browsers. The framework holds under control typography and basic HTML elements like headings, lists, tables, etc. Grid system is available out of the box. It allows to compose almost any web layout splitted into columns with sidebars, header and footer. There are ready to use standard components like drop-down menus, form elements, all kinds of buttons, image thumbnails and various text formatting cases.


Modern web has a responsive design. Bootstrap version 3 was built for Mobile-first web design approach. It means, we start with creating of look-and-feel for small smartphone display, then extend the view for more wide screens of tablet and desktop. Grid system supports special scheme of CSS classes for providing various layouts for different screen width. We can easily show and hide some elements for specific width. Navigation bar in the header of the page has responsive behaviour as well. It provides nice set of buttons for the desktop resolution and correct drop-down menu system for mobile screen width.

Beyond the framework

Nowadays, Bootstrap is not just a framework. There is close integration with another popular web libraries like jQuery, AngularJS, Ruby on Rails, etc. There are even commercial online services like Jetstrap and Divshot, that provide ability to sketch any page or even whole web site design based on Bootstrap without any coding at all by drag-and-drop technique of their pure visual editing tools. Bootstrap may be used as solid component integrated into your web project as is, or built in custom way by LESS or SASS preprocessor. LESS is used by default. Bootstrap supports themes concept. All pure visual features (like fonts, colors, borders, etc.) are placed into separate file, so you can change it without touching the core, or even download third-party Bootstrap theme from Bootswatch site [].


There are plenty variants can be used instead of Bootstrap to success in Usability and UI design. Zurb Foundation [] is the most advanced responsive front-end framework at line of its customization abilities. Web developer doesn’t stick to the framework so close, as he have to in case of Bootstrap. There are more abilities to create custom look-and-feel with irregular behaviour, use any custom UI controls, integrate additional library or framework. On the other hand, a lot of even standard components you have to implement by hand. So, you better think twice when you choose front-end framework for your next web project. If it is a long term project and your art team have already approved templates with original complicated UI/UX features, you better use Foundation framework or even implement pages by pure HTML/CSS. In opposite case, if you need to have things done as soon as possible, you rather use Bootstrap.