Bootstrap is arguably the daddy of all the frontend frameworks currently available on the web and with the list of features as long as a one page website and with version 3 built upon mobile first principles it’s easy to see why.
In this article we’re going to cover some of the main features and components as well as some lesser known built-in classes which are extremely useful.

Grid System

Bootstrap offers a standard 12 column grid system which scales depending on device or viewport size.

The grid system consists of three main components:

Container
The container provides padding so that the content of the webpage never touches the edges of the browser; this is done with 15px padding on the left- and right-hand sides.
Row
The row class is where the columns will inhabit, it acts as a wrapper due to the fact that all columns float left. This ensures that rows either above or below do not overlap due to weird float issues. Rows also have negative 15px margins on either side which negate the 15px padding of the container.
Rows must always be used inside either a container or a column.
Column
Each column is set as a percentage (8.333333%) of the available width and every column has 15px padding on either side to act as guttering. Columns must always be used inside a row.

Nesting Columns

Due to the fact that all columns are percentages this means that a column can act as a container and give us the ability to nest columns within columns. However, when doing this it is important to remember that when stacking columns, you must insert a row before the nested columns to negate the padding on the parent container.
For a more in-depth explanation of the Bootstrap grid please read this article from Erik Flowers – The subtle magic behind why bootstrap 3 grid works.

Glyphicons

Bootstrap comes with 260 glyphs in font format which have been donated to Bootstrap free of cost by their creator. These icons can be used in place of images and be used in any number of situations such as buttons or alerts.
http://getbootstrap.com/components/#glyphicons

Jumbotron

The jumbotron is a large advertisement component named after the large-screen television typically used in stadiums. This is typically used to showcase key content on your website and can be limited to the size of the container or full width.
http://getbootstrap.com/components/#jumbotron

Carousel

The carousel is a standard part of many websites these days so it’s not surprising that Bootstrap has its own inbuilt version. Built from the ground up to be responsive and allow for textual content as well as images to be displayed within each slide.

All animations are done using CSS3 transitions which are not supported in IE versions 9 and below and there is no jQuery fall-back.
http://getbootstrap.com/javascript/#carousel

CSS helper classes

There are a number of very useful built-in CSS classes in Bootstrap which can be used.

Responsive Images

True responsive images technologies have yet to be properly embraced by the web community and currently there are a number of different possible solutions. However, none of these are included within Bootstrap due to support issues. As such, Bootstrap have decided that the best way for them to support responsive imagery is their img-responsive class which sets a max-width of 100% onto the image and height auto.

Image shapes

These image shape classes allow for easy styling of images to fit a multitude of designs. Merely add the appropriate class to the image tag and voila you’ve got a styled image. Bootstrap offers the following options:

img-rounded
img-circle
img-thumbnail

Less

For those who are not familiar with Less, it is a pre-processor which allows you to perform dynamic operations within your stylesheet with the use of variables and mixins.

Bootstrap is built upon Less and this means that you could take the Less source and adapt the standard Bootstrap grid (such as changing how much guttering or the number of columns) or colours used by the standard Bootstrap classes.

This means that if you were to use Less, you open up a massive range of customisation of all Bootstrap components and elements.

These are just a small number of the elements which are available within Bootstrap and nearly all of the above can be customised with your own CSS or altered through the Less source. This means that the possibilities are almost limitless and Bootstrap gives us a good solid base to work from.

Introduction to Bootstrap