How to add Bootstrap to a Joomla 3.0 Template
Written by Brad MarkleNow 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:
- bootstrap.css (or bootstrap.min.css)
- 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 |
|---|---|
 |
 |
Best Regards,
James R
(specifically I don't want any sidebars, just a series of stacked modules.
Thanks.
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
Building a Basic Joomla 3.0 Template with Bootstrap
Latest Questions
Need more Help?
Search
Ask the Community!
Current Customers
| Chat: | Click to Chat Now | E-mail: | support@InMotionHosting.com |
|---|---|---|---|
| Call: | 888-321-HOST (4678) | Ticket: | Submit a Support Ticket |
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......