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.

 

5 Comments

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

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>