{"id":8100,"date":"2021-08-19T10:21:29","date_gmt":"2021-08-19T10:21:29","guid":{"rendered":"https:\/\/www.scmgalaxy.com\/tutorials\/?p=8100"},"modified":"2021-08-19T10:21:32","modified_gmt":"2021-08-19T10:21:32","slug":"bootstrap-componentbuttons","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/","title":{"rendered":"Bootstrap: Component&#8221;Buttons&#8221;"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Bootstrap 4 provides users with different styles of buttons.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Button Color.<\/li><li>Button Outline.<\/li><li>Button Size.<\/li><li>Block level Buttons.<\/li><li>Active\/Disabled Buttons.<\/li><li>Spinner Buttons.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Button color:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a0Use the background-color\u00a0property to change the background\u00a0color\u00a0of a\u00a0button.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vikash-cotocus\/dcbc78bc4ff82d91f1e2c911fa5cf258.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/button-color-1024x612.png\" alt=\"\" class=\"wp-image-8101\" srcset=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/button-color-1024x612.png 1024w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/button-color-300x179.png 300w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/button-color-768x459.png 768w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/button-color-1536x918.png 1536w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/button-color.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Button Outline:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The button outline style\u00a0removes all background images or colors from a button and gives it a lighter look.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vikash-cotocus\/f94021faada89a6039d7355eaa4384a2.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/btn-btn-outline-primary-1-1024x612.png\" alt=\"\" class=\"wp-image-8103\" srcset=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/btn-btn-outline-primary-1-1024x612.png 1024w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/btn-btn-outline-primary-1-300x179.png 300w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/btn-btn-outline-primary-1-768x459.png 768w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/btn-btn-outline-primary-1-1536x918.png 1536w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/btn-btn-outline-primary-1.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Button Sizes:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This will indicate to you the size of the button.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Default<\/li><li>Large (btn-lg)<\/li><li>Small (btn-sm)<\/li><\/ul>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vikash-cotocus\/77a93cbdb8b05f2d35277a61e2afebca.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bb-1024x612.png\" alt=\"\" class=\"wp-image-8104\" srcset=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bb-1024x612.png 1024w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bb-300x179.png 300w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bb-768x459.png 768w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bb-1536x918.png 1536w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bb.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Block Level Buttons:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The .btn-block class is used to create a block-level button that spans the entire width of the parent elements.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vikash-cotocus\/64af094f26d407540dcb86ba588eb6ec.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbb-1024x612.png\" alt=\"\" class=\"wp-image-8105\" srcset=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbb-1024x612.png 1024w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbb-300x179.png 300w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbb-768x459.png 768w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbb-1536x918.png 1536w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbb.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Active\/Disabled Buttons:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A button can be set to an active (clickable) or a disabled (unclickable) state.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vikash-cotocus\/b85ae67b42d2e6bfa464ee3c4ec7ad47.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbbb-1024x612.png\" alt=\"\" class=\"wp-image-8106\" srcset=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbbb-1024x612.png 1024w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbbb-300x179.png 300w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbbb-768x459.png 768w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbbb-1536x918.png 1536w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbbb.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Spinner Buttons:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can also add &#8220;spinners&#8221; to a button.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vikash-cotocus\/3ee5e80942b8cfadae7fe62fc88bd349.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbbbbbbbbbb-1024x612.png\" alt=\"\" class=\"wp-image-8107\" srcset=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbbbbbbbbbb-1024x612.png 1024w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbbbbbbbbbb-300x179.png 300w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbbbbbbbbbb-768x459.png 768w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbbbbbbbbbb-1536x918.png 1536w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/bbbbbbbbbbb.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap 4 provides users with different styles of buttons. Button Color. Button Outline. Button Size. Block level Buttons. Active\/Disabled Buttons. [&hellip;]<\/p>\n","protected":false},"author":34,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5670],"tags":[6407,6405,6403,568,5390,6400,6401,6402,6399,6404,6398,6406,1122,593,6408,6409,213],"class_list":["post-8100","post","type-post","status-publish","format-standard","hentry","category-bootstrap","tag-active-disabled-buttons-in-bootstrap","tag-active-button-in-bootstrap","tag-block-level-buttons-in-bootstrap","tag-bootstrap","tag-bootstrap-4-2","tag-button-color-in-bootstrap","tag-button-outline-in-bootstrap","tag-button-size-in-bootstrap","tag-button-style-in-bootstrap","tag-button-width-in-bootstrap","tag-buttons-in-bootstrap","tag-disable-button-in-bootstrap","tag-guide","tag-process","tag-spinner-buttons-in-bootstrap","tag-spinner-used-in-active-disabled-buttons-in-bootstrap","tag-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bootstrap: Component&quot;Buttons&quot; - scmGalaxy<\/title>\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.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap: Component&quot;Buttons&quot; - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"Bootstrap 4 provides users with different styles of buttons. Button Color. Button Outline. Button Size. Block level Buttons. Active\/Disabled Buttons. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-19T10:21:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-19T10:21:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/button-color-1024x612.png\" \/>\n<meta name=\"author\" content=\"vikashdev k\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"vikashdev k\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/\"},\"author\":{\"name\":\"vikashdev k\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/ec4d1004b3acffc7df65899e880c7515\"},\"headline\":\"Bootstrap: Component&#8221;Buttons&#8221;\",\"datePublished\":\"2021-08-19T10:21:29+00:00\",\"dateModified\":\"2021-08-19T10:21:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/\"},\"wordCount\":126,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/button-color-1024x612.png\",\"keywords\":[\"active \\\/disabled buttons in bootstrap\",\"active button in bootstrap\",\"block level buttons in bootstrap\",\"Bootstrap\",\"bootstrap 4\",\"button color in bootstrap\",\"button outline in bootstrap\",\"button size in bootstrap\",\"button style in bootstrap\",\"button width in bootstrap\",\"buttons in bootstrap\",\"disable button in bootstrap\",\"Guide\",\"Process\",\"spinner buttons in bootstrap\",\"spinner used in active\\\/disabled buttons in bootstrap\",\"Tutorial\"],\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/\",\"name\":\"Bootstrap: Component\\\"Buttons\\\" - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/button-color-1024x612.png\",\"datePublished\":\"2021-08-19T10:21:29+00:00\",\"dateModified\":\"2021-08-19T10:21:32+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/ec4d1004b3acffc7df65899e880c7515\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/button-color.png\",\"contentUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/button-color.png\",\"width\":1920,\"height\":1148},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/bootstrap-componentbuttons\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap: Component&#8221;Buttons&#8221;\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\",\"name\":\"scmGalaxy\",\"description\":\"A Platform for Software Engineers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/ec4d1004b3acffc7df65899e880c7515\",\"name\":\"vikashdev k\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/738fe2694a5769295d6bbe57066232fcf8351e09ce1090f200c7b34f770fa61b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/738fe2694a5769295d6bbe57066232fcf8351e09ce1090f200c7b34f770fa61b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/738fe2694a5769295d6bbe57066232fcf8351e09ce1090f200c7b34f770fa61b?s=96&d=mm&r=g\",\"caption\":\"vikashdev k\"},\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/author\\\/vikashdev\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap: Component\"Buttons\" - scmGalaxy","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.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap: Component\"Buttons\" - scmGalaxy","og_description":"Bootstrap 4 provides users with different styles of buttons. Button Color. Button Outline. Button Size. Block level Buttons. Active\/Disabled Buttons. [&hellip;]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/","og_site_name":"scmGalaxy","article_published_time":"2021-08-19T10:21:29+00:00","article_modified_time":"2021-08-19T10:21:32+00:00","og_image":[{"url":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/button-color-1024x612.png","type":"","width":"","height":""}],"author":"vikashdev k","twitter_card":"summary_large_image","twitter_misc":{"Written by":"vikashdev k","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/"},"author":{"name":"vikashdev k","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/ec4d1004b3acffc7df65899e880c7515"},"headline":"Bootstrap: Component&#8221;Buttons&#8221;","datePublished":"2021-08-19T10:21:29+00:00","dateModified":"2021-08-19T10:21:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/"},"wordCount":126,"commentCount":0,"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/button-color-1024x612.png","keywords":["active \/disabled buttons in bootstrap","active button in bootstrap","block level buttons in bootstrap","Bootstrap","bootstrap 4","button color in bootstrap","button outline in bootstrap","button size in bootstrap","button style in bootstrap","button width in bootstrap","buttons in bootstrap","disable button in bootstrap","Guide","Process","spinner buttons in bootstrap","spinner used in active\/disabled buttons in bootstrap","Tutorial"],"articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/","name":"Bootstrap: Component\"Buttons\" - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/#primaryimage"},"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/button-color-1024x612.png","datePublished":"2021-08-19T10:21:29+00:00","dateModified":"2021-08-19T10:21:32+00:00","author":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/ec4d1004b3acffc7df65899e880c7515"},"breadcrumb":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/#primaryimage","url":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/button-color.png","contentUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/button-color.png","width":1920,"height":1148},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/bootstrap-componentbuttons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"Bootstrap: Component&#8221;Buttons&#8221;"}]},{"@type":"WebSite","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website","url":"https:\/\/www.scmgalaxy.com\/tutorials\/","name":"scmGalaxy","description":"A Platform for Software Engineers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.scmgalaxy.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/ec4d1004b3acffc7df65899e880c7515","name":"vikashdev k","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/738fe2694a5769295d6bbe57066232fcf8351e09ce1090f200c7b34f770fa61b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/738fe2694a5769295d6bbe57066232fcf8351e09ce1090f200c7b34f770fa61b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/738fe2694a5769295d6bbe57066232fcf8351e09ce1090f200c7b34f770fa61b?s=96&d=mm&r=g","caption":"vikashdev k"},"url":"https:\/\/www.scmgalaxy.com\/tutorials\/author\/vikashdev\/"}]}},"_links":{"self":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/8100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/comments?post=8100"}],"version-history":[{"count":1,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/8100\/revisions"}],"predecessor-version":[{"id":8108,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/8100\/revisions\/8108"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=8100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=8100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=8100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}