14

I've to add Bootstrap 4 in my custom theme.

I add Bootstrap 3 by using the reference:

How to use bootstrap in my custom theme

But, bootstrap 4 is not working.

Rafael Corrêa Gomes
  • 13,309
  • 14
  • 84
  • 171
Magecode
  • 1,504
  • 2
  • 18
  • 43

4 Answers4

32

For adding Bootstrap 4 In Magento 2.2.3 (tested) & above in your custom theme follow below steps

1) Bootstrap css files inside web folder

Note: THEME_LOCATION => app\design\frontend\vendor-name\theme-name\

THEME_LOCATION\web\css\bootstrap.css

Call bootstrap css files in default_head_blocks

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

Adding css

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

2) Adding Js files in bundle form rather then individual because individual doesn't work

Place bootstrap.bundle.js files can download from here 

THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.js

Call Bootstrap Js Into requirejs-config.js

THEME_LOCATION\Magento_Theme\requirejs-config.js

code for 

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

Add below code in header.phtml after your already present script tag

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

Code:

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

Run Below Commands:

php bin/magento setup:static-content:deploy (Append -f if you are using Magento 2.2.x >= version)

php bin/magento cache:flush

Note: Tested on Magento 2.2.3 and Latest as well 2.2.6. Also tested on 2.3.3

Updated : Download Bootstrap compiled from here and use bundle js

Black
  • 3,310
  • 4
  • 31
  • 110
Manoj Deswal
  • 5,785
  • 25
  • 27
  • 50
  • Ok, Thanks. I will try this solution. BTW What is the difference between bootstrap.bundle.js and bootstrap.js? – Magecode May 30 '18 at 13:13
  • Popper.js included in bundle js ..... and jquery is already inside magento.... popper doesn't work alone but it works using as a bundle – Manoj Deswal May 30 '18 at 15:03
  • @Magecode is it working on Magento 2.2.4 ? – Manoj Deswal Jun 01 '18 at 03:51
  • Hello @ManojDeswal I have added Bootstrap 4 same as you answer

    but when I refresh the page and click on any dropdown like currency dropdown then I get below error of popper js

    popper.js:1136 Uncaught TypeError: Cannot read property 'setAttribute' of undefined

     – mansi Dec 25 '18 at 08:55
  • @mansi are you still facing the popper.js error ? – Manoj Deswal Dec 26 '18 at 04:51
  • @ManojDeswal thanks for the reply actually, bootstrap js working fine but when a page is in loading state and if I click on any drop-down toggle like currency dropdown then I am facing popper js error "Uncaught TypeError: Cannot read property 'setAttribute' of undefined" – mansi Dec 26 '18 at 07:20
  • this error comes when we use popper.js but using bootstrap.bundle.js don't face such error, are you using popper js with bundle js ? – Manoj Deswal Dec 26 '18 at 07:24
  • No, I am using bootstarp.bundle.js and add dependency of bootstrap in any custom js then this error comes – mansi Dec 27 '18 at 05:24
  • did you call bootstrap js in this file :> app\design\frontend\vendor-name\theme-name\Magento_Theme\requirejs-config.js ..... as mentioned above ? – Manoj Deswal Dec 27 '18 at 05:37
  • yes, I have called in required-config.js file – mansi Dec 27 '18 at 06:45
  • it should work, even I am working on 2.2.7 and its working well. However if you are following the above method and its not working then you should try bower package manager (I din't tried this way).

    I am using above method on 7 of my projects and its working well, no error yet .

    you can share screenshots of your header, config.js file

     – Manoj Deswal Dec 27 '18 at 06:51
  • why does is the css in the local theme web/css and the js in the Magento_Theme/web/ folder? – Scott Feb 11 '19 at 22:37
  • @Scott in previous version of Bootstrap (3.7) it was okay to keep JS and CSS both in web/css. But in latest version was not working that way , so JS files are called in requirejs-config.js . Its just alternate way of adding JS. – Manoj Deswal Feb 15 '19 at 04:02
  • I get Uncaught Error: Script error for: bootstrap, tried it on Magento 2.3 – Black Nov 28 '19 at 12:14
  • I haven't tried in 2.3 version yet. Might be work with few tweaks. However, I have upgraded magento version to 2.3.2 and it still works fine. But have to try on a fresh install – Manoj Deswal Nov 28 '19 at 12:20
  • @ManojDeswal, or maybe your instructions is missing something. I followed them 100% – Black Nov 29 '19 at 07:03
  • @ManojDeswal, I have a question about the code in requirejs-config.js. Do I have to use your code 1:1 or do I have to copy the file from the original theme and just insert your code in it? – Black Nov 29 '19 at 07:06
  • @Black this is what worked for me with default theme, I have tried with fresh install today and worked for me. the error you are specify is not coming in my way.

    There might be other things which can create problems. are you using default install ?

     – Manoj Deswal Nov 29 '19 at 07:07
  • @ManojDeswal, yes it is basically a fresh magento with imported database from the old magento 1 shop. – Black Nov 29 '19 at 07:08
  • Just use the code I have given ...that should work... are you using luma extended theme ? – Manoj Deswal Nov 29 '19 at 07:09
  • Yes, I am extending from luma – Black Nov 29 '19 at 07:28
  • 1
    I finally figured it out... I placed the js in MY_THEME/web/js instead of MY_THEME/Magento_Theme/web/js im sorry – Black Nov 29 '19 at 11:17
  • 1
    This was the standard working way before 2.2.3 but in 2.2.3 it didn't worked and I discovered the above way. But it stills works in 2.3.2 .... The way you done that's proper way – Manoj Deswal Nov 29 '19 at 11:20
  • But how can we set the order so that bootstrap loads on first place? My bootstrap does overrides stuff like changing the color of anchors to blue – Black Mar 06 '20 at 16:45
  • 1
    1000 times thank you :) – VishalParkash Jan 22 '21 at 15:02
11

You can add Bootstrap this way, follow below steps: Note: This solution doesn't work with Magento 2.2.3 and above

1) Place your JS and CSS at below location

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

/app/design/frontend/vendor-name/theme-name/web/js

2) Call files in your default_head_blocks.xml

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

add these line of code

<css src="css/bootstrap.css" />
 <script src="js/bootstrap.min.js"/>

3) Run below commands 

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy
gnicko
  • 400
  • 3
  • 20
Mayur Rathod
  • 542
  • 4
  • 12
6

You should use bower package manager to add bootstrap 4 in your theme web folder.

WHY? Because there are constant update & easy to manage. Run the update command the Bootstrap 4 is updated.

ALSO: We prefer to use LESS or SCSS with bootstrap 4. Its robust and easy to refactor.

Follow below steps to install bower:

1) Install LTS nodeJS on your respective OS from: https://nodejs.org/en/

2) Install bower package manager globally: npm install -g bower

3) Install git from: https://git-scm.com/

4) Install bootstrap 4:

In web directory of you Magento custom theme

For example: Open terminal at <Magento root>/app/design/frontend/MyCustom/theme/web/

Run this command to install bootstrap 4: bower install bootstrap4

5) After this you need to add fonts, bootstrap CSS & bootstrap JS in default layout node to work boostrap on every page in Magento_Theme module in your custom theme.

We use gulp to compile SCSS to CSS.

Ananth
  • 142
  • 5
  • How to use bower package manager? – Magecode Jun 06 '18 at 11:17
  • You need to download node from here: link. If you are using linux then use respective package manager. Then install bower using this command: sudo npm install -g bower. After install bower install js/css packages in your Theme directory: app/design/frontend/My/Theme/ – Ananth Jun 07 '18 at 02:47
  • Here you need to change default install directory from bower_components to web using .bowerrc config file. – Ananth Jun 07 '18 at 02:54
  • 1
    I think Bower is not anymore relevant. Bower team even recommends using Yarn or Webpack or Parcel for frontend projects. – phagento Nov 26 '18 at 13:06
  • First open package.json file of Bootstrap 4, if you see files array key it shows only that file type matching will be add to your project directory. files key is used by Bower command only. If you want to contribute or recompile Bootstrap then you should try Yarn. Because it will add unnecessary file/directory to the project. Webpack and Parcel are for node project they compile to JavaScript use for frontend. – Ananth Nov 27 '18 at 16:39
  • This is a "suggestion" or a comment, not an answer. If you are going to suggest using Bower, please explain how to do that. There is also some question as to the relevancy of this method. – gnicko Mar 11 '19 at 17:06
  • @g-man1066 added commands & useful links to install packages – Ananth Mar 21 '19 at 18:41
5

After reading the above answers, I have another suggestion: put Bootstrap 4 into a module, and use CDN to link the Bootstrap files instead.

I assume you know how to create a basic module. If not, you can refer to here. So here is the steps:

  • Create file app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xml with the following codes:

    <?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 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>
        <link rel="stylesheet"  type="text/css" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" src_type="url" />   
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" src_type="url"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous" src_type="url"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous" src_type="url"></script>
    </head>
</page>

  • Activate the module and run setup:upgrade command, that's all!

Benefits:

  1. Apply to ALL themes at once, no matter the theme is active or inactive
  2. You don't need to download any files into your system
  3. Very easy to update. Just replace the CDN link is the only task you need to do if needed. You don't need to compile and replace any files when you update to Bootstrap 5, 6, 7...
  4. You can enable and disable Bootstrap with ONE simple command.
  5. You don't need to override anything. Everything is on top of the current codes.
  6. No need to run static deploy which could be time consuming

Tested on Magento 2.2.4, but should work across all Magento 2.X versions. EDIT* changed the link tags href to src to be inline with the devdocs. Reference:

Joey
  • 3
  • 1
PY Yick
  • 2,705
  • 1
  • 17
  • 35