How To Use Bootstrap 3 With RequireJS

Everything Is Better With An AMD Loader

Twitter's Bootstrap is a popular CSS & JavaScript library for rapid web-development, encompassing CSS and JavaScript. RequireJS is the new black for defining and loading JavaScript in web apps.

Bootstrap’s JavaScript components are written as jQuery plugins. Unfortunately, the jQuery plugin pattern isn’t compatible with the AMD pattern used in RequireJS.

Fear not, RequireJS has some tricks up it’s sleeve. We can still declaratively load Boostrap as long as we make sure jQuery is loaded first.

The Setup

This is our RequireJS setup file. Here you can read all about it.

// file: js/require-setup.js
// Declare this variable before loading RequireJS JavaScript library
// To config RequireJS after it’s loaded, pass the below object into require.config();

var require = {
    shim : {
        "bootstrap" : { "deps" :['jquery'] }
    paths: {
        "jquery" : "//",
        "bootstrap" :  "//"  

I’ll explain a few things about what’s going on above.

  • jquery and bootstrap paths are created. These act as references for the libraries in RequireJS.
  • We use a shim to load the bootstrap library. A shim automatically adds a wrapper around a JavaScript library that makes it AMD-compatible / RequireJS-friendly.
  • jquery is declared as a dependency of bootstrap. Whenever we load boostrap, RequireJS makes sure *jQuery is loaded first
  • jQuery 1.7 support AMD. No shim is required.

In researching RequireJS, you may have seen an export option in the configuration. This is not needed for Bootstrap 3. All code is executed in closures and added to jQuery as a plugin. There is nothing to export.

The Code

This is our simple JavaScript file, loading all the modules it needs and executing our code.

// File: /js/app.js

// 'jquery' returns the jQuery object into '$'
// 'bootstrap' does not return an object. Must appear at the end

require(['jquery', 'bootstrap'], function($){

    // DOM ready

        // Twitter Bootstrap 3 carousel plugin

We explicitly call jquery to load the jQuery library into $. We call bootstrap to add it’s plugins into jQuery.

Luckily for us RequireJS is very smart. Behind the scenes, it will only make one HTTP request for jQuery regardless of the times jquery is loaded directly or as a dependency.

The Markup

Finally here is what your HTML may look like

        <script type="text/javascript" src="js/require-setup.js"></script>
        <script type="text/javascript" src="//"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <div id="carousel">...</div>

Don't Do This

Because we declared jquery as a dependency of bootstrap, you technically only need to reference boostrap to load jquery as well. I do not recommend this approach.

require(['bootstrap'], function(){

    // DOM ready
        // Twitter Bootstrap 3 carousel plugin

That’s bad. A benefit of using RequireJS is explicitly seeing the dependencies that a page or module uses. So if we’re using jQuery we should explicitly load it’s library, scoped to within our module. Not rely on an undeclared window.jQuery.

We're All Done

Because Twitter's Bootsrap is standard a jQuery plugin, it's thankfully pretty straight-forward. I hope this helped shed some light on both RequireJS and Twitter's Bootstrap. Thanks for reading.

You may also want to read about loading individual Bootstrap 3 components.

The article was authored using Markdown for Sitecore.

👋 Hey Sitecore Enthusiasts!

Sign up to our bi-weekly newsletter for a bite-sized curation of valuable insight from the Sitecore community.

What’s in it for you?

  • Stay up-to-date with the latest Sitecore news
  • New to Sitecore? Learn tips and tricks to help you navigate this powerful tool
  • Sitecore pro? Expand your skill set and discover troubleshooting tips
  • Browse open careers and opportunities
  • Get a chance to be featured in upcoming editions
  • Learn our secret handshake
  • And more!
Sitecore Snack a newsletter by Fishtank Consulting

Meet Dan Cruickshank

President | Sitecore MVP x 11

Dan is the founder of Fishtank. He's a multi-time Sitecore MVP and Coveo MVP award winner. Outside of technology, he is widely considered to be a top 3 father (routinely receiving "Father of the Year" accolades from his family) and past his prime on the basketball court.

Connect with Dan