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:
- freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
- use Bootstrap in packages or distributions that you create
- modify the source code
Since its release on GitHub, Bootstrap has:
- had 10,000+ commits
- been starred 72,680+ times
- forked 27,284+ times
- and gathered 587+ contributors
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.
A Closer Look at Bootstrap
Directory Structure
Bootstrap has the following directory structure:
Boostrap consists of the following main components:
An Advanced Grid System
The best feature of Bootstrap is the advanced grid system, which enables developers to create responsive, mobile-first templates using simple markup.
Components (HTML/CSS)
Bootstrap includes over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts and much more.
Plugins (jQuery plugins)
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.
Advantages
- Supports the latest versions of all major browsers.
- Degrades gracefully.
- Makes development faster and easier.
- Made for people of all skill levels, devices of all shapes, and projects of all sizes.
- Supports two of the most popular CSS
preprocessors: LESS and SASS.
- Well-documented.
Built With Bootstrap
The following is a list of reputable and well-known websites built with Bootstrap:
- Newsweek
- MSNBC
- NASA
- And thousands of themes in marketplaces
such as ThemeForest
Downloading Bootstrap
Several options exist when downloading Bootstrap, each catering to different needs and skills levels.
- Compiled and Minified
- Source Code
- SASS
- CDN
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.
Bootstrap Ecosystem
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.
Templates/Themes
Countless Bootstrap-based templates or themes have been developed for most CMSs, frameworks and libraries.
Let’s have a closer look.
Frameworks
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
for AngularJS.
On the back-end, CakePHP, Yii, CodeIgniter, and Symfony all have templates that are based on Bootstrap.
CMSs
WordPress, Joomla, Drupal and countless others each have countless Bootstrap-based templates.
Third-Party Components
There are many UI widgets and plugins designed to extend Bootstrap. Examples of these UI widgets include:
- Validators
- Date pickers
- Lightboxes
- Dialogs
- Widgets
An impressive example of a third-party Bootstrap UI
library is Fuel UX.
Tools
A variety of tools exist that are designed to simplify the process of working with Bootstrap. Examples include:
- Bower is a dependency management tool.
- Jetstrap is a web-based interface building tool for Bootstrap.
- Bootply is a drag-and-drop visual editor for designing, creating prototypes, and testing the Bootstrap framework.
Marketplaces
Dozens of marketplaces sell Bootstrap-based themes. Some of the more popular of these marketplaces are:
- ThemeForest
- WrapBootstrap
- Built With Bootstrap
- And many, many more
A Helpful and Active Community of Users
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.
Conclusion
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.
