How to add bootstrap.js in Magento 2?

May 17, 2016 - Fire development, Magento 2, Magento tips & tricks

Magento 2 Development

Adding bootstrap.js in Magento 2 requires several steps to be done.

First of all, you should create the following module folder structure:

app / code / [Vendor] / [ModuleName]

app / code / [Vendor] / [ModuleName] / etc

app / code / [Vendor] / [ModuleName] / view / frontend / layout

app / code / [Vendor] / [ModuleName]

app / code / [Vendor] / [ModuleName] / etc

app / code / [Vendor] / [ModuleName] / view / frontend / layout

Then, it is necessary to create module files:

app / code / [Vendor] / [ModuleName] / registration.php

app / code / [Vendor] / [ModuleName] / etc / module.xml

app / code / [Vendor] / [ModuleName] / view / frontend / requirejs-config.js

app / code / [Vendor] / [ModuleName] / view / frontend / layout / default.xml

app / code / [Vendor] / [ModuleName] / view / frontend / layout / default_head_blocks.xml

app / code / [Vendor] / [ModuleName] / registration.php

app / code / [Vendor] / [ModuleName] / etc / module.xml

app / code / [Vendor] / [ModuleName] / view / frontend / requirejs-config.js

app / code / [Vendor] / [ModuleName] / view / frontend / layout / default.xml

app / code / [Vendor] / [ModuleName] / view / frontend / layout / default_head_blocks.xml

registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'[Vendor]_[ModuleName]',
__DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'[Vendor]_[ModuleName]',

__DIR__

);

module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <module name="[Vendor]_[ModuleName]" setup_version="0.0.1" />
</config>

<?xml version="1.0"?>

</config>

requirejs-config.js

var config = {
  paths:{
    "jquery.bootstrap":"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min"
  },
  shim:{
    'jquery.bootstrap':{
        'deps':['jquery']
    }
  }
};

var config = {

paths:{

"jquery.bootstrap":"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min"

shim:{

'jquery.bootstrap':{

'deps':['jquery']

}

};

default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<referenceBlock name="head">
    <block class="Magento\Theme\Block\Html\Head\Script" name="requirejs" before="-">
        <arguments>
            <!-- RequireJs library enabled -->
            <argument name="file" xsi:type="string">requirejs/require.js</argument>
        </arguments>
    </block>
    <!-- Special block with necessary config is added on the page -->
    <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config" after="requirejs"/>
</referenceBlock>
</page>

<?xml version="1.0"?>

<argument name="file" xsi:type="string">requirejs/require.js</argument>

</arguments>

</block>

</referenceBlock>

</page>

default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<head>
  <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" src_type="url" />
  <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" src_type="url" />
</head>
</page>

<?xml version="1.0"?>

<head>

</head>

</page>

Now, you have to enable Module (SSH to Magento root):

php -f bin/magento module:enable --clear-static-content [Vendor]_[ModuleName]

php -f bin/magento setup:upgrade

php -f bin/magento module:enable --clear-static-content [Vendor]_[ModuleName]

php -f bin/magento setup:upgrade

And deploy static resources (SSH to Magento root):

php bin/magento setup:static-content:deploy

1 2	php bin/magento setup:static-content:deploy

Note that,

RequireJS will not load any JavaScript module source file until someone uses that JavaScript module as a dependency.

Alan Storm

CMS Page example:

&lt;script type="text/javascript"&gt;
requirejs(['jquery','jquery.bootstrap'], function(jQuery, jQueryBootstrap){
jQuery('.carousel').carousel();
});
&lt;/script&gt;