4

In my extended LUMA theme , how to integrate Bootstrap JS and CSS .

So I can make my CMS page's layout on Bootstrap grid .

Already seen few post here : How to develop theme using twitter bootstrap in magento 2?

Any help will be highly appreciated.

Kay Lina
  • 43
  • 1
  • 6

1 Answers1

5

You can add Bootstrap this way, follow below steps

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

more you can check here related to css https://magento.stackexchange.com/a/187029/54588

Note: This solution doesn't work with Magento 2.2.3 and above

Manoj Deswal
  • 5,785
  • 25
  • 27
  • 50
  • I am getting big error like Error: Mismatched anonymous define() module: function(t,e,n){"use strict";function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function s(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function r(){return(r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}e=e&&e.hasOwnProperty("default")?.. – Magecode May 30 '18 at 10:33
  • I couldn't understand this way, are you using extended theme and which your mage version ? – Manoj Deswal May 30 '18 at 10:46
  • Magento 2.2.4. I am using custom theme . I am using bootstrap 4. – Magecode May 30 '18 at 12:10
  • okay bootstrap 4 doesn't work this way, there are some bugs ... you need another way for that,, you post question for this ...and I will give you detailed ans of adding bootstrap for in latest magento , I added BS4 in 2.2.3 and should work for you as well – Manoj Deswal May 30 '18 at 12:13
  • I have posted question. https://magento.stackexchange.com/questions/228063/how-to-add-bootstrap-4-in-magento-2-theme – Magecode May 30 '18 at 12:29
  • @ManojDeswal Do you have any idea or any documents you know about Adobe XD design to Magento Commerce custom theme. my port https://magento.stackexchange.com/q/327041/57334 – zus Nov 28 '20 at 15:22