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.
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this communityI'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.
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
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
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.
bower_components
to web
using .bowerrc config file.
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.
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:
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: