What is Bootstrap?

Sharing is caring!

Agile. Framework. Modular. Buzzwords aside you have probably heard of the Bootstrap framework. But what is it? And — more importantly — how can you use it to accelerate your web development process.

This is what the Bootstrap team has to say about their product, straight from their website:

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Bootstrap.com

In layman’s terms, Bootstrap is a collection of pre-built elements (buttons, boxes, modals, etc.), as well as styling for headings and other typography. All of these styles are either applied automatically (in the case of headings) or applied via a class.

For example, let’s say that we wanted a two column page layout. With Bootstrap you can do something like this:

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <!-- left row content -->
    </div>
    <div class="col">
      <!-- right row content -->
    </div>
  </div>
</div>

The best part is, it’s responsive. No matter what device the user is viewing your site on, it will scale appropriately.

Further Reading

This article is merely designed to introduce someone to the idea of bootstrap. There are many great features of this framework that I haven’t mentioned.

If you would like to read more, check out the official Bootstrap Documentation. Here you can find a quick start guide that will get you up and running with bootstrap in a matter of seconds.