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:

http://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 (http://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.

Tags:
add bootstrap in magento 2 bootstrap bootstrap documentation designing how to install bootstrap how to use bootstrap less lesscompilation magento 1.9 bootstrap theme magento 2 bootstrap theme magento 2.0 theme