{"id":3588,"date":"2019-02-07T22:01:09","date_gmt":"2019-02-07T16:31:09","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=3588"},"modified":"2026-10-09T11:08:29","modified_gmt":"2026-10-09T05:38:29","slug":"bootstrap-4-scrollspy","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/","title":{"rendered":"Bootstrap 4 scrollspy"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Post Date:<\/strong> February 07, 2019<br><strong>Last Updated:<\/strong> October 09, 2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/components\/scrollspy\/\" data-type=\"link\" data-id=\"https:\/\/getbootstrap.com\/docs\/4.0\/components\/scrollspy\/\" target=\"_blank\" rel=\"noopener\">Scrollspy<\/a> is a Bootstrap feature used to automatically update the active navigation links based on the user&#8217;s scroll position. It helps visitors identify which section of a webpage they are currently viewing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial, we will learn how to create a Scrollspy using Bootstrap 4 with a fixed navigation bar, multiple page sections, and a dropdown menu containing submenu links.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Is Scrollspy?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Scrollspy automatically highlights the corresponding navigation link as the user scrolls through different sections of a webpage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a webpage may contain several sections, such as Section 1, Section 2, Section 3, and Section 4. When a user scrolls to a particular section, Scrollspy updates the navigation bar to indicate the active section.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This feature is useful for long webpages, documentation pages, tutorials, and websites with multiple content sections.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Create a Scrollspy Using Bootstrap 4<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The following example demonstrates how to create a Scrollspy using Bootstrap 4. It includes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A fixed navigation bar.<\/li>\n\n\n\n<li>Multiple content sections.<\/li>\n\n\n\n<li>Active navigation links based on scroll position.<\/li>\n\n\n\n<li>A dropdown menu with submenu links.<\/li>\n\n\n\n<li>Different background colors for each section.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Include the Required Dependencies<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The example uses Bootstrap 4.2.1, jQuery 3.3.1, and Popper.js 1.14.6. Add the following dependencies to your HTML document&#8217;s <code>&lt;head&gt;<\/code> section.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.2.1\/css\/bootstrap.min.css\">\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\">&lt;\/script>\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.6\/umd\/popper.min.js\">&lt;\/script>\n&lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.2.1\/js\/bootstrap.min.js\">&lt;\/script><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">These libraries provide the styling and JavaScript functionality required by the Bootstrap 4 Scrollspy example.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add the Scrollspy Configuration<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add the following CSS to ensure that the page uses relative positioning:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">body {\n    position: relative;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then configure the <code>&lt;body&gt;<\/code> element with the Scrollspy attributes:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;body data-spy=\"scroll\" data-target=\".navbar\" data-offset=\"50\"><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what each attribute does:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>data-spy=\"scroll\"<\/code> enables Scrollspy.<\/li>\n\n\n\n<li><code>data-target=\".navbar\"<\/code> Connects Scrollspy to the navigation bar.<\/li>\n\n\n\n<li><code>data-offset=\"50\"<\/code> Sets a 50-pixel offset when determining the active section.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The offset can be adjusted according to the height of the fixed navigation bar and the desired activation point.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Create the Navigation Bar<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The navigation bar contains links to each page section. The dropdown menu provides links to Section 4&#8217;s two subsections.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Add the Content Sections<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Each section uses a unique <code>id<\/code> that matches the corresponding navigation link. This allows Bootstrap to associate the navigation items with the correct content sections.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Complete HTML Source Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Copy the following code into an HTML file and open it in a browser to test the Scrollspy example.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;title>Bootstrap Example&lt;\/title>\n  &lt;meta charset=\"utf-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.2.1\/css\/bootstrap.min.css\">\n\n  &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\">&lt;\/script>\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.6\/umd\/popper.min.js\">&lt;\/script>\n  &lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.2.1\/js\/bootstrap.min.js\">&lt;\/script>\n\n  &lt;style>\n    body {\n      position: relative;\n    }\n  &lt;\/style>\n&lt;\/head>\n\n&lt;body data-spy=\"scroll\" data-target=\".navbar\" data-offset=\"50\">\n\n&lt;nav class=\"navbar navbar-expand-sm bg-dark navbar-dark fixed-top\">\n  &lt;ul class=\"navbar-nav\">\n    &lt;li class=\"nav-item\">\n      &lt;a class=\"nav-link\" href=\"#section1\">Section 1&lt;\/a>\n    &lt;\/li>\n\n    &lt;li class=\"nav-item\">\n      &lt;a class=\"nav-link\" href=\"#section2\">Section 2&lt;\/a>\n    &lt;\/li>\n\n    &lt;li class=\"nav-item\">\n      &lt;a class=\"nav-link\" href=\"#section3\">Section 3&lt;\/a>\n    &lt;\/li>\n\n    &lt;li class=\"nav-item dropdown\">\n      &lt;a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbardrop\" data-toggle=\"dropdown\">\n        Section 4\n      &lt;\/a>\n\n      &lt;div class=\"dropdown-menu\">\n        &lt;a class=\"dropdown-item\" href=\"#section41\">Link 1&lt;\/a>\n        &lt;a class=\"dropdown-item\" href=\"#section42\">Link 2&lt;\/a>\n      &lt;\/div>\n    &lt;\/li>\n  &lt;\/ul>\n&lt;\/nav>\n\n&lt;div id=\"section1\" class=\"container-fluid bg-success\" style=\"padding-top:70px;padding-bottom:70px\">\n  &lt;h1>Section 1&lt;\/h1>\n  &lt;p>NEVER EVER GIVE UP&lt;\/p>\n  &lt;p>SURVIVAL $$$$$$$$&lt;\/p>\n&lt;\/div>\n\n&lt;div id=\"section2\" class=\"container-fluid bg-warning\" style=\"padding-top:70px;padding-bottom:70px\">\n  &lt;h1>Section 2&lt;\/h1>\n  &lt;p>NATURE IS MOTHER OF GOD(())&lt;\/p>\n  &lt;p>TRUE FRIENSHIP MAKES HAPPIER ^^^^^^^^^^2&lt;\/p>\n&lt;\/div>\n\n&lt;div id=\"section3\" class=\"container-fluid bg-secondary\" style=\"padding-top:70px;padding-bottom:70px\">\n  &lt;h1>Section 3&lt;\/h1>\n  &lt;p>TRUE LOVE %%%%%%%%%%%%&lt;\/p>\n  &lt;p>CREATIVITY ***************&lt;\/p>\n&lt;\/div>\n\n&lt;div id=\"section41\" class=\"container-fluid bg-danger\" style=\"padding-top:70px;padding-bottom:70px\">\n  &lt;h1>Section 4 Submenu 1&lt;\/h1>\n  &lt;p>HURRAY$$$$$$$$$$$&lt;\/p>\n  &lt;p>HAVE FUN ################&lt;\/p>\n&lt;\/div>\n\n&lt;div id=\"section42\" class=\"container-fluid bg-info\" style=\"padding-top:70px;padding-bottom:70px\">\n  &lt;h1>Section 4 Submenu 2&lt;\/h1>\n  &lt;p>HELLO !!!!!!&lt;\/p>\n  &lt;p>SUCCESS !!!!!!!!!!!!!!!!!&lt;\/p>\n&lt;\/div>\n\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Example Explained<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Enable Scrollspy<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add <code>data-spy=\"scroll\"<\/code> to the element that should be monitored while scrolling. In this example, the <code>&lt;body&gt;<\/code> element is used.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Connect Scrollspy to the Navigation Bar<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>data-target<\/code> attribute identifies the navigation bar that Scrollspy updates.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">data-target=\".navbar\"<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>.navbar<\/code> selector connects the Scrollspy behavior to the navigation element with the <code>navbar<\/code> class.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Configure the Scroll Offset<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>data-offset<\/code> attribute specifies the number of pixels used as an offset when calculating the active section.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">data-offset=\"50\"<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Adjust this value if navigation links become active too early or too late while scrolling.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Match Navigation Links to Section IDs<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Each navigation link points to a corresponding section using its <code>href<\/code> attribute.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;a class=\"nav-link\" href=\"#section1\">Section 1&lt;\/a><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The destination section uses the matching ID:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div id=\"section1\" class=\"container-fluid bg-success\"><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The same principle applies to <code>section2<\/code>, <code>section3<\/code>, <code>section41<\/code>, and <code>section42<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Use Relative Positioning<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The element being monitored by Scrollspy requires relative positioning. In this example, the CSS rule is applied to the body:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">body {\n    position: relative;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This is part of the configuration used by the original Bootstrap 4 implementation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">End Output and Results<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"857\" height=\"158\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image.png\" alt=\"\" class=\"wp-image-12198\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image.png 857w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image-300x55.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image-768x142.png 768w\" sizes=\"(max-width: 857px) 100vw, 857px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image-1.png\"><img decoding=\"async\" width=\"857\" height=\"202\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image-1.png\" alt=\"\" class=\"wp-image-12199\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image-1.png 857w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image-1-300x71.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image-1-768x181.png 768w\" sizes=\"(max-width: 857px) 100vw, 857px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image-2.png\"><img decoding=\"async\" width=\"873\" height=\"142\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image-2.png\" alt=\"\" class=\"wp-image-12200\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image-2.png 873w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image-2-300x49.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/image-2-768x125.png 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">1. What is Bootstrap Scrollspy?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Bootstrap Scrollspy automatically updates the active navigation link according to the user&#8217;s scroll position on a webpage.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. Why is <code>data-target<\/code> used in Scrollspy?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>data-target<\/code> attribute specifies the navigation element that Bootstrap should update when the user scrolls through the page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. What is the purpose of <code>data-offset<\/code>?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>data-offset<\/code> attribute adjusts the scroll position used to determine which navigation link should be active. It is particularly useful when a page has a fixed navigation bar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bootstrap 4 Scrollspy is a useful feature for creating interactive navigation on webpages with multiple content sections. By configuring the <code>data-spy<\/code>, <code>data-target<\/code>, and <code>data-offset<\/code> attributes and matching navigation links with section IDs, you can automatically highlight the active section while scrolling.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can customize the navigation bar, section content, background colors, and scroll offset according to your website requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related Articles<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/pheonixsolutions.com\/blog\/testimonial-using-bootstrap\/\">Testimonial Using Bootstrap<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/pheonixsolutions.com\/blog\/section-counter-using-bootstrap-4\/\">How to Create a Section Counter Using Bootstrap 4<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/pheonixsolutions.com\/blog\/laravel-installation-vestacp-account\/\">Laravel Installation in VestaCP Account<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Talk to Our Experts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Need help with Bootstrap development, responsive navigation, or frontend implementation? Our experts can help you find the right solution for your business.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Get in touch with us: <a href=\"https:\/\/pheonixsolutions.com\/contact\">Contact our team<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Post Date: February 07, 2019Last Updated: October 09, 2026 Introduction Scrollspy is a Bootstrap feature used to automatically update the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[479,555],"class_list":["post-3588","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-bootstrap-4","tag-scrollspy","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-VS","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=3588"}],"version-history":[{"count":2,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3588\/revisions"}],"predecessor-version":[{"id":12206,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3588\/revisions\/12206"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=3588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=3588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=3588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}