{"id":19377,"date":"2014-02-21T18:01:34","date_gmt":"2014-02-21T10:01:34","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19377"},"modified":"2025-04-04T01:42:19","modified_gmt":"2025-04-03T17:42:19","slug":"bootstrap-and-sass","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/","title":{"rendered":"A Guide to: Responsive Web Design with Bootstrap 3 and Sass"},"content":{"rendered":"<p>Bootstrap offers a responsive grid system and a variety of web components that make it easy to <strong>create a <a href=\"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/\">responsive website<\/a> swiftly<\/strong>. While Bootstrap traditionally uses <a href=\"https:\/\/www.hongkiat.com\/blog\/less-basic\/\">LESS<\/a> for styling, you can also use <a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/\">Sass<\/a> if you prefer, thanks to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/thomasmcdonald_\">Thomas McDonald<\/a>.<\/p>\n<h2>How to Install Bootstrap with Sass<\/h2>\n<p>There are multiple methods to get started with <strong>Bootstrap and Sass<\/strong>. One way is to install it as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/rubygems.org\/gems\/bootstrap-sass\">a Ruby gem<\/a> using the Terminal:<\/p>\n<pre>\r\n gem install bootstrap-sass\r\n<\/pre>\n<p>Alternatively, you can integrate it with Compass using the following command. This method will only include essential Bootstrap variables and a file for your custom styles:<\/p>\n<pre>\r\n compass create my-new-project -r bootstrap-sass --using bootstrap\r\n<\/pre>\n<p>You can also download the package directly from its <a href=\"https:\/\/www.hongkiat.com\/blog\/create-github-page\/\">Github repository<\/a>.<\/p>\n<h2>What\u2019s New in Bootstrap 3?<\/h2>\n<p>Bootstrap 3 introduces several new features:<\/p>\n<h3>Adoption of Flat Design<\/h3>\n<p>The most noticeable change in Bootstrap 3 is its shift towards flat design. Gone are the gradients and shadows from the previous version.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-and-sass\/flat-buttons.jpg\" width=\"500\" height=\"180\" alt=\"Flat Design in Bootstrap 3\"><\/figure>\n<h3>Enhanced Grid System<\/h3>\n<p>Bootstrap 3 comes with a revamped grid system that includes Large, Medium, Small, and Extra Small Grids to accommodate various screen sizes. Here\u2019s an HTML example to illustrate:<\/p>\n<pre>\r\n &lt;div class=\"container\"&gt;\r\n\t &lt;div class=\"row\"&gt;\r\n\t\t &lt;div class=\"column col-md-4 col-sm-6\"&gt;\r\n\t\t \t&lt;p&gt;Left Column&lt;\/p&gt;\r\n\t\t &lt;\/div&gt;\r\n\t\t &lt;div class=\"column col-md-4 col-sm-4\"&gt;\r\n\t\t \t&lt;p&gt;Middle Column&lt;\/p&gt;\r\n\t\t &lt;\/div&gt;\r\n\t\t &lt;div class=\"column col-md-4 col-sm-2\"&gt;\r\n\t\t \t&lt;p&gt;Right Column&lt;\/p&gt;\r\n\t\t &lt;\/div&gt;\r\n\t &lt;\/div&gt;\r\n &lt;\/div&gt;\r\n<\/pre>\n<p>The grid system is more flexible and adjusts according to the screen size, thanks to the new class definitions.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-and-sass\/the-new-grid.jpg\" width=\"500\" height=\"180\" alt=\"New Grid System in Bootstrap 3\"><\/figure>\n<h3>Additional Components<\/h3>\n<p>Bootstrap 3 also adds new components like <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/components\/#pagination-pager\">Pager<\/a><\/strong>, <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/components\/#list-group\">List Group<\/a><\/strong>, <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/components\/#panels\">Panels<\/a><\/strong>, and <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/components\/#page-header\">Page Header<\/a><\/strong>.<\/p>\n<h2>Leveraging Sass Functions<\/h2>\n<p>Using Sass functions like <code>@extend<\/code> and <code>@include<\/code>, you can achieve a cleaner and more semantic HTML structure. This makes your website layout more maintainable and programmable.<\/p>\n<pre>\r\n .main-area {\r\n @extend .row;\r\n }\r\n .column {\r\n @extend .col-md-4;\r\n }\r\n .content {\r\n @extend .col-xs-6;\r\n @extend .col-sm-6;\r\n }\r\n .sidebar {\r\n @extend .col-xs-4;\r\n @extend .col-sm-4;\r\n }\r\n .side-nav {\r\n @extend .col-sm-2;\r\n @extend .col-sm-2;\r\n }\r\n<\/pre>\n<h2>Final Thoughts<\/h2>\n<p>Combining Bootstrap and Sass can significantly speed up your web development process. Sass features like <code>@extend<\/code> and <code>@include<\/code> add an extra layer of flexibility, making your CSS more maintainable. For more information on Sass, check out this <a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/\">Getting Started With Sass: Installation And The Basics<\/a> article.<\/p>\n<p>So, are you ready to try out Bootstrap combined with Sass for your next web development project?<\/p>","protected":false},"excerpt":{"rendered":"<p>Bootstrap offers a responsive grid system and a variety of web components that make it easy to create a responsive website swiftly. While Bootstrap traditionally uses LESS for styling, you can also use Sass if you prefer, thanks to Thomas McDonald. How to Install Bootstrap with Sass There are multiple methods to get started with&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[2289,2190],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Guide to: Responsive Web Design with Bootstrap 3 and Sass - Hongkiat<\/title>\n<meta name=\"description\" content=\"Bootstrap offers a responsive grid system and a variety of web components that make it easy to create a responsive website swiftly. While Bootstrap\" \/>\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.hongkiat.com\/blog\/bootstrap-and-sass\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Guide to: Responsive Web Design with Bootstrap 3 and Sass\" \/>\n<meta property=\"og:description\" content=\"Bootstrap offers a responsive grid system and a variety of web components that make it easy to create a responsive website swiftly. While Bootstrap\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-02-21T10:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:42:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-and-sass\/flat-buttons.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\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.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Guide to: Responsive Web Design with Bootstrap 3 and Sass\",\"datePublished\":\"2014-02-21T10:01:34+00:00\",\"dateModified\":\"2025-04-03T17:42:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/\"},\"wordCount\":309,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-and-sass\\\/flat-buttons.jpg\",\"keywords\":[\"Bootstrap\",\"sass\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/\",\"name\":\"A Guide to: Responsive Web Design with Bootstrap 3 and Sass - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-and-sass\\\/flat-buttons.jpg\",\"datePublished\":\"2014-02-21T10:01:34+00:00\",\"dateModified\":\"2025-04-03T17:42:19+00:00\",\"description\":\"Bootstrap offers a responsive grid system and a variety of web components that make it easy to create a responsive website swiftly. While Bootstrap\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-and-sass\\\/flat-buttons.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-and-sass\\\/flat-buttons.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-and-sass\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Guide to: Responsive Web Design with Bootstrap 3 and Sass\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Guide to: Responsive Web Design with Bootstrap 3 and Sass - Hongkiat","description":"Bootstrap offers a responsive grid system and a variety of web components that make it easy to create a responsive website swiftly. While Bootstrap","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.hongkiat.com\/blog\/bootstrap-and-sass\/","og_locale":"en_US","og_type":"article","og_title":"A Guide to: Responsive Web Design with Bootstrap 3 and Sass","og_description":"Bootstrap offers a responsive grid system and a variety of web components that make it easy to create a responsive website swiftly. While Bootstrap","og_url":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-02-21T10:01:34+00:00","article_modified_time":"2025-04-03T17:42:19+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-and-sass\/flat-buttons.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Guide to: Responsive Web Design with Bootstrap 3 and Sass","datePublished":"2014-02-21T10:01:34+00:00","dateModified":"2025-04-03T17:42:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/"},"wordCount":309,"commentCount":10,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-and-sass\/flat-buttons.jpg","keywords":["Bootstrap","sass"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/","url":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/","name":"A Guide to: Responsive Web Design with Bootstrap 3 and Sass - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-and-sass\/flat-buttons.jpg","datePublished":"2014-02-21T10:01:34+00:00","dateModified":"2025-04-03T17:42:19+00:00","description":"Bootstrap offers a responsive grid system and a variety of web components that make it easy to create a responsive website swiftly. While Bootstrap","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-and-sass\/flat-buttons.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-and-sass\/flat-buttons.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Guide to: Responsive Web Design with Bootstrap 3 and Sass"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-52x","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19377"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19377\/revisions"}],"predecessor-version":[{"id":73659,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19377\/revisions\/73659"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19377"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}