{"id":2769,"date":"2013-06-14T21:17:07","date_gmt":"2013-06-14T21:17:07","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/06\/14\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/"},"modified":"2021-08-16T23:12:50","modified_gmt":"2021-08-17T03:12:50","slug":"adding-the-bootstrap-menu-buttons-to-your-responsive-template","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/","title":{"rendered":"Adding the Bootstrap Menu Buttons to your Responsive Template"},"content":{"rendered":"<p><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-3-final.png\" rel=\"lightbox-0\"><img decoding=\"async\" width=\"679\" height=\"512\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-3-final.png\" class=\"optimized-lcp-image\" alt=\"View os Menu Buttons in 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-menu-buttons_add-menu-bootstrap-3-final.png 679w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-3-final-300x226.png 300w\"><\/a><\/p>\n<div style=\"clear:both;\"><\/div>\n<p>Now that you have <a href=\"\/support\/website\/website-design\/adding-the-bootstrap-files-to-your-responsive-template\/\" target=\"_blank\" rel=\"noopener\">Bootstrap set up on your Responsive Template<\/a>, you can use the code provided by Bootstrap to style your site. Bootstrap has a premade set of buttons and menus that you can use in your site. You can see what the look like in the snapshot to the right.In this tutorial, we will add all the buttons to the header of your site. Below are examples of the button function with the InMotion hosting Bootstrap styles. <br style=\"clear: both;\"><\/p>\n<p><\/p>\n<div class=\"btn-toolbar\">\n<div class=\"btn-group\"> <button class=\"btn dropdown-toggle\" data-toggle=\"dropdown\" style=\"color:#000000;\">Default <span class=\"caret\"><\/span><\/button> \n<ul class=\"dropdown-menu\">\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Another action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<p><!-- \/btn-group --> <\/p>\n<div class=\"btn-group\"> <button class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\">Primary <span class=\"caret\"><\/span><\/button> \n<ul class=\"dropdown-menu\">\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Another action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<p><!-- \/btn-group --> <\/p>\n<div class=\"btn-group\"> <button class=\"btn btn-danger dropdown-toggle\" data-toggle=\"dropdown\">Danger <span class=\"caret\"><\/span><\/button> \n<ul class=\"dropdown-menu\">\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Another action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<p><!-- \/btn-group --> <\/p>\n<div class=\"btn-group\"> <button class=\"btn btn-warning dropdown-toggle\" data-toggle=\"dropdown\">Warning <span class=\"caret\"><\/span><\/button> \n<ul class=\"dropdown-menu\">\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Another action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<p><!-- \/btn-group --> <\/p>\n<div class=\"btn-group\"> <button class=\"btn btn-success dropdown-toggle\" data-toggle=\"dropdown\">Success <span class=\"caret\"><\/span><\/button> \n<ul class=\"dropdown-menu\">\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Another action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<p><!-- \/btn-group --> <\/p>\n<div class=\"btn-group\"> <button class=\"btn btn-info dropdown-toggle\" data-toggle=\"dropdown\">Info <span class=\"caret\"><\/span><\/button> \n<ul class=\"dropdown-menu\">\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Another action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<p><!-- \/btn-group --> <\/p>\n<div class=\"btn-group\"> <button class=\"btn btn-inverse dropdown-toggle\" data-toggle=\"dropdown\">Inverse <span class=\"caret\"><\/span><\/button> \n<ul class=\"dropdown-menu\">\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Another action<\/a><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"\/support\/security\/password-strength\/\" onclick=\"return false;\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<p><!-- \/btn-group --> <\/p><\/div>\n<p><!--\/btn toolbar --> <\/p>\n<h2>Steps to add a Bootstrap Button menu<\/h2>\n<p>Below is the code for each button type. When stringing multiple buttons together you will need to use the toolbar code below.<\/p>\n<pre style=\"padding:5px;\">&lt;div class=\"btn-toolbar\"&gt;      --- Button code goes here inbetween the toolbar divs. --- &lt;\/div&gt;<!--\/btn toolbar --><\/pre>\n<p>Now you can use the following buttons on your site.<\/p>\n<ol class=\"article_list img-rounded\">\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-1-copy-code.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Copy the code Bootstrap Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-1-copy-code.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 up the <em>ThemeRoller.htm<\/em> page and find the button code between lines 6058 to 6129. The Line numbers may vary.   <\/p>\n<p>Copy the code.<\/p>\n<p>The code is broken down below.<\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" alt=\"The Default Button\" class=\"size-full wp-image-12253\" height=\"28\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_default.png\" style=\"margin:0px 5px 0px 0px;padding:0px;\" width=\"62\">The Default Button<\/h3>\n<pre style=\"padding:5px\">&lt;div class=\"btn-group\"&gt;<br>  &lt;button data-toggle=\"dropdown\" class=\"btn dropdown-toggle\"&gt;Action &lt;span class=\"caret\"&gt;&lt;\/span&gt;&lt;\/button&gt;<br>     &lt;ul class=\"dropdown-menu\"&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Action&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Another action&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li class=\"divider\"&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Separated link&lt;\/a&gt;&lt;\/li&gt;<br>     &lt;\/ul&gt;<br>&lt;\/div&gt;&lt;!-- \/btn-group --&gt;<\/pre>\n<p>\u00a0<\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" alt=\"The Primary Button\" class=\"size-full wp-image-12254\" height=\"28\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_primary.png\" style=\"margin:0px 5px 0px 0px;padding:0px;\" width=\"71\">The Primary Button<\/h3>\n<pre style=\"padding:5px\">&lt;div class=\"btn-group\"&gt;<br>  &lt;button data-toggle=\"dropdown\" class=\"btn btn-primary dropdown-toggle\"&gt;Action &lt;span class=\"caret\"&gt;&lt;\/span&gt;&lt;\/button&gt;<br>     &lt;ul class=\"dropdown-menu\"&gt;<br>        &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Action&lt;\/a&gt;&lt;\/li&gt;<br>        &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Another action&lt;\/a&gt;&lt;\/li&gt;<br>        &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;<br>        &lt;li class=\"divider\"&gt;&lt;\/li&gt;<br>        &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Separated link&lt;\/a&gt;&lt;\/li&gt;<br>     &lt;\/ul&gt;<br>&lt;\/div&gt;&lt;!-- \/btn-group --&gt;<\/pre>\n<p>\u00a0<\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" alt=\"The Danger Button\" class=\"size-full wp-image-12255\" height=\"29\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_danger.png\" style=\"margin:0px 5px 0px 0px;padding:0px;\" width=\"64\">The Danger Button<\/h3>\n<pre style=\"padding:5px\">&lt;div class=\"btn-group\"&gt;<br>   &lt;button data-toggle=\"dropdown\" class=\"btn btn-danger dropdown-toggle\"&gt;Danger &lt;span class=\"caret\"&gt;&lt;\/span&gt;&lt;\/button&gt;<br>      &lt;ul class=\"dropdown-menu\"&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Action&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Another action&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li class=\"divider\"&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Separated link&lt;\/a&gt;&lt;\/li&gt;<br>      &lt;\/ul&gt;<br>&lt;\/div&gt;&lt;!-- \/btn-group --&gt;<\/pre>\n<p>\u00a0<\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" alt=\"The Warning Button\" class=\"size-full wp-image-12256\" height=\"29\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_warning.png\" style=\"margin:0px 5px 0px 0px;padding:0px;\" width=\"72\">The Warning Button<\/h3>\n<pre style=\"padding:5px\">&lt;div class=\"btn-group\"&gt;<br>   &lt;button data-toggle=\"dropdown\" class=\"btn btn-warning dropdown-toggle\"&gt;Warning &lt;span class=\"caret\"&gt;&lt;\/span&gt;&lt;\/button&gt;<br>      &lt;ul class=\"dropdown-menu\"&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Action&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Another action&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li class=\"divider\"&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Separated link&lt;\/a&gt;&lt;\/li&gt;<br>      &lt;\/ul&gt;<br>&lt;\/div&gt;&lt;!-- \/btn-group --&gt;<\/pre>\n<p>\u00a0<\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" alt=\"The Success Button\" class=\"size-full wp-image-12257\" height=\"28\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_success.png\" style=\"margin:0px 5px 0px 0px;padding:0px;\" width=\"76\">The Success Button<\/h3>\n<pre style=\"padding:5px\">&lt;div class=\"btn-group\"&gt;<br>   &lt;button data-toggle=\"dropdown\" class=\"btn btn-success dropdown-toggle\"&gt;Success &lt;span class=\"caret\"&gt;&lt;\/span&gt;&lt;\/button&gt;<br>      &lt;ul class=\"dropdown-menu\"&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Action&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Another action&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li class=\"divider\"&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Separated link&lt;\/a&gt;&lt;\/li&gt;<br>      &lt;\/ul&gt;<br>&lt;\/div&gt;&lt;!-- \/btn-group --&gt;<\/pre>\n<p>\u00a0<\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" alt=\"The Info Button\" class=\"size-full wp-image-12258\" height=\"28\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_info.png\" style=\"margin:0px 5px 0px 0px;padding:0px;\" width=\"44\">The Info Button<\/h3>\n<pre style=\"padding:5px\">&lt;div class=\"btn-group\"&gt;<br>   &lt;button data-toggle=\"dropdown\" class=\"btn btn-info dropdown-toggle\"&gt;Info &lt;span class=\"caret\"&gt;&lt;\/span&gt;&lt;\/button&gt;<br>      &lt;ul class=\"dropdown-menu\"&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Action&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Another action&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li class=\"divider\"&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Separated link&lt;\/a&gt;&lt;\/li&gt;<br>      &lt;\/ul&gt;<br>&lt;\/div&gt;&lt;!-- \/btn-group --&gt;<\/pre>\n<p>\u00a0<\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" alt=\"The Inverse Button\" class=\"size-full wp-image-12259\" height=\"29\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_inverse.png\" style=\"margin:0px 5px 0px 0px;padding:0px;\" width=\"64\">The Inverse Button<\/h3>\n<pre style=\"padding:5px\">&lt;div class=\"btn-group\"&gt;<br>   &lt;button data-toggle=\"dropdown\" class=\"btn btn-inverse dropdown-toggle\"&gt;Inverse &lt;span class=\"caret\"&gt;&lt;\/span&gt;&lt;\/button&gt;<br>      &lt;ul class=\"dropdown-menu\"&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Action&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Another action&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;<br>         &lt;li class=\"divider\"&gt;&lt;\/li&gt;<br>         &lt;li&gt;&lt;a href=\"#\" onClick=\"return false;\"&gt;Separated link&lt;\/a&gt;&lt;\/li&gt;<br>      &lt;\/ul&gt;<br>&lt;\/div&gt;&lt;!-- \/btn-group --&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-menu-buttons_add-menu-bootstrap-2-paste-code.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Paste the code in the header Bootstrap Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-2-paste-code.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>Paste the code into the  head section after the <em>header-content H2<\/em> tag. It should look like the snapshot to the right.     <\/p>\n<p>The buttons are different colors If you want a button to use a specific color you can change the buttons class. below are the different button classes for the button menus in Bootstrap.<\/p>\n<table class=\"table table-bordered table-striped\">\n<thead>\n<tr>\n<th>Class name<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>btn-inverse<\/td>\n<td>Default colors #555 and #222<\/td>\n<\/tr>\n<tr>\n<td>btn-info<\/td>\n<td>Default colors #5bc0de and #2f96b4<\/td>\n<\/tr>\n<tr>\n<td>btn-success<\/td>\n<td>Default colors ##62c462 and #51a351<\/td>\n<\/tr>\n<tr>\n<td>btn-warning<\/td>\n<td>Default colors #fcb44d and #f89406<\/td>\n<\/tr>\n<tr>\n<td>btn-primary<\/td>\n<td>Default colors #c3b100 and #b5cc00<\/td>\n<\/tr>\n<tr>\n<td>btn-danger<\/td>\n<td>Default colors #ee5f5b and #bd362f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p> <br style=\"clear: both;\"> <\/p><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Now that you have Bootstrap set up on your Responsive Template, you can use the code provided by Bootstrap to style your site. Bootstrap has a premade set of buttons and menus that you can use in your site. You can see what the look like in the snapshot to the right.In this tutorial, we<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-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-2769","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 Menu Buttons to your Responsive Template | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"You can add dropdown menu buttons to your Responsive Template using the code in Bootstrap. 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-menu-buttons-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 Menu Buttons to your Responsive Template | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"You can add dropdown menu buttons to your Responsive Template using the code in Bootstrap. This article will teach you how.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-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-14T21:17:07+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-menu-buttons_add-menu-bootstrap-3-final.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=\"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\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\"},\"headline\":\"Adding the Bootstrap Menu Buttons to your Responsive Template\",\"datePublished\":\"2013-06-14T21:17:07+00:00\",\"dateModified\":\"2021-08-17T03:12:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/\"},\"wordCount\":339,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-3-final.png\",\"articleSection\":[\"Website Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/\",\"name\":\"Adding the Bootstrap Menu Buttons 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-menu-buttons-to-your-responsive-template\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-3-final.png\",\"datePublished\":\"2013-06-14T21:17:07+00:00\",\"dateModified\":\"2021-08-17T03:12:50+00:00\",\"description\":\"You can add dropdown menu buttons to your Responsive Template using the code in Bootstrap. This article will teach you how.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-3-final.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-3-final.png\",\"width\":679,\"height\":512,\"caption\":\"Click here to view the larger image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-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 Menu Buttons 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 Menu Buttons to your Responsive Template | InMotion Hosting","description":"You can add dropdown menu buttons to your Responsive Template using the code in Bootstrap. 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-menu-buttons-to-your-responsive-template\/","og_locale":"en_US","og_type":"article","og_title":"Adding the Bootstrap Menu Buttons to your Responsive Template | InMotion Hosting","og_description":"You can add dropdown menu buttons to your Responsive Template using the code in Bootstrap. This article will teach you how.","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-06-14T21:17:07+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-menu-buttons_add-menu-bootstrap-3-final.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":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41"},"headline":"Adding the Bootstrap Menu Buttons to your Responsive Template","datePublished":"2013-06-14T21:17:07+00:00","dateModified":"2021-08-17T03:12:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/"},"wordCount":339,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-3-final.png","articleSection":["Website Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/","name":"Adding the Bootstrap Menu Buttons 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-menu-buttons-to-your-responsive-template\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-3-final.png","datePublished":"2013-06-14T21:17:07+00:00","dateModified":"2021-08-17T03:12:50+00:00","description":"You can add dropdown menu buttons to your Responsive Template using the code in Bootstrap. This article will teach you how.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-to-your-responsive-template\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-3-final.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_bootstrap-menu-buttons_add-menu-bootstrap-3-final.png","width":679,"height":512,"caption":"Click here to view the larger image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/adding-the-bootstrap-menu-buttons-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 Menu Buttons 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\/2769","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=2769"}],"version-history":[{"count":2,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2769\/revisions"}],"predecessor-version":[{"id":84550,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2769\/revisions\/84550"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=2769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=2769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=2769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}