Bootstrap is a front-end framework for developing responsive, mobile-first projects on the web. In this tutorial you'll get an overview of how it works, and what advantages it offers.
Bootstrap was created by Mark Otto and Jacob Thornton at Twitter and released to the public in August 2011 under the MIT License. Among other things, this license enables anyone to:
Since its release on GitHub, Bootstrap has:
Bootstrap has stayed on GitHub’s most trending list for months, if not years. Its popularity can be attributed to the way it balances power with simplicity. From the start, it was designed to cater to developers of all skill levels, devices of all shapes, and projects of all sizes.
Bootstrap has the following directory structure:
Boostrap consists of the following main components:
The best feature of Bootstrap is the advanced grid system, which enables developers to create responsive, mobile-first templates using simple markup.
Bootstrap includes over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts and much more.
Bootstrap ships with a dozen jQuery
plugins, designed to provide interactivity to the various components. These
plugins can be included individually or all at once.
The following is a list of reputable and well-known websites built with Bootstrap:
Several options exist when downloading Bootstrap, each catering to different needs and skills levels.
All these options can be found at in the Getting Started documentation.
If you want a customized version of Bootstrap, visit the custom download page to generate your own package.
This page allows advanced users to create customized versions of Bootstrap by
enabling them to select only the components that they desire and to adjust
various options to suit their needs.
A comprehensive and growing ecosystem has mushroomed around Bootstrap. This ecosystem consists of free and commercial templates, third-party components, tools, and an active and helpful community.
Countless Bootstrap-based templates or themes have been developed for most CMSs, frameworks and libraries.
Let’s have a closer look.
Templates exist for both front-end and
back-end frameworks. Examples of front-end framework templates that make use of
Bootstrap include the Bootstrap Theme for jQuery Mobile as well as AngularUI
On the back-end, CakePHP, Yii, CodeIgniter, and Symfony all have templates that are based on Bootstrap.
WordPress, Joomla, Drupal and countless others each have countless Bootstrap-based templates.
There are many UI widgets and plugins designed to extend Bootstrap. Examples of these UI widgets include:
An impressive example of a third-party Bootstrap UI
library is Fuel UX.
A variety of tools exist that are designed to simplify the process of working with Bootstrap. Examples include:
Dozens of marketplaces sell Bootstrap-based themes. Some of the more popular of these marketplaces are:
An active and vibrant community of users has grown around Bootstrap. Thousands of tutorials, blog posts and code snippets can be found all over the web, covering every aspect of Bootstrap.
Teams of developers collaborate on a daily basis to
build templates, third-party components, and other tools that help developers
build Bootstrap-based projects.
This article is an introduction to Bootstrap. In it, we did not go into detail or provide a tutorial on using Bootstrap in your projects. If you are not familiar with Bootstrap, please visit the homepage and check out the Getting Started page.
The purpose of this article was to introduce Bootstrap
and to build a case for why it is a good fit for a WordPress theme framework.
In the next article, we will give a higher-level overview of our framework before we dive into writing some code.