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.

Database Programming

In layman’s terms, a database is a collection of organised data and information. These databases contain many tables with multiple fields containing information on a company’s clients or employees.    Nearly every website uses databases, notably eCommerce websites, to record sales, shipments, and other information using special database software. This software is essential for organising, updating, […]

What is AWS?

AWS, which stands for Amazon Web Services, is a cloud computing technology platform provided by one of the most well-known organisations, Amazon. This innovative and evolving platform provides customers with a myriad of services like servers, storage, networking, virtual computing, email, hosting services, and privacy. Storage is an essential asset for practically every organisation. Previously, […]

Learn JavaScript: How Long Does it Take and How Hard is it?

So, you have decided you want to learn JavaScript. Great! JavaScript has been one of the most commonly used languages in the world for some time. It is powerful, diverse and can work on both front and back-end applications. In this article, we look at some JavaScript tips & tricks. With a huge following, there […]