Add Bootstrap to magento 2.2.5

Question

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

Possible duplicate of How to add custom css file in magento2.2.6? — Teja Bhagavan Kollepara, May 07 '19 at 05:44

score 1 · Answer 1 · answered May 07 '19 at 12:46

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']
        }
    }
};

score -1 · Answer 2 · edited May 07 '19 at 05:44

-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>

edited May 07 '19 at 05:44

Teja Bhagavan Kollepara

3,816
5
32
69

answered May 07 '19 at 04:12

Nangyial Ahmad

109
1
5

bootstrap does include js – fmsthird May 07 '19 at 04:34
I did that but bootstrap doesn't work on my version 2.2.5 – Noor Bouta May 07 '19 at 12:11

score -1 · Answer 3 · edited May 07 '19 at 05:35

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>

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

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 07 '19 at 12:12 — Noor Bouta, May 07 '19 at 12:12

Saphal Jha · Answer 4 · 2019-05-07T12:21:05.343

-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

edited May 07 '19 at 12:21

answered May 07 '19 at 05:31

Saphal Jha

1,873
15
26

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

Add Bootstrap to magento 2.2.5

4 Answers4