Introduction to Bootstrap

Bootstrap is a free and open-source framework for creating websites and web applications. It's the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

As the web evolves more and more toward responsive design, it can be a real challenge for web developers to keep up. Bootstrap can make things a whole lot easier. Bootstrap enables you to create responsive websites without you needing to do the "responsive" bit. Bootstrap takes care of that.

One Framework, Every Device

Image showing multiple sized devices.

Bootstrap is promoted as being One framework, every device. This is because websites built with Bootstrap will automatically scale between devices — whether the device is a mobile phone, tablet, laptop, desktop computer, screen reader, etc.

Mobile-First

Not only is Bootstrap responsive, it is mobile-first. This means that it is primarily designed for mobile devices, then scales up from there (as opposed to being designed for desktop, then trying to scale it down to mobile devices).

Bootstrap Components

Bootstap includes components such as buttons, navbars, dropdown menus, alert boxes, and more. In most cases, you can make use of a component simply by using the appropriate class name.

We'll be looking at these components throughout this tutorial. We've got plenty of interactive examples that enable you to see exactly how these components work.

Advantages of Bootstrap

One of the main benefits of development frameworks like Bootstrap is that they can help speed up development times, while maintaining quality and consistency across the site. You no longer need to re-design every element. And you don't need to spend hours trying to get everything looking and working right across browsers, platforms, and devices. By using Bootstrap, all (most) of the hard work is done for you.

Given Bootstrap is the most popular frontend development framework on the web, this skillset could be a useful one to learn. Adding Bootstrap to your bag of tricks could help you in many ways — from building websites faster, to landing your dream job.

Also, athough Bootstrap comes with its own set of styles, these are easy to override. You're not locked into the "Bootstrap design". You are free to use whichever Bootstrap components you choose, while adding your own on top. There are thousands of websites out there that are built on Bootstrap, but with their own design.

Who's Using Bootstrap?

Bootstrap can be used to build websites of any scale, from small blogs to large corporate websites. Organizations that use Bootstrap include NASA, University of Washington, FIFA, Newsweek, VOGUE and many more.