4elements web design & consultancy



  • like 1 09

    Combining Underscores With Bootstrap to Create a Theme Framework: Introducing Bootstrap

    4elements | web design The Hague blog • Combining Underscores With Bootstrap to Create a Theme Framework: Introducing Bootstrap

    Final product image
    What You'll Be Creating

    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 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.


    • 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.


    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 for AngularJS.

    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.

    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.


    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.


    Dozens of marketplaces sell Bootstrap-based themes. Some of the more popular of these marketplaces are:

    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.


    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.

    martijn broeders

    founder/ strategic creative at 4elements web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 06 38 55 28 54

By - category

    By - date