featured

The ultimate guide to Bootstrap

By Cameron Chapman Posted Oct. 01, 2014 Reading time: 10 minutes

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.

fuel ux

 

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

Jasny Bootstrap

 

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

bootstrap-modal

 

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

bootbox.js

 

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

bootstrap image gallery

 

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 Lightbox

 

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.

bootstrap form helpers

 

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.

notifications

 

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 growl

 

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

boostrap-select

 

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

boostrap maxlength

 

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

bootstrap markdown

 

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

bootstrap switch

 

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

jquery file upload

 

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.

jqbootstrapvalidation

 

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

bootstrap-wysihtml5

 

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

bootstrap multiselect

 

BIC Calendar is a jQuery simple calendar for marking events.

bic calendar

 

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

bootstrap-datetimepicker

 

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

clockface

 

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

bootstrap timepicker

 

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

color palette for bootstrap

 

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

pick-a-color

 

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

bootstro

 

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

social buttons

 

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

flippant.js

 

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

tab drop for bootstrap

 

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

tocify

 

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

bootpag

 

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

typeahead.js

 

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

x-editable

 

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

bootstrap tree view

 

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

tokenfield

 

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

star rating

 

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

yamm megamenu

 

Summernote is a simple WYSIWYG editor for Bootstrap.

summernote

 

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

knockout

 

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

gridmanager

 

Slider for Bootstrap is a Bootstrap slider component for forms.

slider for bootstrap

 

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

watable

 

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

bootstrap datagrid

 

PNotify is a JavaScript notifications extension for Bootstrap.

pnotify

 

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

bootstrap tour

 

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

bootstrap accessibility plugin

 

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

bootstrap video player

 

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

ladda ui

 

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.

Creative Market

BootstrapMade offers up themes in a variety of styles.

bootstrapmade

 

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

bootstrapbay

 

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

gridgum

 

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

themeforest

 

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

wrapbootstrap

 

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

cardeostrap

 

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

flatstrap

 

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

bootmetro

 

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

fbootstrap

 

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

bootplus

 

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

Get Template

 

BootstrapTaste is a collection of free and premium Bootstrap themes.

bootstraptaste

 

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

bootstrap zero

 

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.

blacktie

 

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

startup

 

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

bootswatch

 

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

start bootstrap

 

Joostrap is a collection of Joomla templates built with Bootstrap.

joostrap

 

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

Theme Armada

 

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

prepbootstrap

 

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

randthemes

 

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

roots

 

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

ui bootstrap

 

The Bootstrap is a clean and modern Bootstrap WordPress theme.

the bootstrap

 

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

bootstrapwp

 

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

strappress

 

Shoestrap is an advanced WordPress theme based on Bootstrap.

shoestrap

 

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

expose

 

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.

style guide boilerplate

 

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

bootstrap magic

 

Academic is a fast blog CMS based on Bootstrap.

academic

 

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

wright

 

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

angularstrap

 

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

paintstrap

 

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

durandal

 

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

lavish

 

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

layoutit

 

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

pingendo

 

Bootsnip is an element gallery for Bootstrap resources.

bootsnip

 

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

bootply

 

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

dojo for bootstrap

 

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

bootsnip form builder

 

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

bootsnip button builder

 

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

ratchet

 

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

bootbundle

 

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

bootswatchr

 

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

react

 

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

brix.io

 

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

lexigrams

 

BabySitMyDog.com

babysitmydog

 

EasyGenerator

easygenerator

 

MobStyle

mobstyle

 

The African Equity Fund

aef

 

WebXtrap

webxtrap

 

Paul V

paul v

 

High Rollers Fun Casino

high rollers

 

Vansh

vansh

 

Noel Hanna

noel hanna

 

Prusik

prusik

 

HIP Advertising

hip advertising

 

Laundry Day

laundry day

 

Filter Surfboard Manufacturing Academy

filter

 

Streamline

streamline

 

Kitchen

kitchen

 

DSTLD

dstld

 

Nas Ferias

nas ferias

 

Vertty

vertty

 

Montere

montere

 

Drury Buildings

drury buildings

 

Plaza Classic Film Festival

plaza classic film festival

 

1Bite2Go

1bite2go

 

Riot Design

riot design

 

Codiqa

codiqa

 

Sean Halpin

sean halpin

 

Simplebots

simplebots

 

Magently

magently

 

Crafting Type

crafting type

 

Surreal CMS

surreal cms

 

Nod

nod

 

Markt

markt

 

Startup Turkey

startup turkey

 

Felix Morelo

felix morelo

 

The Happy Startup School

the happy startup school

 

Kontest

Kontest

 

Dutch National Opera & Ballet

dutch national

 

Dagobert Renouf

dagobert renouf

 

The Rolling Stones

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!

Aa