I m trying to include bootstrap js on my magento2 theme. But the problem is when i include bootstrap js on my theme. That time console is giving error that bootstrap require jQuery.

Then how can i do it??? Can anyone please help me?

2 Answers 2


Create Module Folder Structure:

app / code / [Vendor] / [ModuleName]

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

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

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




<?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"/>


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


<?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="-">
                <!-- RequireJs library enabled -->
                <argument name="file" xsi:type="string">requirejs/require.js</argument>
        <!-- Special block with necessary config is added on the page -->
        <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config" after="requirejs"/>


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
        <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"/>

Enable Module (SSH to magento root):

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

php -f bin/magento setup:upgrade

Deploy static resources (SSH to magento root):

php bin/magento setup:static-content:deploy

RequireJS will not load any javascript module source file until someone uses that javascript module as a dependency. per Alan Storm

(example usage) in CMS Page:

<script type="text/javascript">
    requirejs(['jquery', 'jquery.bootstrap'], function (jQuery, jQueryBootstrap) {

Related: Adding CSS to a CMS page using Layout Update XML

  • Thanks for this :) A very clear guide. Though I find it weird to see the xsi:noNamespaceSchemaLocation value in default.xml. It looks to me this goes against all the modularity in Magento, to define a path like that. But I see it all over the web, so it must be the way things work.
    – Asitis
    Commented Apr 15, 2016 at 11:46
  • Indeed the xsi:noNamespaceSchemaLocation is outdated, or even wrong. Currently it should be urn:magento:framework:Module/etc/module.xsd which makes it flexible. Commented Jun 30, 2016 at 18:18
  • I don't think the addition of default.xml is actually needed. Magento 2 already loads RequireJS everywhere on all pages, so there is no need to explicitely add RequireJS yourself. Commented Jun 30, 2016 at 18:30
  • 1
    Upped this post anyway, because it is awesome. Commented Jun 30, 2016 at 18:30

To add bootstrap JS file, I followed the following steps on Magento 2.2.4.

Step 1: Place the JS file in the following location.


Step 2: Add the following scripts in this file app/design/frontend/{Vendorname}/{Themename}/Magento_Theme/requirejs-config.js.

 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.

var config = {
    paths: {
    } ,
    shim: {
        'bootstrap': {
            'deps': ['jquery']

Step 3: Add the following scripts in the template files or your custom JS files (without script tag).

<script type="text/javascript">    
    require([ 'jquery', 'jquery/ui', 'bootstrap'], function($){ 
       // core js, jquery, jquery-ui, bootstrap codes go here

Step 4: Go to the Magento root folder and run the command below.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Not the answer you're looking for? Browse other questions tagged or ask your own question.