The ultimate guide to Bootstrap

Bootstrap is a powerful, mobile-first, responsive, front-end framework that’s built with CSS, HTML, and JavaScript. It offers a ton of advantages over starting from scratch, and even over many other frameworks.

Bootstrap was originally developed by a designer and developer from Twitter, it’s become one of the most popular front-end frameworks in the world. It was first known as Twitter Blueprint, before becoming open-source, and served as Twitter’s internal style guide for over a year before it was released publicly.

If you’re unfamiliar with Bootstrap, the resources and information here will get you up to speed.

Why Bootstrap?

Bootstrap has a lot of advantages over starting from scratch on your web dev projects. One of the biggest reasons is the vast number of resources available for Bootstrap, especially when compared to a lot of other frameworks and boilerplates (we’ll get to those later).

But beyond the resources available, there are a lot of other reasons to use Bootstrap:

1. It’s easy to use: getting started with Bootstrap is a pretty quick and easy process. And it’s flexible: you can use it with Less or CSS, and even Sass (if you download the Sass version).
2. The grid: Bootstrap uses a 12-column responsive grid. It even supports nested and offset elements. The grid can be kept responsive, or you can easily change it to a fixed layout.
3. Faster development: because Bootstrap has so many ready-made components and resources available, it can significantly speed up your development process.
4. Base styles: Bootstrap comes with base styles for a ton of HTML elements you’re going to be using anyway. It includes styles for typography, forms, images, and much more.
5. Pre-styled components: Bootstrap also comes with pre-styled components for dropdowns, nav bars, alerts, and many others.
6. Bundled JavaScript components: Bootstrap comes with a bunch of JavaScript components to add functionality. It makes it easy to manipulate things like modal windows, tooltips, alerts, and more. You can skip writing scripts all together.
7. Excellent documentation: Bootstrap has exceptional documentation available, which is useful for both beginners and more advanced users.
8. Easy integration: Bootstrap can be integrated with a variety of other frameworks and platforms, on both new sites and existing ones. You can even use just specific elements of Bootstrap alongside your existing CSS.

Getting started with Bootstrap

There are two main ways you can download Boostrap: the precompiled version or the source code version. Which one you choose depends on how you want to get started.

The precompiled one is ready for drop-in usage in virtually any project, and includes compiled CSS and JS, along with compiled and minified versions of each. Glyphicon fonts are included, along with the optional Bootstrap theme.

The source code version includes the precomplied CSS and JavaScript, as well as font assets. It also includes Less, JavaScript, and documentation. Basically, it’s a more complete version, though the learning curve is going to be a bit higher than the precompiled version.

There is also a version of Bootstrap that has been ported from Less to Sass, which is particularly useful if you want to include it in Rails, Compass, or Sass-only projects.

Once you’ve decided which version you want to install, you’ll need to install Grunt, which is the build system Bootstrap uses. You’ll need to download and install node.js first, and then Grunt. From there, you’ll have a variety of Grunt commands at your fingertips.

Then you can start out with the basic Bootstrap HTML template, or one of their example templates. Example templates include grid layouts, jumbotron-based layouts, various navbars, and other custom components (even a blog and a sign-in page).

What if I don’t want a responsive site?

While Bootstrap is responsive and mobile-first right out of the box, it doesn’t have to stay that way if you don’t want a responsive site. All you need to do to disable it is omit the viewport meta tag in the CSS, override the width on the containers for each grid tier, remove any collapsing and expanding behavior on your navbars, and make some adjustments to the grid layouts if you’re using them. You can read the specific instructions in the Getting started documentation.

Bootstrap plugins, extensions, and components

Bootstrap comes with a lot of great features built in. But there are also plenty of ways to extend its functionality to meet your exact needs.

Fuel UX is a set of additional JavaScript controls for your web apps. You can deploy only the controls you want to use from more than a dozen available.

Jasny Bootstrap is a set of components including a vertical nav component and alerts.

Bootstrap-Modal adds stackable, responsive AJAX modal windows to your Bootstrap site. It supports full-width modals and long modals, among other formats.

Bootbox.js is a small library that lets you create programmatic dialog boxes easily.

Bootstrap Image Gallery is an extension to blueimp Gallery, which is a touch-enabled, responsive image gallery using Bootstrap’s modal dialog.

Bootstrap Lightbox is a simple lightbox plugin based on the Bootstrap modal plugin. It includes options for the backdrop, how the lightbox should be closed, and more.

Bootstrap Form Helpers is a collection of jQuery plugins for building better forms. You can use most of them independently, or together to suit your needs.

Notifications is a Bootstrap extension that lets you easily add custom notifications to your website or app. There are options for position, type, transitions, and more.

Bootstrap-growl is a jQuery plugin that transforms regular Bootstrap alerts into Growl-like notifications. There are alerts for info, error, and success styles, and it supports multiple consecutive notifications.

Bootstrap-select adds a custom select for Bootstrap using a button dropdown.

Boostrap Maxlength provides a visual feedback indicator for the maxlength attribute on a field input.

Boostrap Markdown makes it easy to add Markdown support for your forms, seamlessly turning them into a Markdown editor.

Bootstrap Switch 3 makes it easy to transform your checkboxes and radio buttons into toggle switches.

jQuery File Upload adds a jQuery file upload widget with support for drag & drop, multiple file selection, and more.

jqBootstrapValidation is a jQuery validation plugin for Bootstrap forms that’s easy to use and makes it simple to provide clear instruction when validation errors occur.

Bootstrap-wysihtml5 is a simple and beautiful HTML5 WYSIWYG editor that comes as a JavaScript plugin.

Bootstrap Multiselect is a jQuery plugin for UI’s that use select inputs with multiple attributes, displaying them as a dropdown with checkboxes.

BIC Calendar is a jQuery simple calendar for marking events.

bootstrap-datetimepicker is a simple date and time picker component for Bootstrap.

Clockface is a timepicker for Bootstrap with options for things like format and trigger.

Bootstrap Timepicker makes it easy to select a time for a text input with either your mouse or arrow keys.

Color Palette for Bootstrap is a simple color picker that offers basic, Gmail-style, and custom color palettes.

Pick-a-Color is a jQuery color picker for Bootstrap that allows for flexible text entry, saved colors, and more.

Bootstro.js makes it easy to add a guided tour to your website.

Social Buttons for Twitter Bootstrap 2 gives you social buttons that are vector, zoomable, retina-ready, and customizable.

Flippant.js is a JavaScript and CSS library for flipping things, that’s easy to customize, with no dependencies.

Tab drop for Bootstrap rearranges your tabs into dropdown menus when they won’t all fit within the allotted space.

Tocify is a jQuery table of contents plugin that can be themed with Bootstrap.

Bootpag is a jQuery plugin for dynamic pagination that works with Bootstrap or on its own.

Typeahead.js is a JavaScript library from Twitter for building typeaheads.

X-editable lets you create editable elements on your page within Bootstrap.

Bootstrap Tree View is a simple solution for displaying hierarchical tree structures.

Tokenfield for Bootstrap is an advanced tokenizing plugin that focuses on keyboard and copy-paste support.

Bootstrap Star Rating is a jQuery star rating plugin that supports features like fractional fills and RTL input support.

Yamm Megamenu is Yet Another Megamenu for Bootstrap that uses the standard navbar markup and the fluid grid system classes.

Summernote is a simple WYSIWYG editor for Bootstrap.

Knockout-Bootstrap is a set of knockout binding handlers for accessing Bootstrap JavaScript widgets.

Gridmanager.js lets you create and edit grid layouts in frameworks like Bootstrap.

Slider for Bootstrap is a Bootstrap slider component for forms.

WATable is a jQuery plugin that lets you filter, format, paginate, and sort your data quickly and easily.

Bootstrap Datagrid is a jQuery plugin for Bootstrap that’s fully customizable while remaining simple and powerful.

PNotify is a JavaScript notifications extension for Bootstrap.

Bootstrap Tour is a simple extension for creating site tours with (or without) Bootstrap.

The Bootstrap Accessibility Plugin, from PayPal, makes a lot of Bootstrap components accessible for keyboard and screen reader users.

Bootstrap Video Player is a customizable HTML5 video player jQuery plugin.

Ladda UI is a set of loading indicators mostly intended to be used with forms.

Bootstrap themes, templates, and UI kits

You can build your own themes and templates from scratch if you choose, or check out these free and premium assets to save time. Some are meant to be used as-is, while plenty of others are meant to be a jumping off point for your own custom designs.

Creative Market has more than 300 premium Bootstrap themes available.

BootstrapMade offers up themes in a variety of styles.

BootstrapBay is a marketplace for premium Bootstrap themes and templates where you can buy or sell.

GridGum is a premium theme marketplace with dozens of themes on offer.

ThemeForest has hundreds of Bootstrap themes for sale, starting at just $4.

WrapBootstrap offers themes for everything from ecommerce sites to landing pages.

Cardeostrap is a huge UI kit for Bootstrap that includes CSS, components, and JavaScript.

Flatstrap is a free and open-source Bootstrap theme framework without all the frills.

Bootmetro is a web framework that has the look and feel of Windows 8.

Fbootstrapp is a toolkit for creating Facebook iframe apps with Bootstrap.

Bootplus is a Google styled front-end framework that’s sleek and intuitive.

Get Template is a small collection of HTML5 and CSS3 templates in a variety of styles.

BootstrapTaste is a collection of free and premium Bootstrap themes.

Bootstrap Zero is the self-proclaimed largest open-source template collection for Bootstrap.

BlackTie is a collection of free and premium themes built on various versions of Bootstrap. They include everything from dashboard themes to news aggregators to portfolio themes.

Startup Framework is a simple but powerful Bootstrap framework from DesignModo.

Bootswatch is a collection of free, easy-to-install, modular Bootstrap themes.

Start Bootstrap is a set of free Bootstrap themes and templates, including blog themes, portfolio themes, and more.

Joostrap is a collection of Joomla templates built with Bootstrap.

Theme Armada is a set of handcrafted responsive themes that are built with Bootstrap, starting at just $8.

PrepBootstrap is a huge source of free themes, templates, and widgets for everything from admin interfaces to contact forms.

RandThemes is a set of premium Bootstrap themes including both front- and back-end designs.

Roots is a WordPress starter theme that’s built on Bootstrap.

UI Bootstrap is a collection of Bootstrap components written in AngularJS.

The Bootstrap is a clean and modern Bootstrap WordPress theme.

BootstrapWP is a solid base for custom WordPress theme development based on Bootstrap.

StrapPress is a WordPress theme that’s mobile-first, responsive, and includes tons of Bootstrap elements.

Shoestrap is an advanced WordPress theme based on Bootstrap.

Expose Framework is a base theme that offers a fluid layout, HTML5 and CSS3, and responsive menus.

More Bootstrap resources

Beyond basic extensions and themes, there are plenty of other Bootstrap resources out there that make working with Bootstrap easier and more enjoyable.

The Bootstrap Style Guide Boilerplate helps you semi-automatically generate living style guides by linking a stylesheet and creating HTML files for each pattern or element.

Bootstrap Magic is a Bootstrap theme editor that lets you build themes faster.

Academic is a fast blog CMS based on Bootstrap.

Wright is a Joomla 2.5 and 3.x framework built on Bootstrap.

AngularStrap is a set of AngularJS native directives for Bootstrap 3.

PaintStrap lets you create Bootstrap themes using color palettes from Adobe Kuler or COLOURlovers.

Durandal is a framework for building single page apps that integrates with Bootstrap.

Lavish makes it easy to create your own Bootstrap color scheme from an image.

LayoutIt! is a drag and drop interface builder for creating your front-end code.

Pingendo is a visual desktop app for prototyping responsive designs based on Bootstrap.

Bootsnip is an element gallery for Bootstrap resources.

Bootply is a playground for building, testing, and prototyping with the Bootstrap framework.

Dojo for Bootstrap combines Bootstrap components with custom Dojo modules for everything from modal windows to carousels to buttons.

Bootsnipp Form Builder is a form builder that uses drag and drop components.

Bootsnip Button Builder is an easy to use button builder that lets you customize the output, button text, color, size, and icon.

Ratchet is a tool for building mobile apps with HTML, CSS, and JavaScript components.

Bootbundle is a set of themes, snippets, and components for Bootstrap.

BootSwatchr is a visual theme creator for building Bootstrap themes from scratch.

React Bootstrap is a Bootstrap-build of the popular front-end framework.

Brix.io is an interface builder for Bootstrap. It’s cloud-based, easy to use, and offers real-time collaboration.

Some great Bootstrap projects

There are tons of sites out there already running on Bootstrap. The ones below show just how much diversity is possible with Bootstrap.

Lexigrams

BabySitMyDog.com

EasyGenerator

MobStyle

The African Equity Fund

WebXtrap

Paul V

High Rollers Fun Casino

Vansh

Noel Hanna

Prusik

HIP Advertising

Laundry Day

Filter Surfboard Manufacturing Academy

Streamline

Kitchen

DSTLD

Nas Ferias

Vertty

Montere

Drury Buildings

Plaza Classic Film Festival

1Bite2Go

Riot Design

Codiqa

Sean Halpin

Simplebots

Magently

Crafting Type

Surreal CMS

Nod

Markt

Startup Turkey

Felix Morelo

The Happy Startup School

Kontest

Dutch National Opera & Ballet

Dagobert Renouf

The Rolling Stones

Conclusion

Bootstrap is only one of many available frameworks for building responsive, mobile-first websites with HTML, CSS, and JavaScript. Take the time to study what Bootstrap can do (and what you feel comfortable doing with it) compared with other frameworks and choose the one that fits your specific project needs best. And don’t be afraid to choose different frameworks for different projects!

Cameron Chapman

Cameron Chapman is a freelance writer and designer from New England. You can visit her site or follow her on Twitter.