Bootstrap Framework Features

Based on the analysis done on the Boot Strap Framework for Responsive Designing we have
come with a list of features provided in the framework which can be used for rapid prototyping
and development of device independent websites.
Overview
Highlights

Description

Summary

Large user base

Grids: Fluid and fixed

UI tools: Lots of widgets; good for rapid prototyping

History: Built by Twitter as a style guide for internal tools

Version

2.3.1

Last

Mar 1, 2013

Released
Website

twitter.github.com/bootstrap

GitHub

github.com/twitter/bootstrap

Creator

Twitter

License

Code: Apache License v2.0

Documentation: CC BY 3.0
Icons: CC BY 3.0 from Glyphicons Free

Browser

Desktop: Chrome, Firefox, Safari, Opera, IE7+

Support

Mobile: "tablets and smartphones"

Comments

Bootstrap 2.3.x is the last release cycle before 3.0.

Bootstrap is a full featured solution for making a responsive website. Out of the box, styling is
minimal but elegant for making prototypes.
The component and plugin library is good and community support continues to grow. Overall,
Bootstrap is a great framework to streamline the process of development.

CSS
Highlights

Description

Reset

A modern, HTML5-ready alternative to CSS resets. Normalize.css makes browsers render

(Normalize.css)

all elements more consistently and in line with modern standards. It precisely targets only
the styles that need normalizing.

LESS

LESS extends CSS with dynamic behavior such as variables, mixins, operations and
functions.

Grids and Responsiveness

Highlights

Description

Base width

Fluid and fixed (724px, 940px, 1170px; below 767px are single column and vertically
stacked)

Columns

12

Single column class

syntax

.span1

Two column class

.span2

syntax

Container syntax

<div class="container>
or
<div class="container-fluid">

Row syntax

<div class="row">

Highlights

Description

<div class="span4">...</div>
<div class="span8">...</div>
</div>

Nested column
syntax

<div class="row">
<div class="span6">
<div class="row">
<!-- nested columns add up to parent total -->
<div class="span3">...</div>
<div class="span3">...</div>
</div>
</div>
</div>

Offset column
syntax

<div class="row">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div>

Visibility class

Device based:

syntax

.visible-desktop
.visible-tablet
.visible-phone

Highlights

Description

.hidden-desktop
.hidden-tablet
.hidden-phone

Media queries
syntax

/* Landscape phones and down */

@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... }

UI and Widgets
Highlights

Description

Alerts

Wrap any text and an optional dismiss button in .alert for a

basic warning alert message.

Breadcrumbs

Create breadcrumbs for website.

Buttons

Creating buttons and button groups using different css.

Button styles can be applied to anything with the .btn
class applied. However, typically they are applied to <a>

Highlights

Description

and <button> elements for the best rendering.

Carousel

Create image sliders for website

Collapse/Accordion

Get base styles and flexible support for collapsible

components like accordions and navigation.

Dropdown

Get base styles and flexible support for collapsible

components like accordions and navigation.

Forms

Individual form controls receive styling, but without any

required base class on the <form> or large changes in
markup. Results in stacked, left-aligned labels on top of
form controls. There are three optional form layouts
included with Bootstrap for common use cases.

Grids

It allows creating a 12 grid layout in both fluid and fixed

styles.

Icons

140 icons in sprite form, available in dark gray (default)

and white, provided by Glyphicons.

Labels

Create labels and badges and apply predefined CSS to see

labels for different status like Warning, Success, Info
etc.

Lists

Create different types of lists with use of predefined css.

Modal window

Modals are streamlined, but flexible, dialog prompts with

the minimum required functionality and smart defaults.

Highlights

Description

Navigation

To start, navbars are static (not fixed to the top) and

include support for a project name and basic navigation.
Place one anywhere within a .container , which sets the width
of your site and content.

Pagination

Simple pagination inspired by Rdio, great for apps and

search results. The large block is hard to miss, easily
scalable, and provides large click areas.

Popovers

Add small overlays of content, like those on the iPad, to

any element for housing secondary information. Hover over
the button to trigger the popover. Requires Tooltip to be
included.

Print styles

Support for optimized print css for generating printer

friendly pages.

Progress bars

Create Progress Bars to display the status for loading,

redirecting, or any other time taking action.

Scroll Spy

The ScrollSpy plugin is for automatically updating nav

targets based on scroll position.

Tables

Create HTML tables with light padding and only horizontal

dividers using predefined CSS classes.

Tabs

Add quick, dynamic tab functionality to transition through

panes of local content, even via dropdown menus.

Thumbnails

Create Grids of images, videos, text, and more. By default,

Bootstrap's thumbnails are designed to showcase linked
images with minimal required markup

Highlights

Description

Tooltips

Add quick, dynamic tab functionality to transition through

panes of local content, even via dropdown menus.

Type Ahead

A basic, easily extended plugin for quickly creating

elegant typeaheads with any form text input. The typeaheads
can also be termed as Auto Complete Text boxes

Typography

Support for fully developed typography and mobile friendly

font sizes.

Pros

Works in all modern browsers

Normalizes many little CSS annoyances

Lightweight

Easily Customizable and Extensible CSS

Encourages use of LESS CSS (http://lesscss.org)

Gives consistency

Many starter templates available

Integrated with jQuery

Comes with some normally used jQuery plugins

Some jQuery plugins now offer Bootstrap theming

Customizable Download to include only those features which are required.

Cons

Weak when it comes to complex data entry screens. Of course, screens should be made
simple for users, but that doesn't mean a form might not be technically complex.
Sometimes, users are well-trained and want complex forms so that they can rapidly do
work.

jQuery plugins are limited. Certainly, we can integrate our own plugins, or find other 3rd
party controls, etc. But out of the box, we are missing the heavy-hitters, like tree views,
drag and drop, zoom etc.

Naming conventions and semantics are mediocre. Example: using the <i> tag for icons.
Class names like "pull-right".

It's very customizable, but inevitably many sites start looking alike (just like Word press
consider how many blog sites look the same).