twitter Bootstrap
Twitter Bootstrap
It’s all about stepping into
the right boots!

Bootstrap from Twitter is a sleek, intuitive, and powerful front-end mobile first framework for faster and easier web development. It provides free collection of tools useful for creating websites and web applications.

A brief about Bootstrap

  • Collection of CSS and HTMl conventions
  • Uses latest browser techniques
  • Provides stylish typography, forms, buttons, tables, grids, navigation and a lot more
  • Built with LESS framework
  • Provides a uniform solution to the most common, everyday interface tasks developers come across

Mark Otto (@mdo) and Jacob Thornton (@fat) released Twitter Bootstrap to the world in August 2011

Bootstrap functionalities and features - A deeper look!

Twitter Bootstrap

Scaffolding Feature

With Bootstrap you get a 12 column grid with two options:

Fluid - if you need your website to be 100% wide and use up all the width of the screen you should choose this option.

Fixed - if you're creating a standard website you probably won't be needing all 100% of the screen so you may choose the 940px option for example.

Apart from the scaffolding feature, it also offers global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

Base CSS

Bootstrap provides fundamental HTML elements, styled and enhanced with extensible classes.


There are dozens of reusable components built to provide navigation, alerts, popovers and more with Bootstrap.


Bootstrap also features 13 custom jQuery plugins that bring the components to life. There are tooltips, popovers, modals and more to look out for.
Some scenarios where you can
resort to Bootstrap

Building an app from scratch without a visual designer? Have a very limited time frame available for front-end development? Then this is for you.

Want to set
benchmarks, best-practices, processes and standards within your front-end engineering team? Most of the techniques and strategies used in this framework are worth adopting for a team of front-end

If you have a solid understanding of the basics of CSS, markup and JS, Twitter Bootstrap is for you. It has well defined rules for HTML and CSS.

It’s one of the best FRAMEWORKS
undoubtedly – Here’s why?
Twitter Bootstrap

Twitter Bootstrap Usage Statistics Websites using Twitter Bootstrap


This chart shows that out of the top 1 million sites, around 28784 sites utilize Twitter Bootstrap effectively. The popularity is increasing gradually. To cope up with the interactive web environment, it is vital to go for a framework like Bootstrap.

How is it different from
other frameworks?
Twitter Bootstrap is a complete web development framework, converging all the 3 key aspects of a UI – HTML, CSS and JS and stands apart when compared to other frameworks.
The framework allows the developers to use set of visually pleasing UI elements and not just build pages with out-dated style elements.
It is cross browser and device compatible. Alongside, it also embraces the mobile space and provides mobile-optimized (RESPONSIVE) design.
It is open source, available on gifthub and also provides HTML5 and CSS3 support.
Twitter Bootstrap has an extensive UI library for a wide-range of web applications like carousels, accordions and more.
It has robust documentation, strong feature set, and community support making it one of the most popular frameworks.
Design Considerations
for Bootstrap
Infographics Design Layout
3 text
5 table
6 select_box select_box
7 select_img select_img
8 480_device 768_device

1)   While designing for Bootstrap, use a 12 grid structure to create the design.

2) Bootstrap provides a set of 200 Glyphicons and therefore, rather than using custom icons, it is advisable to use Bootstrap Glyphicons available on

3)  Keep the typography restricted to the style provided by Bootstrap (only change the font if required). Overhauling it completely may hamper the development.When it comes to typography, a common rule of thumb is to limit lines of text (i.e., the measure) to 50-75 characters for improved readability. To put it in Bootstrap terms, your text should use 6 columns at most, given the default 14 pixel font size.

4)  By default, Bootstrap often doesn’t provide sufficient margins and paddings. Adding whitespace in design might improve the readability.

5)  If the Bootstrap theme design requires using tables, the tables should match up to the Bootstrap table styling. It might be difficult to adapt to the custom table styles in Bootstrap.

6)  When designing for Bootstrap, it is also advisable to design form elements with the user interface compatible with Bootstrap. Using custom radio buttons, submit buttons and select boxes might create issues in the coding.

7)  Provide the optimized images for each viewport size as well as high-density/retina displays.

8)  Design mobile version first and keep a 480px wide version with content spanning 450px and 15px gutters down both sides. Keep tablet mock-up 768px wide.

Customizing with
Bootstrap Best Practices


Learn about customizing Bootstrap themes from the documentation available on Twitter Bootstrap.

Match the selectors

If you are overriding Bootstrap’s styles using CSS; when overriding a class, try to use the same selector that Bootstrap uses.

Use original generator

If you are generating a custom build code, generate it from the original generator.

Encapsulate your code

Digging deep into LESS framework will also allow you to customize the code. Install LESS, modify the LESS and recompile with the old file with the new custom file, but whatever you do encapsulate your code.

Add Assets & Alpha Transparency

Add some assets like custom fonts and textured background for a better look and feel. Use alpha transparency and pick up a right color palette and scheme matching your brand guidelines.

Start with supporting variables first

Whether you are using a generator or editing the source, begin your modifications with the supported variables first. They might be sufficient for your small needs.


It’s easy to start with Bootstrap, however consider below points before jumping into Bootstrap. Twitter Bootstrap
  • Twitter Bootstrap can sometimes create conflicts with existing HTML and CSS files. Moreover, finding bugs is time-consuming.
  • As it’s built with LESS it doesn’t provide native support for Compass and SASS.
  • Twitter Bootstrap builds an attractive, responsive website, but if not built correctly, it can slow down the speed of the site.
  • Bootstrap doesn’t provide fallbacks for users without JS or those who disable JS.

Keep in mind that Bootstrap is fully customizable and powerful, if used correctly.

Webby Monks

Webby Monks offers MAGICAL PSD TO BOOTSTRAP CONVERSION WITH A BEST IN CLASS QUALITY HTML that is cross-browser compatible, mobile-optimized and W3C validated. With 50+ custom Bootstrap projects and a gallery of 100+ interactive components, Monks are the maestros of custom Bootstrap mobile first framework development. Get your PSD to Bootstrap conversion today!

Embed this infographic:

Stats to Tweet/Share:
  • Infographic - Essentials of building sites with Twitter Bootstrap! [ Tweet This ]
  • Bootstrap comes with numerous functionalities & features, check out our #Bootstrap Infographic [ Tweet This ]
  • Around 28784 sites of the top 1 million sites use Twitter Bootstrap [ Tweet This ]
  • Bootstrap provides a set of 200 Glyphicons and uses a 12 grid structure [ Tweet This ]
  • Webby Monks offers MAGICAL PSD TO BOOTSTRAP CONVERSION service [ Tweet This ]