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.
Bootstrap offers a standard 12 column grid system which scales depending on device or viewport size.
The grid system consists of three main components:
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.
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.
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.
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.
There are a number of very useful built-in CSS classes in Bootstrap which can be used.
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.
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:
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.