How to use Boostrap in your Magento store

Posted by Labels: at

In this article I will show you how to add Boostrap files in Magento using local.xml,
(if you not sure what is local.xml, you will need to read "local.xml file for beginners")

Step by step

1. First you need to download Bootstrap at https://getbootstrap.com/

2. Unzip files on to your Theme's Skin folder

Folder Path: skin/frontend/package_name/theme_name/
This is where you will find you /css,  /images and /js folder

3. Next you will need to create the file local.xml, under your theme's Layout folder

File Path: app/design/frontend/package_name/theme_name/layout/local.xml 

4.  Open your local.xml and add paste the following script: 



<?xml version="1.0"?><layout>     
      <default>

        <!--css-->
        <reference name="head">
            <action method="addCss">
                <stylesheet>css/bootstrap.min.css</stylesheet>
             </action>
        </reference>
     </default>
</layout>


This will tell Magento to add all Boostrap file/s inside <head> of all your pages. If you would like to only load Boostrap files on specific pages of your store, you need to read "How to use local.xml to modify specific pages".  eg you will learn how to only load Boostrap or any other script files only on the product page or the category catalog view.

I hope this article was helpful to you, please leave your question/s on the comments section below and I will do my best to answer back.






Post a Comment

Back to Top