{"id":1847,"date":"2012-10-07T21:57:48","date_gmt":"2012-10-07T21:57:48","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2012\/10\/07\/add-bootstrap\/"},"modified":"2024-01-11T10:57:21","modified_gmt":"2024-01-11T15:57:21","slug":"add-bootstrap","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/","title":{"rendered":"How to add Bootstrap to a Joomla 3.1 Template"},"content":{"rendered":"

Now that we have added CSS and JS files<\/a> to the Joomla 3.0 template that we are creating, we will now add the necessary bootstrap files.<\/p>\n\n\n\n

While the necessary bootstrap files can be downloaded from the official site<\/a>, 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<\/strong>.<\/p>\n\n\n\n

Some bootstrap loaded with<\/h2>\n\n\n\n

When we added within our template\u2019s head tag<\/a>, Joomla automatically added a few JavaScript and CSS files. In the list of files below that Joomla added, you will notice that we\u2019ve highlighted the bootstrap files that it included:<\/p>\n\n\n\n

<\/path><\/path><\/svg><\/span>
<<\/span>script<\/span> <\/span>src<\/span>=<\/span>\"\/media\/system\/js\/mootools-core.js\"<\/span> <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>><\/<\/span>script<\/span>> <<\/span>script<\/span> <\/span>src<\/span>=<\/span>\"\/media\/system\/js\/core.js\"<\/span> <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<<\/span>script<\/span> <\/span>src<\/span>=<\/span>\"\/media\/system\/js\/caption.js\"<\/span> <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<<\/span>script<\/span> <\/span>src<\/span>=<\/span>\"\/media\/system\/js\/mootools-more.js\"<\/span> <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<<\/span>script<\/span> <\/span>src<\/span>=<\/span>\"\/media\/jui\/js\/jquery.min.js\"<\/span> <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<<\/span>script<\/span> <\/span>src<\/span>=<\/span>\"\/media\/jui\/js\/jquery-noconflict.js\"<\/span> <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<<\/span>script<\/span> <\/span>src<\/span>=<\/span>\"\/media\/jui\/js\/bootstrap.min.js\"<\/span> <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>><\/<\/span>script<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
What bootstrap files do we need to include?<\/h2>\n\n\n\n
According to the official bootstrap documentation<\/a>, we need to include the following files:<\/p>\n\n\n\n
    \n
  1. bootstrap.css (or bootstrap.min.css)<\/li>\n\n\n\n
  2. bootstrap.js (or bootstrap.min.js)<\/li>\n<\/ol>\n\n\n\n
    As already included bootstrap.min.js<\/em> for us, we only need to include bootstrap.min.css. To do this, we will update our template\u2019s index.php<\/em> on our Joomla hosting server<\/a> to include this file. You can see the code we added below that includes bootstrap.min.css<\/em>, which we\u2019ve highlighted in green:<\/p>\n\n\n\n
     $doc->addStyleSheet($this->baseurl . '\/media\/jui\/css\/bootstrap.min.css');<\/strong><\/pre>\n\n\n\n
    $doc->addStyleSheet(\u2018templates\/\u2019 . $this->template . \u2018\/css\/style.css\u2019); $doc->addScript(\u2018\/templates\/\u2019 . $this->template . \u2018\/js\/main.js\u2019, \u2018text\/javascript\u2019); ?><\/p>\n\n\n\n
    What Joomla looks like when bootstrap has been added<\/h2>\n\n\n\n
    After editing our template\u2019s index.php<\/em> 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.<\/p>\n\n\n\n
    \n
    BEFORE bootstrap.min.css<\/div>\n<\/th>
    		\n
    AFTER bootstrap.min.css<\/div>\n<\/th><\/tr>
    \"before<\/a>\n
    \u00a0<\/div>\n<\/td>
    		\"after<\/a>\n
    \u00a0<\/div>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
    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, Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4403],"tags":[4404],"class_list":["post-1847","post","type-post","status-publish","format-standard","hentry","category-joomla","tag-joomla-v3"],"acf":[],"yoast_head":"\nHow to add Bootstrap to a Joomla 3.1 Template | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"In this tutorial, we'll show you how to add the bootstrap javascript and css files to a Joomla 3.0 template.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add Bootstrap to a Joomla 3.1 Template | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we'll show you how to add the bootstrap javascript and css files to a Joomla 3.0 template.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2012-10-07T21:57:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-11T15:57:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_before-bootstrap-css.jpg\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"How to add Bootstrap to a Joomla 3.1 Template\",\"datePublished\":\"2012-10-07T21:57:48+00:00\",\"dateModified\":\"2024-01-11T15:57:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/\"},\"wordCount\":297,\"commentCount\":25,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_before-bootstrap-css.jpg\",\"keywords\":[\"Joomla v3\"],\"articleSection\":[\"Joomla\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/\",\"name\":\"How to add Bootstrap to a Joomla 3.1 Template | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_before-bootstrap-css.jpg\",\"datePublished\":\"2012-10-07T21:57:48+00:00\",\"dateModified\":\"2024-01-11T15:57:21+00:00\",\"description\":\"In this tutorial, we'll show you how to add the bootstrap javascript and css files to a Joomla 3.0 template.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_before-bootstrap-css.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_before-bootstrap-css.jpg\",\"width\":1011,\"height\":840,\"caption\":\"before bootstrap css Joomla\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add Bootstrap to a Joomla 3.1 Template\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add Bootstrap to a Joomla 3.1 Template | InMotion Hosting","description":"In this tutorial, we'll show you how to add the bootstrap javascript and css files to a Joomla 3.0 template.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/","og_locale":"en_US","og_type":"article","og_title":"How to add Bootstrap to a Joomla 3.1 Template | InMotion Hosting","og_description":"In this tutorial, we'll show you how to add the bootstrap javascript and css files to a Joomla 3.0 template.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2012-10-07T21:57:48+00:00","article_modified_time":"2024-01-11T15:57:21+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_before-bootstrap-css.jpg","type":"","width":"","height":""}],"author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"How to add Bootstrap to a Joomla 3.1 Template","datePublished":"2012-10-07T21:57:48+00:00","dateModified":"2024-01-11T15:57:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/"},"wordCount":297,"commentCount":25,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_before-bootstrap-css.jpg","keywords":["Joomla v3"],"articleSection":["Joomla"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/","name":"How to add Bootstrap to a Joomla 3.1 Template | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_before-bootstrap-css.jpg","datePublished":"2012-10-07T21:57:48+00:00","dateModified":"2024-01-11T15:57:21+00:00","description":"In this tutorial, we'll show you how to add the bootstrap javascript and css files to a Joomla 3.0 template.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_before-bootstrap-css.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_before-bootstrap-css.jpg","width":1011,"height":840,"caption":"before bootstrap css Joomla"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/add-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to add Bootstrap to a Joomla 3.1 Template"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":4403,"name":"Joomla","slug":"joomla","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=1847"}],"version-history":[{"count":5,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1847\/revisions"}],"predecessor-version":[{"id":108612,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1847\/revisions\/108612"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=1847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=1847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=1847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}