Bootstrap? I've heard of that
Maybe you've heard of bootstrap before, maybe you have no idea what it is, or maybe you use it daily for rapid mobile first development. Either way, bootstrap is something anyone who thinks they are a web developer should know about. One of the most popular repositories on Github currently, bootstrap is a widely used open source library for styling and organizing elements on web pages. Origanally created in 2010 by a very small team at Twitter for their own in-house use to help elimate the inconsitencies with using multiple libraries for stylings. Quickly it became appearent that bootstrap, at the time called Twitter Blueprint, could be much more, it was worked on and released as on open source project, being renamed to Bootstrap. Major milestones in the project include Version 2, which introduced optional mobile layouts and the popular "grid" framework that Bootstrap is famous for. Version 3 was a major rewrite and moved to mobile first approach, so mobile layouts were the main focus. Current release is v3, however a beta for v4 has been out since 2015 and will soon be in production use. Version 4 has switched to using flex-box for most of their layouts, also switching to SaSS as the css pre-compiler rather than the previously used less.
A major reason developers choose to use bootstrap is the easy integration with clean, modern styles and layouts with a mobile first responsiveness. Using Bootstrap now is very similar to using the new css flex-box, however Bootstrap adds many layers ontop of it, so unless you need complete customization of the styles Bootstrap would be the recomended approach for rapid developement. However there is a downside. Since BootStrap is based upon a grid system, almost every website that uses BootStrap can be instanly recognized as such. Unless time is spent changing all the stylings for BootStrap classes, which defeats the purpose of using it, then websites start feeling similar. This can be a good thing, as it makes websites more intuitive to use becuase they all have similar layouts, but can be bad if orignallity is what you are striving for. Below is a table of their grid system and its breakpoints.
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
BootStrap isn't just about the grid though, it contains many useful themes and styles for commonly used things such as Navs, forms, buttons, dropdowns, scrollbars and much more. BootStrap has grown to become a major player in the world of Front End developement, and is a must have in the stack for many developers.