2

I have to add bootstrap 3 or 4 to my custom theme (magento 2.2.5) I tried this: How to use bootstrap in my custom theme and this Bootstrap in magento 2 theme but these ways don't work with magento 2.2.5

<head>  
    <css src="css/bootstrap.css" />
    <css src="css/bootstrap.css.map" />
    <css src="css/bootstrap.min.css" />
    <css src="css/bootstrap.min.css.map" />
    <css src="css/bootstrap-grid.css" />
    <css src="css/bootstrap-grid.css.map" />
    <css src="css/bootstrap-grid.min.css" />
    <css src="css/bootstrap-grid.min.css.map" />
    <css src="css/bootstrap-reboot.css" />
    <css src="css/bootstrap-reboot.css.map" />
    <css src="css/bootstrap-reboot.min.css" />
    <css src="css/bootstrap-reboot.min.css.map" /></head>

default_head_blocks.xml (head section)

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

};

Magento_Theme/requirejs-config.js

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

Magento_Theme/templates/html/header.phtml Also I added Bootstrap css flies at (vendor/my_theme/web/css) and added Bootstrap js files at (vendor/my_theme/Magento_Theme/web/js) I use bootstrap 4 and magento 2.2.5

Improve this question
4

4 Answers 4

Reset to default
1

The best way to include js is with Requirejs.

app/design/frontend/{Vendor}/{theme}/Magento_Theme/web/js/bootstrap/bootstrap.min.js

//bootstrap.min.js content

app/design/frontend/{Vendor}/{theme}/requirejs-config.js

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

Follow the below steps to add bootstrap files in your custom theme

1.Create default_head_blocks.xml

app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xml

    <?xml version="1.0"?>
     <!--
      /**
      * Copyright © Magento, Inc. All rights reserved.
      * See COPYING.txt for license details.
      */
     -->   
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>      
        <css src="css/bootstrap.css" />            
    </head>
</page>
  1. Add your bootstrap CSS and js files from the following file paths below

app/design/frontend/vendor-name/theme-name/web/css/web/css/bootstrap.css

  1. Execute deploy commands from the command line.
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush && chmod -R 777 var generated
Improve this answer
1
  • I did that but bootstrap doesn't work
    – Noor Bouta
    Commented May 7, 2019 at 12:12
-1

Add your Bootstrap file in,

app\design\frontend\vendor-name\theme-name\web\css\bootstrap.css

And call that files in your layout file like in,

app\design\frontend\vendor-name\theme-name\Magento_Theme\layout\default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!--Bootstrap css-->
        <css src="css/bootstrap.css" />
    </head>
</page>
Improve this answer
2
  • bootstrap does include js
    – fmsthird
    Commented May 7, 2019 at 4:34
  • I did that but bootstrap doesn't work on my version 2.2.5
    – Noor Bouta
    Commented May 7, 2019 at 12:11
-2

Follow below steos in order to include Bootstrap

1) upload your JS/CSS at below path

/app/design/frontend/vendor/theme/Magento_Theme/web/css

/app/design/frontend/vendor/theme/Magento_Theme/web/js

2) include files using default_head_blocks.xml

app/design/frontend/vendor/theme/Magento_Theme/layout/default_head_blocks.xml add these line of code

<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.css" />
          <script src="js/bootstrap.min.js"/>
    </head>
</page>

3) Execute following commands

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

Here is the doc :

https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/css-themes.html

Improve this answer
6
  • I did that but bootstrap doesn't work
    – Noor Bouta
    Commented May 7, 2019 at 12:11
  • Edited my answer please check. It's working for me
    – Saphal Jha
    Commented May 7, 2019 at 12:21
  • Maybe you version older
    – Noor Bouta
    Commented May 7, 2019 at 18:16
  • My version is 2.2.5
    – Noor Bouta
    Commented May 7, 2019 at 18:16
  • Please mentioned your code in question.
    – Saphal Jha
    Commented May 8, 2019 at 4:37

Your Answer

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

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