Loading twitter bootstrap using browserify

Question

How do I use Twitter bootstrap in browserify? I installed bootstrap-browserify, and tried using this in my code

Later in my code, I have some code trying to patch the modal dialog function of bootstrap, but it throws an error.

This is how my code looks like:

var bootstrap = require('bootstrap-browserify');

$(document).ready(function () {

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        var that = this;
        $(document).on('focusin.modal', function (e) {
            if ($(e.target).hasClass('select2-input')) {
                return true;
            }

            if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
                that.$element.focus();
            }
        });
    };
}

I am completely new to browserify and I am using it for the first time. What am I doing wrong?

What error is it throwing? Is it an error in the browser or in Node? — user3888472
– user3888472, Commented Jul 29, 2014 at 16:09

YPCrumble · Accepted Answer · 2016-01-04 00:40:16Z

1

First you'll have to install Bootstrap, jQuery, and browserify-shim. I prefer to install these with Bower (because of the flat dependency structure) but you could also use NPM. This is the browserify-shim section of my package.json config:

  "browserify": {
    "transform": [
      "browserify-shim"
    ]   
  },  
  "browser": {
    "jquery": "./bower_components/jquery/dist/jquery.min.js",
    "bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.min.js"
  },  
  "browserify-shim": {
    "jquery": "$",
    "bootstrap": {
      "depends": [
        "jquery: jQuery"
      ]   
    }   
  },

The way I prefer to install Bootstrap (and its dependency jQuery) is to install these to the global scope. Therefore, somewhere in my code that will be "browserified" I'll put the following:

$ = jQuery = require('jquery');
require('bootstrap');

Note that I'm not using var here. This means that $, jQuery, and the necessary Bootstrap javascript will be available on the window object.

answered Jan 4, 2016 at 0:40

YPCrumble

29.1k26 gold badges115 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Giridhar Karnik Over a year ago

When I try using this, I get unexpected token "/" in package.json error

YPCrumble Over a year ago

@HorribleGuy that's most likely a typo in your package.json file, maybe in a different section.

Giridhar Karnik Over a year ago

it was, but I have one more problem, have asked a question. stackoverflow.com/questions/36939784/…, can you plz look at it?

Jonathan · Accepted Answer · 2014-04-14 14:53:05Z

-3

There's no real need to use browserify with bootstrap. A typical approach would be to include bootstrap.js with a <script> tag above the bundle that browserify creates, and then just use it normally without needing a require() statement. If you want to avoid the extra HTTP request, you can just concatenate bootstrap with your custom browserify bundle using Gulp or something similar.

Since Bootstrap depends on JQuery, you can also do something like combine JQuery and Bootstrap into a vendor.js, and include that above the custom bundle that browserify makes.

answered Apr 14, 2014 at 14:53

Jonathan

1231 silver badge9 bronze badges

2 Comments

Unispaw Over a year ago

but we want jquery to be included through browserify!

Alex Lapa Over a year ago

This is not an answer to the question

Collectives™ on Stack Overflow

Loading twitter bootstrap using browserify

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related