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

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']
        }
    }
};
-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
  • I did that but bootstrap doesn't work – Noor Bouta May 7 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>
  • bootstrap does include js – fmsthird May 7 at 4:34
  • I did that but bootstrap doesn't work on my version 2.2.5 – Noor Bouta May 7 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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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