{"id":64463,"date":"2020-12-07T14:00:43","date_gmt":"2020-12-07T19:00:43","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=64463"},"modified":"2021-11-19T01:13:25","modified_gmt":"2021-11-19T06:13:25","slug":"how-to-use-bootstrap-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/","title":{"rendered":"How to Use Bootstrap in WordPress"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img-1024x538.jpg\" alt=\"How to use Bootstrap article header image\" class=\"wp-image-64526\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img-1024x538.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img-300x158.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img-768x403.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img.jpg 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>Using <strong>Bootstrap in WordPress<\/strong> can give you many opportunities to create pages, posts, or even a theme with some very distinctive features.\u00a0 Bootstrap is a framework that will allow you to create responsive websites that will work with a variety of devices and screen sizes.\u00a0\u00a0<\/p>\n\n\n\n<p>You can also use it to extend the functionality of an existing WordPress site that you would not normally find in a default installation.\u00a0 This guide will walk you through the different ways that you can use Bootstrap for a WordPress website.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#what-is-bootstrap\">What is Bootstrap?<\/a><\/li><li><a href=\"#install-bootstrap\">How do you Install Bootstrap for WordPress?<\/a><\/li><li><a href=\"#using-bootstrap\">Using Bootstrap in WordPress<\/a><\/li><\/ul>\n\n\n<div class=\"jumbotron\">\r\n<p>Say goodbye to slow loading times and hello to high-performance websites with our <a href=\"https:\/\/www.inmotionhosting.com\/vps-hosting\/wordpress?mktgp=t&irgwc=1&affiliates=5001860&utm_campaign=Jumbotron&utm_source=supportcenter&utm_medium=cta&utm_term=wp-cta2\">WordPress VPS Hosting<\/a> plans. Experience 40x faster WordPress page load speeds on purpose-built servers that guarantee 99.99% uptime.<\/p>\r\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>High-Performance VPS    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Premier Care    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Free SSL &amp; Dedicated IP    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Advanced Server Caching<\/p>\r\n<p><a class=\"btn btn-primary btn-lg\" href=\"https:\/\/www.inmotionhosting.com\/vps-hosting\/wordpress?mktgp=t&irgwc=1&affiliates=5001860&utm_campaign=Jumbotron&utm_source=supportcenter&utm_medium=cta&utm_term=wp-cta2\">Managed WordPress VPS<\/a><\/p>\r\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-bootstrap\">What is Bootstrap?<\/h2>\n\n\n\n<p>The software is a CSS framework for responsive, front-end website development.\u00a0 <a href=\"https:\/\/getbootstrap.com\/docs\/4.5\/about\/overview\/\">Bootstrap<\/a> was created in 2010 by developers at Twitter.\u00a0 It has become one of the most popular open-source projects in the world. It has several major versions that have evolved the software into a responsive web solution with mobile devices as a primary focus.<br><\/p>\n\n\n\n<p>Bootstrap version 4 brought the integration of <a href=\"https:\/\/sass-lang.com\">SASS<\/a> (Stylistic Awesome Style Sheets) and <a href=\"https:\/\/www.w3.org\/TR\/2018\/CR-css-flexbox-1-20181119\/\">CSS Flexbox<\/a>. CSS Flexible Box Layout Model, or simply \u201cflexbox\u201d, is one of the major elements that allows the page layout to be responsive to different device screens.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"install-bootstrap\">How Do You Install Bootstrap for WordPress?<\/h2>\n\n\n\n<p>Bootstrap does not come with the default WordPress installation and must be enqueued or referenced in order to be used within WordPress.\u00a0 You may also find hosting solutions that already include Bootstrap.\u00a0\u00a0<\/p>\n\n\n\n<p>If you intend to reference Bootstrap, then you can find the link to the latest version on the <a href=\"https:\/\/getbootstrap.com\/docs\/4.5\/getting-started\/introduction\/?\">Bootstrap website<\/a>.\u00a0 This is the current link that they provide:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/css\/bootstrap.min.css\" integrity=\"sha384-TX8t27EcRE3e\/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2\" crossorigin=\"anonymous\"&gt;<\/code><\/pre>\n\n\n\n<p>This code needs to go into the <em>header.php<\/em> file for the theme that you are using in WordPress.\u00a0 The header file name may be described as the \u201cTheme Header\u201d in the editor.\u00a0<\/p>\n\n\n\n<p class=\"has-white-color has-text-color has-background\" style=\"background-color:#bc061b\"><strong>Warning:<\/strong>\u00a0 Note that you are making changes to your theme file.\u00a0 If the theme is updated, it is possible that your added code will be removed by the update.\u00a0 We recommend using a <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/wp-childtheme-2014\/\">child theme<\/a> in WordPress to prevent this from happening.\u00a0\u00a0<\/p>\n\n\n\n<p>You should also make a <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/wordpress-backups\/\">backup of your WordPress site<\/a> before making any modifications so that you can recover your site just in case anything happens.<\/p>\n\n\n\n<p>Follow the steps below to modify the theme header using the built-in editor within WordPress:<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li><a aria-label=\"Login to the WordPress Dashboard (opens in a new tab)\" rel=\"noreferrer noopener\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/logging-into-wordpress-dashboard\/\" target=\"_blank\">Login to the WordPress Dashboard<\/a>.<\/li><li>Click on <strong>Appearance.<\/strong><\/li><li>Click on <strong>Theme Editor<\/strong>. In some cases, it may simply be <strong>Editor<\/strong>.\u00a0 If you do not see an editor option for any reason, then you would simply need to look at your WordPress installation files, find the theme folder, find the <em>header.php<\/em> file, and then open it up in a text editor.<br><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"502\" class=\"wp-image-64464\" style=\"width: 750px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/theme-editor.jpg\" alt=\"\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/theme-editor.jpg 1612w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/theme-editor-300x201.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/theme-editor-1024x686.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/theme-editor-768x515.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/theme-editor-1536x1029.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/li><li>When you\u2019re editing the header.php look for <strong>&lt;head&gt;<\/strong> in the code.<\/li><li>Copy the code with the link from above (or directly from the Bootstrap site).<\/li><li>Paste the code immediately after the head tag.\u00a0 Do not overwrite any of the existing code. You can create space by putting the cursor after the head tag and hitting the enter key.<\/li><li>Click on <strong>Update File<\/strong> to save your changes.<\/li><li><a href=\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-clear-browser-cache-for-major-browsers\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\">Clear any browser cache<\/a> and re-load your WordPress site to begin using Bootstrap.<\/li><\/ol>\n\n\n\n<p>A reference to the current version loads Bootstrap from a CDN.\u00a0 Currently, they use one called <a href=\"https:\/\/www.jsdelivr.com\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\">JSdelivr<\/a>.\u00a0 If you intend to start building a theme with Bootstrap, then you should enqueue it into your WordPress theme.\u00a0 The code used to enqueue Bootstrap will need to be added to the <em>functions.php<\/em> of the WordPress theme you\u2019re developing:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function wpbootstrap_enqueue_styles() {\nwp_enqueue_style( 'bootstrap', 'https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/css\/bootstrap.min.css' );\n}\nadd_action('wp_enqueue_scripts', 'wpbootstrap_enqueue_styles');\\<\/code><\/pre>\n\n\n\n<p>To learn more about enqueuing and developing themes for WordPress, please visit <a href=\"https:\/\/codex.wordpress.org\/Theme_Development\">Theme Development in the WordPress Codex<\/a>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"using-bootstrap\">Using Bootstrap in WordPress<\/h2>\n\n\n\n<p>Once you have Bootstrap installed then you can begin using it within your WordPress site.\u00a0 The easiest way to demonstrate its use is to show you an example of the code and how it will appear on the site.\u00a0 To see the complete library of code that Bootstrap provides, please see their <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/getbootstrap.com\/docs\/4.5\/getting-started\/introduction\/\" target=\"_blank\" rel=\"noreferrer noopener\">website<\/a>.<\/p>\n\n\n\n<p>When you\u2019re using Bootstrap in WordPress, it\u2019s best to simply add it directly in the code on your page or post.\u00a0 We will list some examples to show you how they work.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Alerts<\/h3>\n\n\n\n<p>You can utilize the code for alerts in a DIV or P command.\u00a0 It will look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p class=\u201dalert alert-info\u201d&gt;This message uses Bootstrap \u201cinfo\u201d and is colored blue&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p class=\"alert alert-info\">This message uses Bootstrap \u201cinfo\u201d and is colored blue<\/p>\n\n\n\n<p>These are different alert types that you can use and the colors that they will display:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Primary \u2013 blue<\/li><li>Secondary \u2013 gray<\/li><li>Success \u2013 green<\/li><li>Danger \u2013 red<\/li><li>Warning \u2013 yellow<\/li><li>Info \u2013 aqua blue<\/li><li>Light \u2013 white<\/li><li>Dark \u2013 dark gray<\/li><\/ul>\n\n\n\n<p>Note that the options that you can use in Bootstrap will depend on the version that you are using.\u00a0 The options described here are from version 4.5.3.<\/p>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Badges<\/h3>\n\n\n\n<p>Badges will take text and highlight it in a color.\u00a0 They will scale to the size of the parent element beside it. You can also use the same system color assignments as you saw in alerts.\u00a0 Here is an example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h3&gt;This is an example of a badge &lt;span class=\u201dbadge badge-success\u201d&gt;BADGE&lt;\/span&gt;&lt;\/h3&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"460\" height=\"64\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/badge-example-success.jpg\" alt=\"example of a badge\" class=\"wp-image-64474\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/badge-example-success.jpg 460w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/badge-example-success-300x42.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>You can also change the shape of the badge so it looks like a pill:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h3&gt;This is an example of a badge &lt;span class=\u201dbadge badge-pill badge-success\u201d&gt;BADGE&lt;\/span&gt;&lt;\/h3&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"440\" height=\"74\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/badge-pill.jpg\" alt=\"\" class=\"wp-image-64476\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/badge-pill.jpg 440w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/badge-pill-300x50.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>You can also create links with badges that link to a location like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\u201d#\u201d class=\u201dbadge badge-info\u201d&gt;Example&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\" id=\"example-button\"><a href=\"#example-button\"><img loading=\"lazy\" decoding=\"async\" width=\"114\" height=\"88\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/link-badge.jpg\" alt=\"\" class=\"wp-image-64477\"><\/a><\/figure>\n\n\n\n<p>The button above is linked to a URL.  In this example, it just links to itself.<\/p>\n\n\n\n<p><br>These examples are just the tip of the iceberg for the many features that you can use within your WordPress site.\u00a0\u00a0<\/p>\n\n\n\n<hr class=\"wp-block-separator\">\n\n\n\n<p>Bootstrap is a great tool for enhancing your WordPress site with many features that you will not always find within the new WordPress visual editor.\u00a0 It can provide functionality without requiring a plugin, and help enhance the performance and appearance of your website.<\/p>\n\n\n\n<p>You can also build themes with Bootstrap, though it requires a lot more initial work.\u00a0 When you have the framework for the themes you want to create with Bootstrap, you will discover a lot of the flexibility and functionality that creating a responsive theme provides. To see examples of Bootstrap-based themes, check out the <a href=\"https:\/\/themes.getbootstrap.com\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\">Bootstrap theme<\/a> page.<\/p>\n\n\n\n<p>To learn more about using WordPress, check out our <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/?utm_campaign=supportcenter&amp;utm_medium=link&amp;utm_source=supportcenter\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\">WordPress Education<\/a> channel!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using Bootstrap in WordPress can give you many opportunities to create pages, posts, or even a theme with some very distinctive features.\u00a0 Bootstrap is a framework that will allow you to create responsive websites that will work with a variety of devices and screen sizes.\u00a0\u00a0 You can also use it to extend the functionality of<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/\"> Read More ><\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[56],"tags":[],"class_list":["post-64463","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use Bootstrap in WordPress | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Learn about Bootstrap for WordPress including its installation and how to use it in a WordPress site including examples of code and how it would appear.\" \/>\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\/wordpress\/how-to-use-bootstrap-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Bootstrap in WordPress | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Learn about using Bootstrap in WordPress. You&#039;ll learn what Bootstrap is, how to install it, and how it can be used to enhance WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/\" \/>\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=\"2020-12-07T19:00:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-19T06:13:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/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=\"6 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\/wordpress\/how-to-use-bootstrap-in-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\"},\"headline\":\"How to Use Bootstrap in WordPress\",\"datePublished\":\"2020-12-07T19:00:43+00:00\",\"dateModified\":\"2021-11-19T06:13:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/\"},\"wordCount\":1050,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img-1024x538.jpg\",\"articleSection\":[\"WordPress Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/\",\"name\":\"How to Use Bootstrap in WordPress | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img-1024x538.jpg\",\"datePublished\":\"2020-12-07T19:00:43+00:00\",\"dateModified\":\"2021-11-19T06:13:25+00:00\",\"description\":\"Learn about Bootstrap for WordPress including its installation and how to use it in a WordPress site including examples of code and how it would appear.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use Bootstrap in WordPress\"}]},{\"@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\/8d626175dd3b70ee90a172bdb09a460b\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Bootstrap in WordPress | InMotion Hosting","description":"Learn about Bootstrap for WordPress including its installation and how to use it in a WordPress site including examples of code and how it would appear.","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\/wordpress\/how-to-use-bootstrap-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Bootstrap in WordPress | InMotion Hosting","og_description":"Learn about using Bootstrap in WordPress. You'll learn what Bootstrap is, how to install it, and how it can be used to enhance WordPress.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2020-12-07T19:00:43+00:00","article_modified_time":"2021-11-19T06:13:25+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img.jpg","type":"image\/jpeg"}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b"},"headline":"How to Use Bootstrap in WordPress","datePublished":"2020-12-07T19:00:43+00:00","dateModified":"2021-11-19T06:13:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/"},"wordCount":1050,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img-1024x538.jpg","articleSection":["WordPress Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/","name":"How to Use Bootstrap in WordPress | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img-1024x538.jpg","datePublished":"2020-12-07T19:00:43+00:00","dateModified":"2021-11-19T06:13:25+00:00","description":"Learn about Bootstrap for WordPress including its installation and how to use it in a WordPress site including examples of code and how it would appear.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2020\/12\/use-bootstrap-header-img.jpg","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/how-to-use-bootstrap-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Use Bootstrap in WordPress"}]},{"@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\/8d626175dd3b70ee90a172bdb09a460b","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":56,"name":"WordPress Tutorials","slug":"wordpress","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/64463","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\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=64463"}],"version-history":[{"count":23,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/64463\/revisions"}],"predecessor-version":[{"id":91801,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/64463\/revisions\/91801"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=64463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=64463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=64463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}