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.

Some bootstrap loaded with <jdoc:include type="head" />

When we added <jdoc:include type="head" /> 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:

<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>

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 <jdoc:include type="head" /> 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:

<?php

$doc = JFactory::getDocument();

$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');

?>
<!DOCTYPE html>
<html>

<head>

    <jdoc:include type="head" />

</head>

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
You are viewing Section 8: How to add Bootstrap to a Joomla 3.1 Template
Section 7: How to add CSS and JavaScript files to a Joomla 3.1 Template
Section 9: How to make a Joomla 3.1 Template Responsive
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

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.......
Staff
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
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.
Thanks.
Staff
5,889 Points
2013-05-17 12:55 pm
Hello!
If you want to edit the code of the template the following link should help you identify where the code is to edit.
A very basic template soon to be a Joomla 3.0 template

If you just want to position the modules then you can follow the tutorial below to position the modules.
How to add module positions to a Joomla 3.0 template

Best Regards,
James R
2013-05-30 3:20 pm
Hi Brad,

I purpose to buy this template from https://wrapbootstrap.com/theme/clean-canvas-business-theme-WB02634G3. Do you know if your steps are also working for those kind of bootsrap templates?
Staff
17,351 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.

Regards,

Arnel C.
2013-09-24 5:24 am
Hi,

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

Warning
JInstaller: :Install: Cannot find XML setup file
Staff
9,162 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-11-29 7:49 am
How I can connect bootstrap menu style to Joomla menu?
Staff
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
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.
Staff
9,162 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?

Staff
9,162 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.

Staff
19,557 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
n/a Points
2014-04-21 1:25 pm

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

JHtml::_('bootstrap.framework');

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.

Staff
9,162 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-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

Staff
9,162 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');

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

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

21 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

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: support@InMotionHosting.com
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!