{"id":2767,"date":"2013-06-14T19:49:20","date_gmt":"2013-06-14T19:49:20","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/06\/14\/adding-the-bootstrap-files-to-your-responsive-template\/"},"modified":"2021-08-16T23:12:50","modified_gmt":"2021-08-17T03:12:50","slug":"adding-the-bootstrap-files-to-your-responsive-template","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/","title":{"rendered":"Adding the Bootstrap files to your Responsive Template"},"content":{"rendered":"<p><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png\" rel=\"lightbox-0\"><img decoding=\"async\" width=\"800\" height=\"650\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png\" class=\"optimized-lcp-image\" alt=\"Responsive template with no Bootstrap Theme Roller\" loading=\"eager\" fetchpriority=\"high\" sizes=\"(max-width: 768px) 100vw, 768px\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png 800w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-300x244.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-768x624.png 768w\"><\/a><\/p>\n<div style=\"clear:both;\"><\/div>\n<p>Once you have the <a href=\"\/support\/edu\/wordpress\/bootstrap-theme-roller\/\" target=\"_blank\" rel=\"noopener\">Bootstrap Theme Roller created and downloaded<\/a>. You will need to add the files to your website. The image to the right shows what the responsive template looks like before you add the Bootstrap Theme. You can compare what the theme looks like before the bootstrap is added and after in the following files. Below are the files you will need for the tutorial.<\/p>\n<p><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_responsive-theme-start.rar\">responsive-theme-start.rar<\/a><br> <a href=\"images\/stories\/edu\/website-design\/206\/bootstrap-files\/responsive-theme-orig\" target=\"_blank\" rel=\"noopener\">Demo Responsive Template without Bootstrap added<\/a><\/p>\n<p><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_responsive-theme-final.rar\">responsive-theme-final.rar<\/a><br> <a href=\"images\/stories\/edu\/website-design\/206\/bootstrap-files\/responsive-theme-final\" target=\"_blank\" rel=\"noopener\">Demo the Responsive Template with Bootstrap added<\/a><br style=\"clear: both;\"> <\/p>\n<p>Once you have the Responsive template files and the Bootstrap Theme Roller style, follow the steps below to add the Bootstrap files to your site.<\/p>\n<h2>Copy the necessary Bootstrap files<\/h2>\n<p>The first thing you will need to do is copy all the Bootstrap Theme Roller files to your Responsive Template. Below are the steps to do this.<\/p>\n<ol class=\"article_list img-rounded\">\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-1-copy.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Copy files Bootstrap Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-1-copy.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>Extract the files from the Bootstrap archive on your local computer. Copy the <em>js<\/em>, <em>img<\/em>, and <em>css<\/em> folders with the files in them to your Responsive Template folder. <br style=\"clear: both;\"> <\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-2-save-page.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Save the Bootstrap Theme Roller  page\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-2-save-page.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>Click \u201c<em>Save A<\/em>s\u201d in your browser to download the html from the <a href=\"https:\/\/www.bootstrapthemeroller.com\" target=\"_blank\" rel=\"noopener\">Bootstrap Theme Roller page<\/a> to your local computer.   <\/p>\n<p class=\"alert\" style=\"width:430px\"><strong>Note!<\/strong> Downloading the Bootstrap Theme Roller page to your computer will save a copy of all the code you will need to add the styles to your Responsive Template. This is for your reference only and will be used through out this tutorial series to get the code you need for your Bootstrap theme.<br style=\"clear: both;\"> <\/p>\n<\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-3-rename.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Rename teh files Bootstrap Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-3-rename.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>Rename the page to <em>ThemeRoller.htm<\/em> and save the page. You will have an html page and a folder holding all the files.<br style=\"clear: both;\"> <\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-4-copy-files.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Copy files Bootstrap Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-4-copy-files.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>Drag the <em>ThemeRoller.htm<\/em> and the folder for it into your Responsive Template folder. <br style=\"clear: both;\"> <a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-5-file-view.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"File View Bootstrap Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-5-file-view.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a><\/p>\n<div style=\"clear:both;\"><\/div>\n<p>You should see the folders look like the snapshot to the right. This allows you to have a full copy of all the HTML code for the buttons, forms, dropdowns and everything you will need.<br style=\"clear: both;\"> <\/p>\n<\/li>\n<\/ol>\n<h2>Add the JavaScript and CSS links to the head<\/h2>\n<ol class=\"article_list img-rounded\">\n<li>Open up the <em>ThemeRoller.htm<\/em> page in an HTML editor.<\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-6-scripts.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Links to the Scripts Bootstrap Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-6-scripts.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>On lines 6194 to 6201 the code you need for your Responsive template can be found. The line numbers may vary. The important code is the like following.   <\/p>\n<p class=\"alert\" style=\"width:430px\"><strong>Important!<\/strong> The <em>ga.js<\/em> and the <em>jquery.js<\/em> are required for the drop menus and other behaviors to work. If your menus do not work, you may not have these files.<\/p>\n<pre style=\"padding:5px;\">&lt;script src=\"ThemeRoller\/ga.js\" async=\"\" type=\"text\/javascript\"&gt;&lt;\/script&gt; &lt;script src=\"ThemeRoller\/jquery.js\"&gt;&lt;\/script&gt; &lt;script src=\"ThemeRoller\/bootstrap.js\"&gt;&lt;\/script&gt; &lt;script type=\"text\/javascript\"&gt;      $('#loadingModal').modal('show');      $(function(){      $('#loadingModal').modal('hide');      }); &lt;\/script&gt;<\/pre>\n<p> <br style=\"clear: both;\"> <\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-7-paste-scripts.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Paste teh scripti links Bootstrap Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-7-paste-scripts.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>Open the <em>index.html<\/em> page of your responsive template. Paste the script code in the head section of your template. You can place the code after the stylesheet links.<br style=\"clear: both;\"> <\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-8-rename.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"rename the paths Bootstrap Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-8-rename.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>Rename the links in the scripts to your folder location. In this case, the <em>js<\/em> folder holds the JavaScripts so we will rename the <em>ThemeRoller<\/em> part of the link to <em>js<\/em>. The final code is below.   <\/p>\n<pre style=\"padding:5px;\">&lt;script src=\"<span style=\"color:red;\">js\/ga.js<\/span>\" async=\"\" type=\"text\/javascript\"&gt;&lt;\/script&gt; &lt;script src=\"<span style=\"color:red;\">js\/jquery.js<\/span>\"&gt;&lt;\/script&gt; &lt;script src=\"<span style=\"color:red;\">js\/bootstrap.js<\/span>\"&gt;&lt;\/script&gt; &lt;script type=\"text\/javascript\"&gt;      $('#loadingModal').modal('show');      $(function(){      $('#loadingModal').modal('hide');      }); &lt;\/script&gt;<\/pre>\n<p> <br style=\"clear: both;\"> <\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-11-css-link.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"CSS link to the Bootstrap Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-11-css-link.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>Add the link to your stylesheet in the head section.  This will link your Bootstrap styles to your Responsive template. The code is below.   <\/p>\n<pre style=\"padding:5px;\">&lt;link href=\"css\/bootstrap.css\" rel=\"stylesheet\"&gt;<\/pre>\n<p><br style=\"clear: both;\"> <\/p><\/li>\n<\/ol>\n<h2>Copy ga.js and jquery.js<\/h2>\n<p><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-9-copy-js-files.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Copy th JavaScripti files Bootstrap Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-9-copy-js-files.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a><\/p>\n<div style=\"clear:both;\"><\/div>\n<p>Now that you have the links in your head section, you will need to copy the <em>ga.js<\/em> and the <em>jquery.js<\/em> to your <em>js<\/em> folder in your Responsive Template. Copy the <em>ga.js<\/em> and the <em>jquery.js<\/em> files to your <em>js<\/em> folder. <br style=\"clear: both;\"> <\/p>\n<p><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-10-js-view.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"View of files in the folder Bootstrap Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme-10-js-view.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a><\/p>\n<div style=\"clear:both;\"><\/div>\n<p>When all done you should have the following JavaScript files in your js folder. See image to the right.<\/p>\n<pre style=\"padding:5px;\">bootstrap.js bootstrap.min.js ga.js jquery.js<\/pre>\n<p>Now you have all the files necessary to develop your Bootstrap Responsive template. The next step is to add th SS classes and the HTML code to your site to make the styles come alive.<br style=\"clear: both;\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Once you have the Bootstrap Theme Roller created and downloaded. You will need to add the files to your website. The image to the right shows what the responsive template looks like before you add the Bootstrap Theme. You can compare what the theme looks like before the bootstrap is added and after in the<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/\"> Read More ><\/a><\/p>\n","protected":false},"author":9,"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":[4346],"tags":[],"class_list":["post-2767","post","type-post","status-publish","format-standard","hentry","category-website-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Adding the Bootstrap files to your Responsive Template | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"After you download the Bootstrap Theme Roller theme from the website, you will need to put the files in to your Responsive template. This article will teach you how.\" \/>\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\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding the Bootstrap files to your Responsive Template | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"After you download the Bootstrap Theme Roller theme from the website, you will need to put the files in to your Responsive template. This article will teach you how.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/\" \/>\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=\"2013-06-14T19:49:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:12:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\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=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\"},\"headline\":\"Adding the Bootstrap files to your Responsive Template\",\"datePublished\":\"2013-06-14T19:49:20+00:00\",\"dateModified\":\"2021-08-17T03:12:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/\"},\"wordCount\":591,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png\",\"articleSection\":[\"Website Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/\",\"name\":\"Adding the Bootstrap files to your Responsive Template | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png\",\"datePublished\":\"2013-06-14T19:49:20+00:00\",\"dateModified\":\"2021-08-17T03:12:50+00:00\",\"description\":\"After you download the Bootstrap Theme Roller theme from the website, you will need to put the files in to your Responsive template. This article will teach you how.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png\",\"width\":800,\"height\":650,\"caption\":\"Click here to view the larger image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding the Bootstrap files to your Responsive 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 &amp; 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\/0ba9f3ef6fadef71df5aa120ff996c41\",\"name\":\"InMotion Hosting Contributor\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/jamesr\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding the Bootstrap files to your Responsive Template | InMotion Hosting","description":"After you download the Bootstrap Theme Roller theme from the website, you will need to put the files in to your Responsive template. This article will teach you how.","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\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/","og_locale":"en_US","og_type":"article","og_title":"Adding the Bootstrap files to your Responsive Template | InMotion Hosting","og_description":"After you download the Bootstrap Theme Roller theme from the website, you will need to put the files in to your Responsive template. This article will teach you how.","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-06-14T19:49:20+00:00","article_modified_time":"2021-08-17T03:12:50+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41"},"headline":"Adding the Bootstrap files to your Responsive Template","datePublished":"2013-06-14T19:49:20+00:00","dateModified":"2021-08-17T03:12:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/"},"wordCount":591,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png","articleSection":["Website Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/","name":"Adding the Bootstrap files to your Responsive Template | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png","datePublished":"2013-06-14T19:49:20+00:00","dateModified":"2021-08-17T03:12:50+00:00","description":"After you download the Bootstrap Theme Roller theme from the website, you will need to put the files in to your Responsive template. This article will teach you how.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-files_create-bootstrap-theme.png","width":800,"height":650,"caption":"Click here to view the larger image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Adding the Bootstrap files to your Responsive 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 &amp; 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\/0ba9f3ef6fadef71df5aa120ff996c41","name":"InMotion Hosting Contributor","url":"https:\/\/www.inmotionhosting.com\/support\/author\/jamesr\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2767","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=2767"}],"version-history":[{"count":2,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2767\/revisions"}],"predecessor-version":[{"id":84552,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2767\/revisions\/84552"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=2767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=2767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=2767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}