Our template as it looks now<\/h2>\n
You can see in the screenshot to the right how our Joomla 3.0 template looks at this time.<\/p>\n As Bootstrap and its responsive features basically control the structure of the page, we can remove any previous CSS that we\u2019ve added that deals with the layout of the page (vs. styling the page, as in colors , font sizes, etc.)<\/p>\n All of the code in our css\/style.css file controls the template\u2019s layout, so we are going to delete all of the code in that file. The screenshot to the right shows our template after all the code has been deleted from our css\/style.css file.<\/p>\n As per the official documentation, we need to add the following two lines of code to our template to turn on the responsive features:<\/p>\n The following lines, highlighted in green below, show how we incorporated this code in our template\u2019s index.php file.<\/p>\n We won\u2019t show you a screenshot of these changes, as at this point they have made no impact to how the template looks.<\/p>\n The bootstrap documentation says to set the main div that holds all of your content to a class of container. In our starting template, the main div has a class of main_container, as seen in the code below:<\/p>\n After making the necessary change, changing the class from main_container to container, our code looks like this:<\/p>\n As you can see in the screenshot to the right, our template is now taking a little more form to it.<\/p>\n Again, you\u2019ll want to read the official documentation<\/a> to learn more about adding row and span classes to your template. In essense, the row class defines a container that will hold span* classes. A row is divided into 12 columns. If you wanted one column to be 3\/4 of the page, and another to be 1\/4 of the page, those fractions would equate to 9 and 3. The bellow is a basic example of how you could setup the 3\/4 and 1\/4 layout:<\/p>\n![\"our-template-before-making-responsive\"](\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_our-template-before-making-responsive.jpg\")
<\/a><\/p>\nRemoving any css that controls page structure<\/h2>\n
![\"after-removing-css\"](\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_after-removing-css.jpg\")
<\/a><\/p>\nAdding bootstrap-responsive.css and the viewport meta tag<\/h2>\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<link href=\"\/support\/assets\/css\/bootstrap-responsive.css\" rel=\"stylesheet\"><\/pre>\n
<?php\n$doc = JFactory::getDocument();\n$doc->addStyleSheet($this->baseurl . '\/media\/jui\/css\/bootstrap.min.css');\n$doc->addStyleSheet($this->baseurl . '\/media\/jui\/css\/bootstrap-responsive.css');<\/strong>\n$doc->addStyleSheet('templates\/' . $this->template . '\/css\/style.css');\n$doc->addScript('\/templates\/' . $this->template . '\/js\/main.js', 'text\/javascript');\n?>\n<!DOCTYPE html>\n<html>\n<head>\n <jdoc:include type=\"head\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/strong>\n<\/head><\/pre>\nAdding the container class<\/h2>\n
<body>\n <!-- main container -->\n <div class='main_container'><\/strong><\/pre>\n
<body>\n <!-- main container -->\n <div class='container'><\/strong><\/pre>\n
![\"after-adding-container-class\"](\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_after-adding-container-class.jpg\")
<\/a><\/p>\nAdding row and span* classes<\/h2>\n
<div class=\"row<\/strong>\">\n <div class=\"span9<\/strong>\">Larger content area<\/div>\n <div class=\"span3<\/strong>\">Smaller sidebar area<\/div>\n<\/div><\/pre>\n
![\"responsive-template-completed\"](\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_responsive-template-completed.jpg\")
<\/a><\/p>\n