bootstrap banner
Bootstrap Implementation in Magento 2.0

Bootstrap Implementation in Magento 2.0

ced-pdf-title-image

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

sharepost

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!

download bootstrap 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.

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.

bootstrap directory structure

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:

less file structure

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 :

directory structure

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.

bootstrap directory structure

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

bootstrap.less

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.

less files

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.

About The Author

4
  1. Avatar for CedCommerce

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

    • Avatar for CedCommerce

      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 ($) {});

      • Avatar for CedCommerce

        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

  2. Avatar for CedCommerce

    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’

    • Avatar for CedCommerce

      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.

  3. Avatar for CedCommerce

    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?

  4. Avatar for CedCommerce

    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.

    • Avatar for CedCommerce

      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.

    • Avatar for CedCommerce

      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.

  5. Avatar for CedCommerce

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

    • Avatar for CedCommerce

      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.

  6. Avatar for CedCommerce

    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

  7. Avatar for CedCommerce
    Martin Hroššo

    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.

Leave a Reply