InMotion Hosting Support Center

Now that we have added CSS and JS files to the Joomla 3.0 template that we are creating, we will now add the necessary bootstrap files.

While the necessary bootstrap files can be downloaded from the official site, Joomla 3.0 actually includes the necessary css and javascript bootstrap files as well. As a template developer, this will make incorporating these files much easier. Follow along with this guide to learn how to add Bootstrap to a Joomla 3.1 template.

Some bootstrap loaded with

When we added within our template's head tag, Joomla automatically added a few JavaScript and CSS files. In the list of files below that Joomla added, you will notice that we've highlighted the bootstrap files that it included:

What bootstrap files do we need to include?

According to the official bootstrap documentation, we need to include the following files:

  1. bootstrap.css (or bootstrap.min.css)
  2. bootstrap.js (or bootstrap.min.js)

As already included bootstrap.min.js for us, we only need to include bootstrap.min.css. To do this, we will update our template's index.php on our Joomla hosting server to include this file. You can see the code we added below that includes bootstrap.min.css, which we've highlighted in green:

$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');



What Joomla looks like when bootstrap has been added

After editing our template's index.php on the server and saving the changes, our template is taking a little more form. You can see in the screenshots below how our template looks with and without this css file.

BEFORE bootstrap.min.css
AFTER bootstrap.min.css
before bootstrap css Joomla after bootstrap css Joomla
Was this article helpful?
You are viewing Section 8: How to add Bootstrap to a Joomla 3.1 Template
Section 7: How to Include CSS and Javascript files in a Joomla 3.1 Template
Section 9: How to make a Joomla 3.1 Template Responsive

Joomla Community Google+ Hangout #3

June 3rd, 2014

Thank you @RustyJoomla for letting me speak on the Joomla Community Google+ Hangout!

Click here to watch!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Forum Login

You are NOT logged in. You can still browse our Support Center.

To participate within our Community Support Forum:

n/a Points
2015-09-22 12:36 am

Thank you so much for this tutorial ,,.. i was very greatly helped

2015-01-06 7:21 pm

I have an existing Joomla 3.x web site and want to add a bootstrap dashboard as a URL on that site. I'm new to Bootstrap. and the Bootstrap bootstrap template has a completely different layout than the rest of my site. I'm thinking I can insert the HMTL into a Joomla article and point to the correct CSS/JS files on the server and customize it but not sure. Can someone provide me with the few steps I need to do to insert the Bootstrap?


11,186 Points
2015-01-06 7:26 pm
It is very likely that Bootstrap is already included within your template, but if not, you would simply add it to the template by following this guide. Of course, the template will not be the same, but the basic steps in adding the Bootstrap framework will be the same.
n/a Points
2014-07-11 9:23 pm

hola saludo para todos estoy haciendo una plantilla de cero con mis conocimientos de html y css con diseño propio la cuestion es que al incluir el codigo $ Doc-> addStylesheet (. $ This-> baseurl '/ media / jui / css / bootstrap.min.css');me sale este error

Parse error: syntax error, unexpected 'Doc' (T_STRING), expecting variable (T_VARIABLE) or '$' in C:\xampp\htdocs\aprender\templates\vitrinasexhilum\index.php on line 4

por fa ayuda

11,186 Points
2014-07-14 9:41 am
It appears that you have a space between the "$" symbol and the variable name, as well as other unnecessary spaces. I recommend removing the spaces like the following:

$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');

n/a Points
2014-04-21 1:25 pm

The default Joomla template, Protostar, includes the following statement:


so I think the statemen <jdoc:include type="head" /> alone would not add bootstarp, as mentioned in this article. My first post wasn't exactly what I ment. My bad.

11,186 Points
2014-04-21 1:34 pm
There are of course several was to include it, but within the method mentioned above, we have included the Bootstrap files within the header file, which will allow the files to be referenced correctly and include Bootstrap support.
n/a Points
2014-04-21 4:06 am
Hi, It appears that in Joomla 3.2.3, doesn't include bootstrap.min.js automatically anymore.
11,186 Points
2014-04-21 9:20 am
I have checked on this with a fresh Joomla 3.2.3 installation and the bootstrap.min.js is indeed still located there. If you do not see it, you may have issues within your Joomla installation. I recommend replacing it from the default Joomla files if you need it.
n/a Points
2014-04-21 12:54 pm

Dear Jeff,

What template did you use?

11,186 Points
2014-04-21 1:02 pm
This was using the default Joomla template, however, the bootstrap.min.js file is independent of any themes and are stored within /media/jui/js/bootstrap.min.js.
n/a Points
2014-09-03 10:32 pm

I'm sure this is a dumb question, but where do I locate media/jui/css/bootstrap-rtl.css (in Joomla 3.3.3)? I was given a set of 4 fixes for creating nested menus in protostar. 3 of the 4 are under headings that are easy to locate (e.g. templates/protostar/css/template.css and templates/protostar/less/template.less). But where on earth do I locate media/jui/css/bootstrap-rtl.css ? Many thanks in advance.

43,761 Points
2014-09-04 8:06 am
Hello Gordon,

Look for the 'media' folder in the base folder where your Joomla is installed. From there just follow the path looking for the 'jui' folder next, then the 'js' folder. Once there, you will see the destination file of 'bootstrap.min.js'.

Kindest Regards,
Scott M
9,968 Points
2013-11-29 5:35 pm
Hello jleito,

If you're using Joomla 3.0 or newer than Bootstrap should already be included, or if you've included Bootstrap to Joomla using the guide above then it should be ready for use as well.

Then you just need to use the Module Manager to edit your menu by changing the Menu Class Suffix option, like is explained in our guide on how to create a horizontal menu in Joomla.

You'd want to use one of the Bootstrap nav components such as either nav-tabs, or nav-pills to apply those styles to your menu buttons.

Please let us know if you had any further questions at all.

- Jacob
2013-11-29 7:49 am
How I can connect bootstrap menu style to Joomla menu?
2013-09-24 5:24 am

I have done all this. But I cannot seem to install bootstrap. I get the following error:

JInstaller: :Install: Cannot find XML setup file
11,186 Points
2013-09-24 7:57 am
This is caused due to a template or extension that it attempted to be installed which is for an earlier version of Joomla than the one you are running. The following post on Joomla's forums will provide you with more information as well as steps that you could take to possibly correct the issue:

JInstaller: :Install: Cannot find Joomla XML setup file
2013-05-30 3:20 pm
Hi Brad,

I purpose to buy this template from Do you know if your steps are also working for those kind of bootsrap templates?
42,943 Points
2013-05-30 4:22 pm
Hello Basti5,

As far as we can tell, as long as the theme author's are compatible with the bootstrap code, then it should follow the same steps. If there are any variances you will need to double-check with the author of the theme.


Arnel C.
2013-05-17 12:20 pm
Where is your template getting the arrangement of modules from. What would I need to do to customize the arrangement of modules?
(specifically I don't want any sidebars, just a series of stacked modules.
5,889 Points
2013-05-17 12:55 pm
If you want to <a href="" target="_blank">edit the code of the template</a> the following link should help you identify where the code is to edit.
<a href="" target="_blank">A very basic template soon to be a Joomla 3.0 template</a>

If you just want to position the modules then you can follow the tutorial below to position the modules.
<a href="" target="_blank">How to add module positions to a Joomla 3.0 template</a>

Best Regards,
James R
2013-03-30 1:02 pm
Hi Brad,
You say that "Joomla 3.0 actually includes the necessary css and javascript bootstrap files as well" but in the list of files generated by <jdoc: include type="head" /> the bootstrap.min.js is not included. You then say we have to add this with:
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
My problem is that bootstrap.min.css is overriding my own css in a form which I am implementing in a Joomla 3.0 site. I decided to try to show the form on a page with my own 'verybasictemplate' which I intend to create by modifying an existing basic template. To avoid bootstrap.min.css overriding my form css I want to omit the file being loaded by the index.php in my 'verybasictemplate'. But if bootstrap.min.css is not automatically loaded by standard Joomla templates, then I don't need to find out how to modify the template to avoid loading the file?
Is bootstrap.min.css automatically loaded by Joomla 3.0 templates or not? That is my question - sorry if I have not been clear......
2013-03-30 5:50 pm
And since I posted that question I have now noticed that the template.css file in the protostar template actually includes bootstrap.min.css. So even if I can avoid loading the bootstrap file it will still be there in the protostar template.......
5,889 Points
2013-04-01 1:18 pm
Joomla 3.0 does not come with it automatically. The bootstrap code can be commented out if you need it disabled. It should not effect the template adversely.

Best Regards,
James R
n/a Points
2016-12-24 1:29 am

CSS is a hiearchy of rules so if you want your css to override bootstrap simply place your css after bootstrap. I tend to make my templates different. I create a file where I define all of my css js and meta tags just like you would in php script. No need to use the joomla framework if you plan on making this an in-house application. I try not to touch the joomla framework unless I have to because upgrades will ruin you. Good luck!!

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

25 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail:
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!