From Twitter Project to Open Source Gamechanger
Bootstrap started off as a proprietary Twitter project with its creators Mark Otto and Jacob Thornton looking at ways to make internal Twitter tools more consistent.
In August 2011, the creators decided to open-source Bootstrap (i.e. make it free to copy and change) and it morphed from being an internal Twitter tool to a toolkit designed to make front-end web development easier for any web designer or developer in the world. For the non-technical reader, front-end development simply means building the part which the client sees and interacts with rather than the engine that chugs away behind it.
Six years on, Bootstrap’s relevance is unquestionable. It is, after all, the second most starred project on the coders’ repository GitHub (behind the Free Code Camp tutorial project).
Bootstrap 2 came out at the beginning of 2012 but some wheels were already in motion that would influence the direction of Bootstrap 3: mobile technology was taking over.
 2013: Mobile Starts Taking Over
Even before the rise of mobile technology, web designers and developers would be struggling to bring together front-end components from different libraries. Coding to take account of different browsers and screen resolutions would be frustrating and inefficient. In 2013 and 2014, mobile devices such as smartphones and tablets exploded in popularity and overtook laptops and desktops as the most popular way to access the internet. Web developers needed to ensure that any new websites and apps they building were not only compatible with these displays but that they prioritised them. Mobile specific websites fell out of fashion overnight and were replaced by a demand for ‘responsive’ websites that could adapt to any kind of display.
In short, the whole area of front-end development had to be redesigned and Bootstrap was in the perfect position to take advantage.
In August 2013, Bootstrap 3 was released – the first version to be built on a ‘mobile-first’ basis. Now developers had a way to create amazing responsive themes without having to write lines and lines of extra code.
Bootstrap Key Features
Bootstrap is a framework which bundles together various components that control the way a website looks and functions while offering plenty of add-ons for extra customization. There are also several configuration variables that can be adjusted to suit different types of website. In short, using Bootstrap takes away a lot of the hard work of writing customized code to ensure compatibility across devices and browsers.
Other benefits of Bootstrap include:
- Less code repetition across different projects
- Consistent design
- Quick and simple prototyping
- Teamworking with other developers
Prior to Bootstrap, front-end developers might source elements from various different libraries and try and connect them together. This not only adds time and stress to the development of websites, it also translates to a more expensive product for the end user.
Bootstrap contains code written in the three major languages that form the key to most modern day websites. That is HTML, CSS and JavaScript. For the uninitiated, HTML (Hypertext Markup Language) controls the basic functionality of the website, CSS (Cascading Style Sheets) handles the style (layout, colors, fonts, etc.) and JavaScript adds the dynamic elements that bring the site to life. The framework also includes jQuery – a popular JavaScript library – in the JavaScript file. When installing Bootstrap, you will also come across other terms (e.g Sass, Grunt, Gulp ,bower, npm, etc.) but these are mainly processes that run behind the scenes (preprocessors, installation aids, task runners, etc.) and are nothing to be afraid of. If you are familiar with HTML, CSS and JavaScript, you will be fine with Bootstrap.
One of the most useful features of the Bootstrap toolkit is its 1170px grid with columns which automatically vary in width to suit different displays. For example, the grid will arrange itself differently depending on whether a site is being displayed on a smartphone, tablet, low-res PC or high-res PC. When designated, the CSS flex-box element (now included as a default in Bootstrap 4), means that boxes will also grow and shrink as appropriate for the most aesthetic layout.
Next, the core CSS and JavaScript adds the styling and scripting elements that both customises and unites Bootstrap-based websites and apps.
What’s New in Bootstrap 4?
Every new version of Bootstrip has always been a complete rebuild and Bootstrap 4 is no exception. But for those with a bit of develoment knowhow, one of the main changes is a change in CSS preprocessor language. Rather than LESS, which is written in JavaScript, Bootstrap 4 has switched to Sass, written in Ruby. Sass is more of a ‘proper’ coding language and gives developers more flexibility when writing preprocessor code. Bootstrap 4 now officially supports Android v5.0 Lollipop but has dropped support for IE8, IE9 and iOS6. If a website is going to need to be compatible with these browsers, Bootstrap 3 will have to be used.
An extra tier for smaller mobile devices has been added and the primary CSS unit is now root ems (rem), rather than pixels (px). The base font has increased from 14 to 16 pt and the Glyphicons font has been dropped.
Bootstrap 4 also includes other changes of a very technical nature. These are all designed to make front-end web development that much quicker and easier to implement. If you are a web developer or even fancy creating your own website or webpage with minimal coding knowledge, check out the low-cost and completely free multi-page and one-page HTML 5 Bootstrap websites on various platforms available on web.
