Bootstrap Implementation in Magento 2.0

Blog » Magento 2.0 » Theme » Bootstrap Implementation in Magento 2.0

Jun03 17

Bootstrap Implementation in Magento 2.0

Running short of time? Get PDF of the blog in your mail.

From a while now we have been noticing that a lot of people are concerned about how to implement and use BOOTSTRAP with in their theme in Magento 2.

Specially with the introduction of LESS in Magento 2.0, there have been a lot of discussions on how to make it up and running with Magento 2.0 framework.

So through this blog we would try to answer all your Problems related to the use of bootstrap in Magento 2.0, with the easiest way around.

Step 1: Start With Downloading Your Bootstrap Package

First of all it is really necessary to know what files you will be required to use if you are going to use boot strap via .less. In order to compile your own files and convert them to a css file from a .less file you need to download the following package from the link below:

https://getbootstrap.com/getting-started/#download

Download The Source Code Package!

Step 2: Finding What You Downloaded in the Package

Now as you have downloaded your package it’s time to know which are the files that you will require before you start. When you unzip the package you will find a no. of folders inside the bootstrap folder.

Now if you use the conventional method to compile the .less files via GRUNT as suggested on the above provided download link, you will find that the compiled files are found inside the dist folder and there you can find bootstrap.css followed by other versions of css all at once coming from different .less files present in the less folder. Same process is followed for the JS files too. But to use the bootstrap with Magento 2.0 there is a much easier method through static deploy.

Step 3 : Including Your Bootstrap to Your Theme

Now first we need to add our files to the theme, which we desire to use. Here we are adding two required files i.e. JS and CSS.

Include this in default.xml file of your theme

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

and

<css src="css/bootstrap.css" />

Step 4: Creating And Organizing Directory for Your Bootstrap .less Files Structure

Now to carry out this part you need to go back to the source code package you earlier downloaded.

– Now Inside the Package copy the less folder along with all the .less files and mixins folder.

Note: Copy all the .less files inside the LESS folder and the Mixins folder.

– You now need to add an underscore “_” to the names of all the files inside the less folder & the mixins folder and you also need to delete the bootstrap.less file inside the less folder.

Example:

Note: Same process will be carried out with the files inside the Mixins folder.

– Go to your theme directory in Magento 2.0
example : @your-custom-theme/web/css

Inside the /css/ directory create a “bootstrap” directory so that it looks like this :

Now paste all the files from the less folder you have just copied along with the mixins directory inside which it will contain the mixin files inside the bootstrap directory.

– As now your Directories are ready, now you need to create the main boot strap file in which we will import all the files inside the bootstrap directory.

Remember this file should be inside the /web/css/ directory and parallel to /web/css/bootstrap, name this file exactly the same name by which you have included in the <head> section followed by the .less extension.

NOW TAKE CARE OF THE TWO MOST IMPORTANT FILES:

– bootstrap.less

– _mixins.less

bootstrap.less : All the less files inside the bootstrap directory should be imported in this file.

all the files inside the respective directory.
Also do paste this text to credit twitter for there awesome contribution.

/******************************************************
* Bootstrap v3.3.6 (https://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*******************************************************/

_mixins.less : Now inside the bootstrap directory find the file _mixins.less, inside this file you will already find all the files from the mixins directory imported to it. Now observe closely, we added an underscore “_” to all the file names, so just make this minor change to all the file names inside this file.

Example:
@import “mixins/_hide-text.less”;
@import “mixins/_opacity.less”;
@import “mixins/_image.less”;
@import “mixins/_labels.less”;
Now you are all set to compile your files to generate a bootstrap.css file.

Step 5 : Compiling Your Theme Files along with Bootstrap

If You have .less files in your theme, then you have to compile those files to generate the corresponding .css files. You can do it via multiple ways like using grunt etc. But we’ll tell you the most common and easiest way which is by “Static Content Deploy“. Whenever you make changes in your .less file then you have to flush the existing static content of your theme, which resides at the following location:

>><your Magento 2 install dir>/pub/static/frontend/<vendor>/<theme>/

You have to delete all the content inside this directory. Then Deploy the static content by using the following command:

>>php bin/magento setup:static-content:deploy

Once you deploy your static content then your .less file will be compiled at the following location:

>><your Magento 2 install dir>/pub/static/frontend/<vendor>/<theme>/<locale>/

Both the files i.e. complied .less file as well as its corresponding .css file will be created inside that directory.

NOTE: Every time you make changes in your .less file then, you have to repeat the whole process.

With this we come to the end of this blog. Please share your reviews and suggestions regarding this blog. We would be happy to hear from you.

David Nguyen

06/21/2016 at 6:23 am

But i got this error: “Uncaught Error: Bootstrap’s JavaScript requires jQuery”
How can i fix it?

Reply
- CedCommerce
  
  06/22/2016 at 4:57 am
  
  It is a common error in Magento2. As you know Magento2 is using require js to load all the js files. What’s happening here is, your bootstrap is dependent on jQuery since jQuery is not loaded when that file is loading that’s why it is throwing this Exception. To resolve this error, you just need to tell magento that load jQuery first(if it is not loaded) before loading bootstrap file and to do this you have to wrap your js file code inside the require function.
  
  For Example :
  
  require([
  
  ‘jquery’
  
  ], function ($) {});
  
  Reply
  - Ben Crook
    
    09/12/2016 at 4:46 pm
    
    I would recommend using the require JS config to do this instead, it’s how you should be handling none-AMD modules within Require JS. See http://stackoverflow.com/questions/13168816/loading-non-amd-modules-with-require-js for more info, a quick example would be:
    
    // Map our module names to their relavant script
    var config = {
    “map”: {
    “*”: {
    “bootstrap”: “js/vendor/bootstrap”,
    }
    },
    
    // Define dependencies for none AMD (none require JS) third party modules – Do not use for scripts that use require – http://requirejs.org/docs/api.html#config-shim
    
    “shim”: {
    “js/vendor/bootstrap/bootstrap”: [“jquery”]
    }
    };
    
    Two links that help explain this are:
    
    – http://requirejs.org/docs/api.html#config-shim
    – http://stackoverflow.com/questions/13168816/loading-non-amd-modules-with-require-js
    
    Reply
Carlo

08/12/2016 at 3:44 am

I tried this and i get the error:
[MagentoFrameworkViewAssetContentProcessorException]
Compilation from source:
frontend//en_US/css/bootstrap.less
Unable to get content for ‘frontend//en_US/css/bootstrap/variables.less’

Reply
- CedCommerce
  
  08/17/2016 at 6:24 am
  
  Hi Carlo,
  
  This error most of the time arises due to incorrect re-naming of less files or structural issues, please check that you have renamed all the .less file inside the bootstrap folder with an “UNDERSCORE ( _ )”, we have demonstrated the process with the help of images above.
  
  if you are working on linux system then the permission of the pub/static folder should be 777
  
  If still you find any issues please reply us back with a detail description of your process we will be glad to help you.
  
  Reply
Max Alca

08/17/2016 at 6:11 pm

Can you please put a download online? Seems like its not very complicated for you, but others like me have huge problems following your guide.

Reply
Paul Cookson

08/18/2016 at 1:45 pm

Hi, I appreciate your efforts here but to someone like me this is very difficult and ambiguous to follow. I have previously created a theme to add different things to the default theme but I’m really struggling to follow your instruction.

Could you please add a download to reference?

Reply
Ben Crook

09/12/2016 at 4:52 pm

I find it much easier to just import the whole Bootstrap LESS files into vendor, no need to delete bootstrap.less and re-write it (unless I read your instructions wrong). It makes life much easier if you need to upgrade Bootstrap in the future.

I still needed to rename all files to include an underscore though.

Reply
- CedCommerce
  
  12/12/2016 at 3:01 pm
  
  Yes your suggestion is good and must also be working, but we have done so because we want all files which can affect the styling on frontend to be in the one directory and all supporting files to be in seperate directory that’s why we have created a directory structure like this and changed the content of bootstrap.less file like we want.
  
  Reply
- Patryk
  
  05/22/2017 at 4:16 am
  
  Use BOWER to manage front-end libraries. Really. We have develop this on some production site on Magento 1. Witch .bowerc you can define project folder (for 1 it was base). Even more: there is sass version of bootstrap.
  
  Reply
Rana Masud

10/12/2016 at 6:32 am

Hi, I’ve followed all the instruction you mentioned. Deploy static content successfully. All required file generate except bootstarp.css

Reply
- CedCommerce
  
  12/12/2016 at 3:01 pm
  
  I think you have missed to include bootsrap.css file in the layout. So Please Follow each and every step of the Blog very carefully then again Deploy Static Content by flushing the old static content.
  
  Reply
Pawar Nitin

01/01/2017 at 8:10 pm

Hi i want to integrate the bootstrap 3.7 in my project, I want to know that how to add .csscomb.json and .csscomb file in to bootstrap.less

Reply
- CedCommerce
  
  01/09/2017 at 1:04 pm
  
  we haven’t tried to implement csscomb in bootstrap. So really can’t tell you about it.
  
  Thanks
  
  Reply
Martin Hroššo

03/18/2017 at 9:36 pm

Hello,
when deploying static content I get this error message:

Compilation from source:
frontend/Custom/custom/sk_SK/css/bootstrap.less
Unable to get content for ‘frontend/Custom/custom/sk_SK/css/bootstrap/_bootstrap.less’

my default.xml is here:

thanks for advise.

Reply
shrikant ghogare

07/05/2017 at 3:06 pm

i follow above process but it won’t work in magento 2.1

Reply
Deepak Shinde

11/18/2017 at 9:17 am

After adding bootstrap in my project all labels are not display.

Reply