{"id":20915,"date":"2020-08-07T00:47:06","date_gmt":"2020-08-07T07:47:06","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=20915"},"modified":"2020-12-29T10:58:40","modified_gmt":"2020-12-29T18:58:40","slug":"bootstrap-button","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/","title":{"rendered":"Bootstrap Buttons"},"content":{"rendered":"\n

The button element is one of the more useful Hypertext Markup Language (HTML) elements in the sense that it enables the user to interact with a page. <\/p>\n\n\n\n

Logging in, subscribing, deleting or opening something, showing a menu, changing the color theme are actions performed with buttons.
<\/p>\n\n\n\n

The default browser button styles are not the best looking, and not modern by any means.<\/p>\n\n\n\n

By customizing their styling on every project, we repeat the same code many times for the same results.
<\/p>\n\n\n\n

Again, Bootstrap coers us. Take a look at what\u2019s possible with Bootstrap buttons.<\/p>\n\n\n\n

Colored Buttons<\/h2>\n\n\n\n
    <button class="btn btn-primary">button 1<\/button>\n    <button class="btn btn-secondary">button 2<\/button>\n    <button class="btn btn-info">button 3<\/button>\n    <button class="btn btn-warning">button 4<\/button>\n    <button class="btn btn-danger">button 5<\/button>\n    <button class="btn btn-success">button 6<\/button>\n    <button class="btn btn-light">button 7<\/button>\n    <button class="btn btn-dark">button 8<\/button>\n    <button class="btn btn-link">button 9<\/button><\/pre><\/div>\n\n\n\n
Regarding colors, we can use every Bootstrap\u2019s predefined ones, plus the BTN-LINK option, to apply Bootstrap\u2019s styling for links.
<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
All of the colored options get nice uniform padding, and a quick color transition to a slightly darker shade when hovered over with the cursor. The link has an underline on hover.
<\/p>\n\n\n\n
If we only declare the BTN class, Bootstrap will only remove the default browser styling:<\/p>\n\n\n\n
<button>Without Bootstrap<\/button>\n<button class="btn">With Bootstrap<\/button><\/pre><\/div>\n\n\n\n
As we can see here:
<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Outline Buttons<\/h2>\n\n\n\n
We can use the same colors to create buttons with just an outline:<\/p>\n\n\n\n
 \t<button class="btn btn-outline-primary">button 1<\/button>\n    <button class="btn btn-outline-secondary">button 2<\/button>\n    <button class="btn btn-outline-info">button 3<\/button>\n    <button class="btn btn-outline-warning">button 4<\/button>\n    <button class="btn btn-outline-danger">button 5<\/button>\n    <button class="btn btn-outline-success">button 6<\/button>\n    <button class="btn btn-outline-light">button 7<\/button>\n    <button class="btn btn-outline-dark">button 8<\/button>\n    <button class="btn btn-outline-link">button 9<\/button><\/pre><\/div>\n\n\n\n
They get the same background color as the outline, and the text becomes white or black, depending on the contrast. The light and yellow (WARNING) are get the black text. However, The link version does not support this option.
<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Sizing<\/h2>\n\n\n\n
Bootstrap supports three sizes for buttons: small, regular, and large.
We add another class to select the size like so:
<\/p>\n\n\n\n
<div class="m-5">\n      <button class="btn btn-primary btn-sm">small button 1<\/button>\n      <button class="btn btn-warning btn-sm">small button 2<\/button>\n      <button class="btn btn-primary btn-sm">small button 3<\/button>\n    <\/div>\n    <div class="m-5">\n      <button class="btn btn-primary">regular button 1<\/button>\n      <button class="btn btn-warning">regular button 2<\/button>\n      <button class="btn btn-danger">regular button 3<\/button>\n    <\/div>\n    <div class="m-5">\n      <button class="btn btn-primary btn-lg">large button 1<\/button>\n      <button class="btn btn-warning btn-lg">large button 2<\/button>\n      <button class="btn btn-danger btn-lg">large button 3<\/button>\n    <\/div><\/pre><\/div>\n\n\n\n
Three buttons of each size are made, and wrapped each size in a div with class M-5 just to give them a bit of margin, to space them out.
<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Block Level Buttons<\/h2>\n\n\n\n
If we want a button that\u2019s the full width of its containing element, we add a class of BTN-BLOCK to it. Let\u2019s create a simple form, a common case for this method.<\/p>\n\n\n\n
<div class="form-group">\n          <label for="username">username<\/label>\n          <input type="text" class="form-control" \/>\n          <div class="form-group"><\/div>\n          <label for="email">Email<\/label>\n          <input type="email" class="form-control" \/>\n        <\/div>\n        <button class="btn btn-lg btn-block btn-primary">\n          Block Level Button\n        <\/button>\n        <button class="btn btn-lg btn-secondary my-2">Regular button<\/button>\n      <\/form><\/pre><\/div>\n\n\n\n
We won\u2019t go into detail about Bootstrap form classes. 
<\/p>\n\n\n\n
We just made a simple form that accepts a username and email, and has one block level button and one regular button. 
<\/p>\n\n\n\n
MT-2 is again just margin (top) added to separate the two buttons.
<\/p>\n\n\n\n
And here we can see the difference:
<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Button State<\/h2>\n\n\n\n
Like with many other Bootstrap components, we can change the appearance of a button with a state class, that is ACTIVE or DISABLED.<\/p>\n\n\n\n
Active State<\/h3>\n\n\n\n
An active button has a slightly darker background, border, and shadow. <\/p>\n\n\n\n
      <button class="btn btn-primary">Regular<\/button>\n      <button class="btn btn-primary active">Active<\/button>\n      <button class="btn btn-primary">Regular<\/button><\/pre><\/div>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Disabled State<\/h3>\n\n\n\n
In contrast, disabled buttons use lighter shades for the same properties. Know that adding the DISABLED class will only give the button the lighter colors. To make it truly disabled, we must declare it as the buttons attribute:
<\/p>\n\n\n\n
\t<button class="btn btn-primary disabled">Disabled Looking<\/button>\n    <button class="btn btn-primary" disabled>Truly Disabled<\/button><\/pre><\/div>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
The one with the class DISABLED is still clickable, and will perform an action if it has one.<\/p>\n\n\n\n
For assistive technologies, we need to also include a ARIA-DISABLED=\u201cTRUE\u201d attribute, so screen reader users know there\u2019s a disabled button on the screen.
<\/p>\n\n\n\n
Also, currently <a> elements don\u2019t support the DISABLED attribute, so to get the disabled look we must include the class.
<\/p>\n\n\n\n
<a class="btn btn-danger" disabled>Attribute Not Supported<\/a>\n      <a href="#" class="btn btn-danger disabled">Disabled Look<\/a><\/pre><\/div>\n\n\n\n
In the case of <a> tags, the class DISABLED adds the CSS rule POINTER-EVENTS: NONE, which disables mouse clicks.
<\/p>\n\n\n\n
However, this is not yet fully supported on all web browsers, and even on supported ones, the link can still be accessed via keyboard. 
<\/p>\n\n\n\n
To make sure that the function is completely disabled, we should add the TABINDEX=\u201c-1\u201d attribute, so they can\u2019t be focused even with a keyboard.
<\/p>\n\n\n\n
You should not use <a> tags as buttons anyway, but it\u2019s good to know.
<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Button Groups<\/h2>\n\n\n\n
Just like with CARDS < ( in publishing at time of writing ) in Bootstrap, we can use a GROUP class to fuse the buttons together into a single element visually.
<\/p>\n\n\n\n
<div class="btn-group">\n      <button class="btn btn-primary">button 1<\/button>\n      <button class="btn btn-warning">button 2<\/button>\n      <button class="btn btn-info">button 3<\/button>\n      <button class="btn btn-danger">button 4<\/button>\n    <\/div><\/pre><\/div>\n\n\n\n
We simply wrap them in a div with the BTN-GROUP class and that\u2019s it!
<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
The behavior is exactly the same, but now they\u2019re right next to each other, and the outer corners are nicely rounded.<\/p>\n\n\n\n
To Sum It Up<\/h2>\n\n\n\n
Buttons can be found on nearly every website, and they\u2019re a very important part of the online experience. We can log into our accounts, order something online, subscribe to a newsletter, or block all that spam landing in our inbox with buttons. Without them, websites would be digital business cards. Through Bootstrap, we can also make buttons a beautiful component of our sites.<\/p>\n","protected":false},"excerpt":{"rendered":"The button element is one of the more useful Hypertext Markup Language (HTML) elements in the sense that it enables the user to interact with a page.  Logging in, subscribing, deleting or opening something, showing a menu, changing the color theme are actions performed with buttons. The default browser button styles are not the best…","protected":false},"author":85,"featured_media":20916,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-20915","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nBootstrap Buttons | Career Karma<\/title>\n<meta name=\"description\" content=\"A Bootstrap button is one of Bootstrap\u2019s styled components, enabling us to have a nice looking button with close to zero effort. Learn all about it with Career Karma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Buttons\" \/>\n<meta property=\"og:description\" content=\"A Bootstrap button is one of Bootstrap\u2019s styled components, enabling us to have a nice looking button with close to zero effort. Learn all about it with Career Karma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-07T07:47:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T18:58:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/wes-hicks-VZNYO4suM5o-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Stefan Dili\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stefan Dili\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/\"},\"author\":{\"name\":\"Stefan Dili\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\"},\"headline\":\"Bootstrap Buttons\",\"datePublished\":\"2020-08-07T07:47:06+00:00\",\"dateModified\":\"2020-12-29T18:58:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/\"},\"wordCount\":736,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/wes-hicks-VZNYO4suM5o-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/\",\"name\":\"Bootstrap Buttons | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/wes-hicks-VZNYO4suM5o-unsplash.jpg\",\"datePublished\":\"2020-08-07T07:47:06+00:00\",\"dateModified\":\"2020-12-29T18:58:40+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\"},\"description\":\"A Bootstrap button is one of Bootstrap\u2019s styled components, enabling us to have a nice looking button with close to zero effort. Learn all about it with Career Karma.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/wes-hicks-VZNYO4suM5o-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/wes-hicks-VZNYO4suM5o-unsplash.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bootstrap Buttons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\",\"name\":\"Stefan Dili\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg\",\"caption\":\"Stefan Dili\"},\"url\":\"https:\/\/careerkarma.com\/blog\/author\/stefan-dili\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap Buttons | Career Karma","description":"A Bootstrap button is one of Bootstrap\u2019s styled components, enabling us to have a nice looking button with close to zero effort. Learn all about it with Career Karma.","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:\/\/careerkarma.com\/blog\/bootstrap-button\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Buttons","og_description":"A Bootstrap button is one of Bootstrap\u2019s styled components, enabling us to have a nice looking button with close to zero effort. Learn all about it with Career Karma.","og_url":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-08-07T07:47:06+00:00","article_modified_time":"2020-12-29T18:58:40+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/wes-hicks-VZNYO4suM5o-unsplash.jpg","type":"image\/jpeg"}],"author":"Stefan Dili","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Stefan Dili","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/"},"author":{"name":"Stefan Dili","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b"},"headline":"Bootstrap Buttons","datePublished":"2020-08-07T07:47:06+00:00","dateModified":"2020-12-29T18:58:40+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/"},"wordCount":736,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/wes-hicks-VZNYO4suM5o-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/bootstrap-button\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/","url":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/","name":"Bootstrap Buttons | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/wes-hicks-VZNYO4suM5o-unsplash.jpg","datePublished":"2020-08-07T07:47:06+00:00","dateModified":"2020-12-29T18:58:40+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b"},"description":"A Bootstrap button is one of Bootstrap\u2019s styled components, enabling us to have a nice looking button with close to zero effort. Learn all about it with Career Karma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/bootstrap-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/wes-hicks-VZNYO4suM5o-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/wes-hicks-VZNYO4suM5o-unsplash.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"Bootstrap Buttons"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b","name":"Stefan Dili","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg","caption":"Stefan Dili"},"url":"https:\/\/careerkarma.com\/blog\/author\/stefan-dili\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/20915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=20915"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/20915\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/20916"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=20915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=20915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=20915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}