article header

Five Reasons to love Bootstrap!

Matt Rudge, a Senior Product Developer with Code Institute, has a long history with Bootstrap. However, what are his reasons for still loving this technology? In this blog, Matt tells us his five main reasons for still loving Bootstrap.

Why I still love Bootstrap

Hidden somewhere in the darkest and, mercifully, untouched corners of the Internet Archive’s Wayback Machine lies the first-ever website I created. Actually, that’s not quite true. It’s the second version of the first website I ever created, because it was indexed in May 1996, and the first version went live in July 1994.

This little gem predated many things. JavaScript was just a twinkle in Marc Andressen’s eye when it went live. Even after its second iteration, the first version of CSS was still six months away. I’d like to say that you’d never know, but it shows! All of the formatting is done using tags such as <center>, <b> for bold, the <font> tag and even, at one time, the dreaded <blink> tag. It is rudimentary with terrible graphics. The obligatory animated GIF showing that it is under construction and a perfect snapshot of what websites looked like back in the 1990s before web development matured. The link to the page on the Internet Archive is something I’ve vowed to take to my grave unless it is extracted from me by copious quantities of my favourite whiskey.

Bootstrap – aka Blueprint

Then, of course, CSS arrived and made everything simultaneously easier and more difficult. Things could now be positioned with pixel accuracy, and the quality of web development improved rapidly. I do still favour writing CSS from scratch. However, it can feel like you’re playing a particularly tense game of Buckaroo where one false move can bring everything crashing down. One solution to endless CSS adjustments is to use a front-end framework, or library, where the heavy lifting has been done for you. And, of all the different frameworks currently available, Bootstrap is the one I always reach for.

Bootstrap started life as a Twitter project back in 2011. It was initially called “Blueprint”, a name I prefer! Mark Otto, the developer who initiated the project, said; “A super small group of developers and I got together to design and build a new internal tool and saw an opportunity to do something more. Through that process, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to document and share common design patterns and assets within the company.”

Consistency in appearance

In fact, Bootstrap became an internal style guide at Twitter. This is because generic Bootstrap projects have the same look and feel.

If you’ve read articles about Bootstrap before, then this consistency in appearance is also one of the things that is often viewed as a reason not to use it. One of my students even created a parody webpage to showcase everything wrong with generic Bootstrap designs.

I don’t think that’s an entirely fair characterisation of Bootstrap. Here are five reasons why I still love using it, and why I think you should too:

1. Super-fast development

The easy-to-understand, flexible grid system, as well as the vast library of plug-in components, means that you can create a functional, responsive website in a short space of time. It is easy to make elements appear or disappear, depending on the screen size. Bootstrap is built on the concept of mobile-first development, so your content will scale perfectly to a mobile device without you needing to do too much. You can then decide what components should be visible or how the content should adjust as the screen size changes. Right out of the box, you can get a project off the ground very quickly. This, of course, means that you have a generic-looking Bootstrap site, but that brings us on to the second reason why I like Bootstrap.

2. It is easily customised

With a little CSS know-how, all visual elements in Bootstrap are customisable. This means that a generic-looking Bootstrap project doesn’t need to stay like that. You can re-design the buttons, modals, navigation bars, links and menus, and many larger organisations do this to personalise the user experience. The website for Forbes India (link: forbesindia.com) uses vanilla Bootstrap. Even the main Forbes website (link: forbes.com) uses a customised version of Bootstrap 3. So, with a little work, a Bootstrap project doesn’t need to look like a Bootstrap project, which segues nicely into my third reason:

3. You don’t have to use all of it

Committing to using Bootstrap doesn’t mean that you need to use it all. If you don’t like Bootstrap’s default buttons, then design your own in CSS and keep Bootstrap around for the super-easy responsive grid. It’s straightforward to custom-design parts of your project and to sprinkle Bootstrap in where necessary. 

4. It has a massive library of interactive components

Collapsible mobile menus? Interactive carousel sliders? Styled, pop-up modals? Scroll-spy as you go down a single-page application? Popovers and spinners? They’re all included in Bootstrap. Now, some of it is – in my opinion – overused. I could rant about the carousel for longer than you’d like to continue reading; however used properly and judiciously, you can create beautifully styled, interactive components on your site with little-to-no coding. Most of them just require a simple class name to be added to a <div> element. All of these components are customisable too, so you can fit them into your site’s overall theme. And, finally, if you get stuck when customising these components:

5. There is a considerable community actively developing for Bootstrap

There are thousands of templates and examples of how you can customise Bootstrap available. Take a look at examples on CodePen (link: https://codepen.io/search/pens?q=bootstrap) to see the creative ways in which Bootstrap can be customised and – with correct attribution, of course – try some in your own projects. With a little help from the community, you can bring your Bootstrap project to the next level.

In conclusion, Bootstrap has come a long way since its establishment as a style guide for internal Twitter projects. It is now a mature, powerful front-end library that allows you to focus on executing your vision. At the same time, it carries out the hard work of resizing your content to look good on different screen sizes underneath. Just because your site is based on Bootstrap, doesn’t mean that it has to look “Bootstrappy”. Yes, that is a word I just invented. 

If Bootstrap had been available when I was developing my first website back in 1994, then, who knows? I might even have been happy to share the link.

Bootstrap is one of the many things that you will learn in Code Institute’s Full Stack Software Development programme. However, if you want to learn some basic HTML, CSS and Javascript for free, why not try our free 5 Day Coding Challenge? Register through the form below,