What is Bootstrap? 5 Reasons to love it

Bootstrap was developed by Twitter developers in  2011  to speed up the development and layout of front-end graphical elements. That same year the team released it as an open-source framework.  Today, Bootstrap is one of the most used front end web development libraries in the world. 

What is Bootstrap? 

Bootstrap is a powerful front-end development library that includes pre-built HTML, CSS and JS components for building mobile-first responsive websites of all sizes and complexity. With Bootstrap, you get ready to use responsive themes and templates as a starting point for your web project. 

Bootstrap includes HTML and CSS based templates for typography, forms, buttons, tables, navigation, modal windows, image carousels and many others, as well as optional JavaScript plugins.  And while it doesn’t implement the MVC (Model-View-Controller) pattern, it does adhere to the separation of concerns.  It is also used to create views in the MVC patterns used in full-stack frameworks such as Django and ASP.NET MVC among others.

Why use Bootstrap?

Web application development is all about consuming and publishing information. The consumption, in particular, should be as easily digestible as possible. That means your information should be accessible on any device. In a visually appealing and balanced way. 

How to use Bootstrap

Bootstrap is very easy to use: Anybody with basic knowledge of HTML and CSS can start using Bootstrap.

It has responsive features: 

  • Bootstrap’s responsive CSS adjusts to devices of all sizes and resolutions.
  • Browser compatibility: It is compatible with all modern browsers (Opera, Chrome, Firefox, Internet Explorer(Edge) and Safari).
  • There are hundreds of excellently constructed free and monetized themes available online to give your work a head start. Having a base design to work from really accelerates UI development.

Importantly, the Bootstrap official site has great documentation to get you started.

You can download it and host it with your other application files on your web server or you can add a link to a Content Delivery Network (CDN) that will always serve you the latest version. 

What do developers think?

While the popularity of Bootstrap may have fallen over the last few years, it is still widely used. We’ve asked one of our resident developers, Matt Rudge, to tell us about his views on 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 shows 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.

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. 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. 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 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.

Free Coding Challenge

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.

Relational Databases

Databases, in combination with a Database Management System (DBMS), allow persistent storage, easy administration, and safe manipulation of information and are therefore among the most important computer applications. Data in a database is structured according to one of the multiple sets of rules. Proposed in 1970 by E.F. Codd, the relational data model is the […]

Python Cheat Sheet

Python is one of the most popular programming languages. It currently takes first place both in the Tiobe index and the PYPL index and has been named Language of the Year in 2007, 2010, 2018, 2020, and 2021. This popularity stems both from Python’s versatility and ease of use. Python can be used for Web […]

Git Stash

Git Stash is a built-in command that temporarily stores all of the most recent modifications to the code. That is, the modifications are stored, and the code is reset to its previous state. Git is software that allows a group of developers to keep track of changes and alterations to a source code throughout the […]