Disable or Override bootstrap css in Joomla version 3.x

Add this line to your index.php file of your template to disable bootstrap.

<?php unset($this->_scripts[JURI::root(true).’/media/jui/js/bootstrap.min.js’]); ?>

It worked for me till I updated my version of Joomla to 3.3 through the back end. Bootstrap.css gets updated. I needed to do a core override. Here are the steps.

  1. Add this line to your index.php of your template.
    <link rel=”stylesheet” href=”templates/<?php echo $this->template ?>/css/bootstrap.css” type=”text/css” />
  2. Copy bootstrap.css from “/media/jui/css/”, and paste it in the css folder of your template. Make sure to include it in your template.xml file if you are listing your css in a file index versus listing just the folder.
    <file>css/bootstrap.css</file>
    vs
    <folder>css</folder>
  3. You can strip out what you don’t need in this new css. I only need to keep the styles for the breadcrumbs.

 

This entry was posted in Uncategorized. Bookmark the permalink.

5 Responses to Disable or Override bootstrap css in Joomla version 3.x

  1. Takayuki Sejimo says:

    According to your advice, I added “_scripts[JURI::root(true).’/media/jui/js/bootstrap.min.js’]); ?> ” between and of index.php on Joomla3.3. I could’nt disable bootstrap.css.
    I an wondering why it did’nt work.
    Please advice me what is wrong or what is missing!

  2. Grimey says:

    I ended up copying the Bootstrap.css to my template/css folder and hard coding a link in the head tag of my index.php to that style sheet. I hope this helps.

  3. Takayuki Sejimo says:

    Thank you your quick reply.
    Your answer is the way to use existing bootstrap.css instead of latest bootstrap.css,isn’ it? Is it correct?
    What I need to know is how to prevent from the use of bootstrap.css with specified template, not entire Joomla 3.x.

  4. Allan says:

    No need to unset anything in your index.php file.
    Just place the newer version with the same name in JOOMLA_ROOT/templates/YOURTEMPLATE/js/jui/
    Joomla will then automatically pick this up instead of the original.

  5. Grimey says:

    I copied bootstrap.css from the media/jui/css/bootstrap.css to my template folder /templates/mytemplate/css/bootstrap.css. Then I hardcode a link in the head tag of my index.php file of my template. Deleted what I didn’t need in the copied css file and put my overrides in this css. I hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *