{"id":21003,"date":"2020-08-07T22:53:09","date_gmt":"2020-08-08T05:53:09","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=21003"},"modified":"2020-12-29T11:01:41","modified_gmt":"2020-12-29T19:01:41","slug":"bootstrap-dropdown","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/","title":{"rendered":"How to Make a Dropdown Menu with Bootstrap"},"content":{"rendered":"\n
No matter if you\u2019re making a simple one page portfolio website, a monolithic app for a huge company, a blog, or a forum, chances are you\u2019re going to need a dropdown menu. <\/p>\n\n\n\n
A dropdown menu is especially useful when you have lots of links or actions, but not enough space on the page to display them all at once. <\/p>\n\n\n\n
Usually, dropdowns require a bit of JavaScript. <\/p>\n\n\n\n
If you haven\u2019t started learning it yet or just want a quick solution, Bootstrap is the perfect fit.<\/p>\n\n\n\n
What is Bootstrap?<\/h2>\n\n\n\n
You\u2019ve probably heard the word thrown around lots of times, but what is Bootstrap? <\/p>\n\n\n\n
It\u2019s a front-end CSS (with a bit of JavaScript) framework. This means that it\u2019s a kind of scaffolding made beforehand to speed up development considerably. Programmers commit a certain amount of time to develop a standard to which to hold up to, and include all the prerequisite setup necessary into the framework itself, so we don\u2019t have to do it each time. <\/p>\n\n\n\n
A standardized styling is applied to certain components in Bootstrap that are often built, like button elements, button groups, and navigation bars. This means that we can apply all those styles using a few predefined keywords instead of writing numerous lines of code repeatedly. <\/p>\n\n\n\n
This helps a lot with consistency as a team of multiple developers working on larger applications don\u2019t need to worry about applying the same styles. All styles are defined in the framework.<\/p>\n\n\n\n
Setting up Bootstrap<\/h2>\n\n\n\n
To use Bootstrap, we need to add a few lines of code to our HTML structure. <\/p>\n\n\n\n
We\u2019re going to use the Bootstrap CDN for the fastest and simplest setup. <\/p>\n\n\n\n
First of all, we need a proper HTML5 template, which is easily done in modern code editors. In VSCode, simply type ! and press enter or tab to get the HTML5 document structure which looks like this: <\/p>\n\n\n\n
Bootstrap depends on some JavaScript libraries under the hood, so we also need to include the following <script> tags right before the closing <\/body> tag:<\/p>\n\n\n\n
That\u2019s all the setup we need. We\u2019re now ready to bootstrap our project.<\/p>\n\n\n\n
Utilising Bootstrap<\/h2>\n\n\n\n
The power of Bootstrap is utilised by using it\u2019s keywords as classes of HTML tags. By using it, you can style your page completely without even making a CSS file! <\/p>\n\n\n\n
For instance, here\u2019s a simple button group:<\/p>\n\n\n\n
We\u2019ve made a button group with all of Bootstrap\u2019s preset colors (muted excluded as it\u2019s reserved for text). <\/p>\n\n\n\n
Now let\u2019s get on to dropdowns.<\/p>\n\n\n\n
Bootstrap Dropdowns, Various Ways<\/h2>\n\n\n\n
In older versions of Bootstrap, we had to use <a> tags exclusively for dropdowns. Since version 4 <button> tags are accepted as well.<\/p>\n\n\n\n
A note on links and buttons: <\/h5>\n\n\n\n
Links should be used for navigation purposes only. Whether within the current page, or to send the user to a different page, but a link\u2019s only function should be navigation. <\/p>\n\n\n\n
On the other hand, any kind of action like log in, sign up, submit form, hide section, change color theme etc. should be handled with buttons. <\/p>\n\n\n\n
Any sort of JavaScript click-related actions should be done with buttons. <\/p>\n\n\n\n
Also, links can only be accessed with the enter key, whereas buttons can be accessed with enter or space which is important to take into account for accessibility purposes. <\/p>\n\n\n\n
In any case, the data-toggle=”dropdown” <\/p>\n\n\n\n
attribute is necessary in order for it to work.<\/p>\n\n\n\n
We wrap the whole thing in an element (most usually a <div>) with class=\u201cdropdown\u201d, and make a button with class=\u201cbtn dropdown-toggle\u201d and data-toggle=\u201cdropdown\u201d as the first element. This will act as the toggle for the dropdown menu. <\/p>\n\n\n\n
Then, we make a container for the actual dropdown, again most usually a <div> or <ul> is used, with class=\u201cdropdown-menu\u201d. <\/p>\n\n\n\n
Lastly, we make all the items that we want inside of the menu with class=\u201cdropdown-item\u201d. These are usually links to other pages or sections on the current page. <\/p>\n\n\n\n
The result: <\/p>\n\n\n\n<\/figure>\n\n\n\n
Hooray, you\u2019ve made your first dropdown menu with Bootstrap!<\/p>\n\n\n\n
The exact same thing can be done using <a> tags. We also used <ul> this time for the menu, and the results are the same.<\/p>\n\n\n\n
<\/p>\n\n\n\n<\/figure>\n\n\n\n
Styling a Menu and It\u2019s Items<\/h3>\n\n\n\n
Bootstrap styles can be added to the menu and items. Let\u2019s add some colors to our menu. We can do this by prefixing one of Bootstrap\u2019s colors with bg- which stands for background:<\/p>\n\n\n\n
Another interesting option is to have a split button. With this we get double functionality. A button to serve one purpose, and the caret to access the dropdown. A potential use case is to have the button open a page containing all the items from the menu, and the individual links leading to their own separate pages:<\/p>\n\n\n\n
In this case, we need to make a container with class=\u201cbtn-group\u201d to wrap the button and the toggle, and add dropdown-toggle-split to the toggle button. <\/p>\n\n\n\n<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Form inside a Dropdown<\/h3>\n\n\n\n
We can also place an HTML form inside a dropdown menu:<\/p>\n\n\n\n
We simply make a regular form within the dropdown-menu container. <\/p>\n\n\n\n
The most common use case for this is a simple login form, just like in our example.<\/p>\n\n\n\n
Note: Bootstrap included the sr-only class seen in the example, which stands for screen-readers only. The element is hidden on the page and only gets recognized by screen readers. This is important for accessibility purposes.<\/h5>\n\n\n\n
Dropup, Dropleft, Dropright<\/h3>\n\n\n\n
A few variants on the regular dropdown menu:<\/p>\n\n\n\n
The Dropup Menu<\/h5>\n\n\n\n
We can use the dropup menu on a navigation bar that\u2019s docked to the bottom of the page:<\/p>\n\n\n\n
We can use the dropleft menu when the button that opens it is touching the right edge of the screen, so that our menu doesn\u2019t go off screen.<\/p>\n\n\n\n
In each of these we\u2019ve included another bootstrap feature, an empty div with a class of dropdown-divider which gives us a nice separation of sections within the menu.<\/p>\n\n\n\n
Dropdown With Header<\/h3>\n\n\n\n
We can have header text in our dropdown menu by making an element with a class of dropdown-header like so:<\/p>\n\n\n\n
Why use a heading instead of just a paragraph, span, or other text tag? <\/p>\n\n\n\n
A heading <h1-h6> plays a role in search engine optimization (SEO), so it\u2019s worth placing them where appropriate. <\/p>\n\n\n\n
If our dropdown hosts an important section of our website, it might make sense to give it some type of heading. Bootstrap also has some formatting applied to heading tags, which we can see in our example:<\/p>\n\n\n\n<\/figure>\n\n\n\n
Right-Aligned dropdown<\/h3>\n\n\n\n
By default, Bootstrap\u2019s dropdown menus are left-aligned with the their toggle button. <\/p>\n\n\n\n
If a right-aligned menu would be a better fit for your design, or you simply prefer it that way, you can add a class of dropdown-menu-right to it:<\/p>\n\n\n\n
When might you want a disabled item in your menu? Maybe the option is currently unavailable, like worldwide shipping, the item is out of stock, or similar.<\/p>\n\n\n\n
An active class on the other hand is made to grab the attention of the viewer, highlighting the current, or focused element. A potential use case for setting this class statically (without changing it or moving it from element to element) is for call-to-action (buy, register, subscribe etc.) buttons, or simply leading the users attention towards a certain element. <\/p>\n\n\n\n<\/figure>\n\n\n\n
You\u2019re ready for Bootstrap<\/h2>\n\n\n\n
Bootstrap is a very powerful framework built for rapid development, by abstracting away the setup necessary on each project, for each component. <\/p>\n\n\n\n
Today we learned how we can make different types of dropdowns with it, with no JS involved (at least not on our part). <\/p>\n\n\n\n
Now go and bootstrap a project!<\/p>\n","protected":false},"excerpt":{"rendered":"No matter if you\u2019re making a simple one page portfolio website, a monolithic app for a huge company, a blog, or a forum, chances are you\u2019re going to need a dropdown menu. A dropdown menu is especially useful when you have lots of links or actions, but not enough space on the page to display…","protected":false},"author":85,"featured_media":20302,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-21003","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":"\n
How to Make a Dropdown Menu with Bootstrap | Career Karma<\/title>\n<meta name=\"description\" content=\"Learn how to easily implement a dropdown menu on your website using Twitter\u2019s Bootstrap framework made for rapid web development. Quick and easy 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-dropdown\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a Dropdown Menu with Bootstrap\" \/>\n<meta property=\"og:description\" content=\"Learn how to easily implement a dropdown menu on your website using Twitter\u2019s Bootstrap framework made for rapid web development. Quick and easy with Career Karma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/\" \/>\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-08T05:53:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:01:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\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=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/\"},\"author\":{\"name\":\"Stefan Dili\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\"},\"headline\":\"How to Make a Dropdown Menu with Bootstrap\",\"datePublished\":\"2020-08-08T05:53:09+00:00\",\"dateModified\":\"2020-12-29T19:01:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/\"},\"wordCount\":1382,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/\",\"name\":\"How to Make a Dropdown Menu with Bootstrap | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\",\"datePublished\":\"2020-08-08T05:53:09+00:00\",\"dateModified\":\"2020-12-29T19:01:41+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\"},\"description\":\"Learn how to easily implement a dropdown menu on your website using Twitter\u2019s Bootstrap framework made for rapid web development. Quick and easy with Career Karma.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\",\"width\":1200,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/careerkarma.com\/blog\/html\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Make a Dropdown Menu with Bootstrap\"}]},{\"@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":"How to Make a Dropdown Menu with Bootstrap | Career Karma","description":"Learn how to easily implement a dropdown menu on your website using Twitter\u2019s Bootstrap framework made for rapid web development. Quick and easy 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-dropdown\/","og_locale":"en_US","og_type":"article","og_title":"How to Make a Dropdown Menu with Bootstrap","og_description":"Learn how to easily implement a dropdown menu on your website using Twitter\u2019s Bootstrap framework made for rapid web development. Quick and easy with Career Karma.","og_url":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-08-08T05:53:09+00:00","article_modified_time":"2020-12-29T19:01:41+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-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":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/"},"author":{"name":"Stefan Dili","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b"},"headline":"How to Make a Dropdown Menu with Bootstrap","datePublished":"2020-08-08T05:53:09+00:00","dateModified":"2020-12-29T19:01:41+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/"},"wordCount":1382,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/","url":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/","name":"How to Make a Dropdown Menu with Bootstrap | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","datePublished":"2020-08-08T05:53:09+00:00","dateModified":"2020-12-29T19:01:41+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b"},"description":"Learn how to easily implement a dropdown menu on your website using Twitter\u2019s Bootstrap framework made for rapid web development. Quick and easy with Career Karma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","width":1200,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-dropdown\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"How to Make a Dropdown Menu with Bootstrap"}]},{"@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\/21003","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=21003"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21003\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/20302"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=21003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=21003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=21003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n