A brief introduction to bootstrap framework features

A brief guide why use bootstrap framework ?

why use bootstrap framework

Bootstrap is a front end development framework to create beautiful, fully responsive websites. It was created by Mark Otto @mdoand Jacob Thornton @fat, who were designer and developer at Twitter.

initially Bootstrap was called twitter Blueprint, when it was first created in 2010. In August, 2011 Bootstrap was released as an open-sourced framework. In this article i will discuss why use bootstrap framework to create mobile first fully responsive websites.

In version 2, bootstrap team added responsive functionality to the entire framework as an optional style-sheet. Version 3 of bootstrap was a major release, complete library was rewritten to make Bootstrap fully responsive by default.

Front-end refers to the client side of website, that’s the part of a website a visitor sees in the browser. A front-end development framework is a bunch of code that is written for you already, that you can use to build great websites quickly and easily without spending weeks or months to learn HTML, CSS, best practices etc from scratch.

Twitter Bootstrap has a comprehensive documentation to get started in English. Community members have translated Bootstrap’s documentation into Chinese, Spanish and Russian languages. None are officially supported by Twitter Bootstrap and may not always be up to date.

Why use bootstrap framework ?

There are many reasons to use Bootstrap framework. You will be able to create beautiful and fully responsive website quickly and easily without learning a lot of coding, best practices and CSS3 media Queries from scratch. Media Queries used to make your static websites responsive.

You can learn Bootstrap in a few days but it will take months or years to be an expert in HTML, CSS, Responsive design and JavaScript. Writing code is not difficult but writing bug free, semantic code with industry’s best practices that will work on different browsers is a really difficult.

Twitter Bootstrap Features

CSS Styles

Twitter Bootstrap is a mobile first framework, it means your websites will be fully responsive and will work on desktop, tablets and smart phones. You can make images responsive by adding .img-responsive class in bootstrap 3. For improved cross-browser rendering, Bootstrap uses Normalize.css, a project by Nicolas Gallagher and Jonathan Neal.

Responsive Grid System Twitter Bootstrap

Twitter Bootstrap has a 12 column responsive, mobile first grid system, which uses predefined classes like .container to create a primary wrapper for your web page, .row .col-xs-4, .col-md-1, col-md-4 and others to create grid layouts quickly and easily.

You can use .col-xs-* to target small screen devices such as mobile phones, .col-md-* will target medium devices like tablets, desktop and .col-lg-* will target large screens. * will be replaced with your desired number for grid layout.

For example you can create 2 column layout easily with .col-md-8 for main area and .col-md-4 class for sidebar.

Twitter Bootstrap Classes are available for Mobile, tablets and desktops. With Twitter Bootstrap’s these classes you can easily create multi column layouts.

Advance users can use LESS mixins to create more semantic layouts.

For example to create a 2 column layout you can use following code.

<div class="container">

    <main class="row">

        <article class="col-md-8">
           primary content
        </article> <!--end .col-md-8-->

        <aside class="col-md-4">
            sidebar content
        </aside><!--end .col-md-4-->

    </main> <!--end .row-->

</div> <!--end .container-->

Typography in Twitter Bootstrap

Bootstrap offers many classes to style heading, text, paragraphs etc. Alignment classes .text-left, .text-center, .text-rightallows you to easily realign text with available text alignment classes.

Emphasis classes .text-muted, text-primary, .text-success and other classes will color your text. styling for lists, block quotes, code is also available.

Tables styling in Twitter Bootstrap

Creating and styling tables are very easy with bootstrap, you can apply .table-striped, .table-bordered, .table-hover, .table-condensed to apply styling to whole table or use contextual classes .active .success .warning and .danger to color table rows or individual cells.

Making Tables Responsive

Creating responsive tables is simple by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px).

Forms in Twitter Bootstrap

Creating different type of form with bootstrap is also simple and easy. Since version 3 of Twitter Bootstrap inputs, selects, and text areas are 100% wide by default in Bootstrap framework.

You can use predefined grid classes to align labels and groups of form controls in a horizontal layout. Form states will allow you to provide feedback to users.

Buttons and images

Creating beautiful buttons are easy just apply available classes to change the size, color or state. There are many classes available to style buttons, such as .btn-primary will make your button blue, .btn-success will add green background and btn.danger will add red background to your button.

Even .btn-lg, .btn-sm, .btn-xs and .btn-block are available to make buttons large, small, extra small and block.

Bootstrap offers .img-rounded, .img-circle and .img-thumbnail to style images. These classes will make your images square, round and add border to your images.

Image replacement is simple just apply .text-hide class to replace an element’s text content with a background image for example for site logo.

Faster mobile-friendly development with Responsive utilities

One of the cool feature of bootstrap 2 was the ability to mark the content so that it only appears in certain devices. That remains in the new version but class names has been changed in version 3.

Bootstrap 3 offers 8 different classes to show or hide content from screen. For example if you apply .visible-xs to an element, it will only be visible on extra small devices Phones (<768px) and hidden on tablets and desktops.

print classes are also available for toggling content for print. You can use .visible-print to show and .hidden-print class to hide content while printing content.

Pre built Components

Pre built components are one of the most cool feature of Bootstrap. Many components are available to make your work flow faster, which includes drop downs, button groups, navigation menus, breadcrumbs, pagination, labels, thumbnails, alerts and many others.

Lets have a look at some of them in details.

Glyphicons

Since version 3 bootstrap included 200 glyphs in font format. It is a welcome change because they can be resized and will display perfectly even if the resolution of the screen increases.

It also gives you the ability to color icons, before version 3 of twitter bootstrap you can only use white or black version of icons.

Dropdown and Navigation Menus

Bootstrap uses drop-down JavaScript plug-in for drop down items. Drop down can be used with buttons and nav menus. There are many nav menus available in Bootstrap that can be styled differently with .nav-pills, .nav-tabs, .nav-stacked. and .nav-justified. You can use .nav-justified make tabs or pills equal widths of their parent at screens wider than 768px .

Jumbotron and Thumbnails

Jumbotron is a big area usually spanning the width of web page. Jumbotron is great to draw user attention. It is main component for calling extra attention and to show featured content or information.

Thumbnail component can be used to easily display grids of images, videos, text, and more. Create products pages or use to show any related information. It is possible to add heading, paragraphs and buttons into thumbnails.

List groups

List groups component lets you create mobile like lists with a lot of different options. You can create an unordered list with a class of.list-group and list-items with .list-group-item class. You can easily add badges to list items or make them click able links by making them into anchor tag..

JavaScript and JQuery plugins

Bootstrap uses a number of JQuery based plug ins, JQuery is one of the most popular JavaScrit library. These plugins includes Modals , Dropdowns, ScrollSpy, Tab, Tooltip, Popover, Carousel and many others.

Carousal is one of the most popular feature of bootstrap. It can be used to create slide show of featured products or images.

Twitter Bootstrap and Browser Support

Bootstrap will work best in the latest desktop and mobile browsers, older browsers might display differently styled, though fully functional, renderings of certain components.

Twitter Bootstrap supports the latest version of Chrome, Safari, Firefox, Internet Explorer and Opera browser.

According to official bootstrap documentation

Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.

Internet Explorer 8 and 9

Internet Explorer 8 and 9 are also supported, however, some CSS3 properties and HTML5 elements are not fully supported in Internet Explorer 8 and 9 .

Internet Explorer 8 does not support border-radius, box-shadow, transform, transition and placeholder.

Internet Explorer 8 requires the use of Respond.js to enable media query support. Respond.js is a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).

Support for Less and Sass

Less and Saas support is also available and you can download your desired version of Bootstrap from getting started page or visit official Sass port of bootstrap on Github

Download Twitter Bootstrap

Download Pre Compiled Version

Bootstrap offers a lot of features. You can download pre compiled version at getting started, which includes 3 folder CSS, Fonts and JS with minified and non minified files.

Download Twitter Bootstrap with source code

You can download Source code directly from github with LESS, JavaScript source and example files. You can visithttp://getbootstrap.com/getting-started/ to download compiled and minified version.

Customize and download

Every project has different requirements, Not all components are required in every project, you can choose what you need, for example if you want to use Grid system only, you can visit Bootstrap’s customize page and select components and features you want..

Visit Twitter Bootstrap’s customize page select features you want and click Compile and download. if you haven’t used this powerful framework visit Bootstrap’s getting started page to learn how to use this powerful framework.

Twitter Bootstrap is very powerful framework to create fully responsive web pages quickly and easily, Bootstrap makes your work flow much faster and easier.

I often use this framework to create responsive WordPress themes quickly, have you used this awesome framework, how do you use it, share your views in comments.