1

I try to install bootstrap 4.

Note: THEME_LOCATION => app\design\frontend\company\base

First I downloaded the Compiled CSS and JS from here.

I moved the file bootstrap.min.css to THEME_LOCATION\web\css\bootstrap.min.css

and bootstrap.bundle.min.js to \web\js\bootstrap.bundle.min.js

Then I added the requirement to

THEME_LOCATION\Magento_Theme\requirejs-config.js

var config = {
    paths: {
        'bootstrap':'Magento_Theme/js/bootstrap.bundle.min'
    },
    shim: {
        'bootstrap': {
            'deps': ['jquery']
        }
    }
};

Then in default_head_blocks.xml I added the css:

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/bootstrap.min.css" />
    </head>
</page>

And at last but not least I added this line:

<script type="text/javascript">require(['bootstrap']);</script>

to

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

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

// @codingStandardsIgnoreFile

/**
 * @var \Magento\Theme\Block\Html\Header $block
 */
$welcomeMessage = $block->getWelcome();
?>



<?php switch ($block->getShowPart()):
    case 'welcome': ?>
        <li class="greet welcome" data-bind="scope: 'customer'">
            <!-- ko if: customer().fullname  -->
            <span class="logged-in" data-bind="text: new String('<?= $block->escapeHtml(__('Welcome, %1!', '%1')) ?>').replace('%1', customer().fullname)">
            </span>
            <!-- /ko -->
            <!-- ko ifnot: customer().fullname  -->
            <span class="not-logged-in" data-bind='html:"<?= $block->escapeHtml($welcomeMessage) ?>"'></span>
            <?= $block->getBlockHtml('header.additional') ?>
            <!-- /ko -->
        </li>
        <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "customer": {
                            "component": "Magento_Customer/js/view/customer"
                        }
                    }
                }
            }
        }
        </script>
        <script type="text/javascript">require(['bootstrap']);</script>

    <?php break; ?>

    <?php case 'other': ?>
        <?= $block->getChildHtml() ?>
    <?php break; ?>

<?php endswitch; ?>

At the end I executed php bin/magento cache:flush to clear the cache.

But I get require.js:166 Uncaught Error: Script error for: bootstrap if I load a site.

Improve this question

1 Answer 1

Reset to default
0

The error was thrown, because magento was unable to load the script, because it is expected to be in THEME_LOCATION\Magento_Theme\web\js instead of THEME_LOCATION\web\js

Another error source was because I had to use bootstrap.bundle.js instead of bootstrap.bundle.min.js !

Also don't forget to change the path:

THEME_LOCATION\Magento_Theme\requirejs-config.js

var config = {
    paths: {
        'bootstrap':'Magento_Theme/js/bootstrap.bundle'
    },
    shim: {
        'bootstrap': {
            'deps': ['jquery']
        }
    }
};
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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