The ultimate guide to Bootstrap

Default avatar.
October 01, 2014
The ultimate guide to Bootstrap.
thumbBootstrap 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!

Cameron Chapman

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

Read Next

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Has AI Killed User Testing?

Web designers employ user testing to evaluate a website’s functionality and overall UX (user experience). Various…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…