{"id":17676,"date":"2017-07-11T16:15:22","date_gmt":"2017-07-11T13:15:22","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=17676"},"modified":"2018-01-08T13:08:19","modified_gmt":"2018-01-08T11:08:19","slug":"bootstrap-responsive-navbar-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/","title":{"rendered":"Bootstrap Responsive Navbar Example"},"content":{"rendered":"

In this example we will explore the Navbar<\/code> component from Bootstrap. One of the key aspect of any website is ease of navigation and this component makes it easier to implement this crucial feature. So, let us try and learn how to best and effectively use the Navbar<\/code> component. This component also needs to be Responsive, meaning that it adjusts itself according to the viewport of the device used to view it. On the smaller devices it collapses and can be toggled with a button but on larger screens it is expanded horizontally to display all the contents.<\/p>\n

We will build a webpage in this example to test out and configure the many aspects of this component.
\n 
\n 
\n 
\n[ulp id=’57DHuNTHJ2qczaGz’]
\n <\/p>\n

1. Tools<\/h2>\n

We will use the following set of tools to build this example:
\n1. Bootstrap v3.3.7<\/a>
\n2. JQuery v1.12.4<\/a>
\n3. Node.js v6.3.0<\/a>
\n4. Express<\/a>
\n5. Visual Studio Code IDE<\/a><\/p>\n

Bootstrap is a popular framework for building responsive websites in quick time and JQuery library makes it a lot easier for all programmers writing JavaScript for the front-end. This library is also required by Bootstrap to do its job. A supported version needs to included ahead of Bootstrap.<\/p>\n

Node.js is basically JavaScript running on the Server as opposed to the browser. We will use Node with Express to build a simple Web-Server that serves our example page and required assets. Visual Studio Code IDE is my personal choice but it is not binding and you can choose an editor that you are comfortable with.<\/p>\n

2. Project Structure<\/h2>\n

The example has the following folder structure:<\/p>\n

\"\"<\/a>
Project Layout<\/figcaption><\/figure>\n

css<\/strong><\/em>
\nThis css files from Bootstrap package reside in this folder. All the css stylesheets created by us would reside here as well.
\nfonts<\/strong><\/em>
\nAll the font files that came with Bootstrap are located in this folder.
\njs<\/strong><\/em>
\nThe Bootstrap JavaScript files are placed here along with the file we will create, namely, bootstrap.navbar.js
\nbootstrap.navbar.js<\/strong><\/em>
\nThis file will hold our JavaScript code that will make our example tick.
\nindex.html<\/strong><\/em>
\nThis is the file which holds the HTML markup and is our landing page. All the other files are referenced in this one and they come together in the browser and make things happen.
\nindex.js<\/strong><\/em>
\nOur barebones web server built using Node.js and Express module resides in this file.<\/p>\n

3. Navbar Component<\/h2>\n

The Navbar<\/code> component from Bootstrap is used to contain the navigation links of our website. It is quite flexible and with mere switch of css classes we can create a variety of layout options. The example we build will provide us with options to switch between these and explore each of those options. We will write JavaScript to switch css classes and view the resulting changes to the layout of our index.html<\/code> page. But before we start writing code let us see the different options we have with the Navbar component from Bootstrap.<\/p>\n

3.1 Default Navbar<\/h3>\n

To build a default navbar we need to create the following skeletal Html structure to hold our navigation links:<\/p>\n

<nav class=\"navbar navbar-default\">\r\n    <div class=\"container-fluid\">\r\n        <div class=\"navbar-header\">\r\n<!--Holds branding and collapse toggling button-->\r\n\r\n        <\/div>\r\n        <div class=\"collapse navbar-collapse\">\r\n<!--Holds navigation links and other contents which are toggled in and out of view-->\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/nav>\r\n<\/pre>\n
It looks as below:<\/p>\n
\"\"<\/a>
Default Navbar<\/figcaption><\/figure>\n
3.2 Inverse Navbar<\/h3>\n
To setup a Navbar in inverted mode which considerably modifies its looks, we need to replace the navbar-default<\/code> css class with navbar-inverse<\/code> css class.
\nIt looks as below:<\/p>\n
\"\"<\/a>
Inverse Layout<\/figcaption><\/figure>\n
3.3 Custom Branding<\/h3>\n
To use a custom image or branding text for the navbar<\/code> we need to place the content in the div<\/code> decorated with the navbar-header<\/code> css class.
\nIt looks as below:<\/p>\n
\"\"<\/a>
Custom Branding<\/figcaption><\/figure>\n
3.4 Adding other elements<\/h3>\n
We can add just about any control we want in the navbar<\/code>. Some of the frequently used controls and the manner in which they can be included is as follows:<\/p>\n
Form<\/strong><\/em>
\nTo place a form control we need to decorate it with the navbar-form<\/code> css class as in the snippet.<\/p>\n
<form class=\"navbar-form\">\r\n\r\n...\r\n\r\n<\/form>\r\n<\/pre>\n
Button<\/strong><\/em>
\nAny buttons outside of the form control needs to be decorated with the navbar-btn<\/code> css class as below:<\/p>\n
<button class=\"navbar-btn\">\r\n...\r\n<\/button>\r\n<\/pre>\n
Links<\/strong><\/em>
\nFor any regular links appearing in the navigation bar we need to decorate the same with the css class like so:<\/p>\n
<a class=\"navbar-link\" href=\"#\">\r\n...\r\n<\/a>\r\n<\/pre>\n
Text<\/strong><\/em>
\nFree flowing text in paragraphs need to have the navbar-text<\/code> css class decoration as below:<\/p>\n
<p class=\"navbar-text\">\r\n\r\n...\r\n\r\n<\/p>\r\n<\/pre>\n
4. Making all of this dynamic<\/h2>\n
Let’s write some JavaScript in the bootstrap.navbar.js<\/code> file now to make switching between different options and to be able to switch them on or off without having to reload the page.<\/p>\n
The JavaScript basically just switches out the existing css<\/code> classes with the ones corresponding to the user selection causing the page layout to change dynamically.<\/p>\n
First of all we bind to the change event of our select<\/code> tag which switches the navbar<\/code> between default and inverse color schemes. Next, we bind to the click<\/code> event of the checkbox<\/code> control which controls the switch to any custom brand name we provide and the default one.<\/p>\n
bootstrap.navbar.js<\/em><\/span><\/p>\n
$(document).ready(function(){\r\n\r\n\/\/Switching between default and inverse modes of a navbar\r\n    $(\"#navbar-type\").on(\"click\",function(event){\r\n\r\n        if($(this).val() ===\"inverse\"){\r\n            $(\"nav.navbar\").removeClass(\"navbar-default\");\r\n            $(\"nav.navbar\").addClass(\"navbar-inverse\");\r\n        }else{\r\n            $(\"nav.navbar\").removeClass(\"navbar-inverse\");\r\n            $(\"nav.navbar\").addClass(\"navbar-default\");\r\n        }\r\n    });\r\n\r\n\/\/Using custom branding text provided by user or default one\r\n    $(\"#custom-branding\").on(\"click\",function(event){\r\n\r\n        if($(this).is(\":checked\")){\r\n            $(\"a.navbar-brand\").text($(\"#custom-brand-name\").val());\r\n        }else{\r\n            $(\"a.navbar-brand\").text(\"Brand\");\r\n        }\r\n    });\r\n\r\n\/\/Switching between static and fixed mode, also making sure body contents are padded in fixed mode\r\n    $(\"#navbar-mode\").on(\"click\",function(event){\r\n\r\n        if($(this).is(\":checked\")){\r\n            $(\"nav.navbar\").removeClass(\"navbar-fixed-top\");\r\n            $(\"nav.navbar\").addClass(\"navbar-static-top\");\r\n            $(document.body).removeClass(\"body-style\");\r\n        } else{\r\n            $(\"nav.navbar\").removeClass(\"navbar-static-top\");\r\n            $(\"nav.navbar\").addClass(\"navbar-fixed-top\");\r\n            $(document.body).addClass(\"body-style\");\r\n        }\r\n    });\r\n});\r\n<\/pre>\n
index.html<\/em><\/span><\/p>\n
 <!DOCTYPE html>\r\n <html lang=\"en\">\r\n <head>\r\n     <meta charset=\"utf-8\">\r\n     <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->\r\n     <title>Bootstrap Responsive Navbar Example - Web Code Geeks<\/title>\r\n\r\n<!-- Latest compiled and minified CSS -->\r\n         <link rel=\"stylesheet\" href=\"\/css\/bootstrap.min.css\">\r\n\r\n<!-- Optional theme -->\r\n         <link rel=\"stylesheet\" href=\"\/css\/bootstrap-theme.min.css\">\r\n         <style>\r\n             .body-style { padding-top: 70px; };\r\n             body { height: 1200px; };\r\n         <\/style>\r\n\r\n<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n <!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ -->\r\n <!--[if lt IE 9]>\r\n <script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n <script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n <![endif]-->\r\n <\/head>\r\n <body class=\"body-style\">\r\n <!--Navbar component from Bootstrap-->\r\n     <nav class=\"navbar navbar-default navbar-fixed-top\">\r\n         <div class=\"container-fluid\">\r\n             <div class=\"navbar-header\">\r\n                 <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-expanded=\"false\">\r\n                     <span class=\"sr-only\">Toggle<\/span>\r\n                     <span class=\"icon-bar\"><\/span>\r\n                     <span class=\"icon-bar\"><\/span>\r\n                     <span class=\"icon-bar\"><\/span>\r\n                 <\/button>\r\n                 <a class=\"navbar-brand\" href=\"#\">B<\/a>\r\n             <\/div>\r\n             <div class=\"collapse navbar-collapse\">\r\n                 <ul class=\"nav navbar-nav\">\r\n                     <li class=\"active\"><a href=\"#\">Link <span class=\"sr-only\">\r\n                     (current)<\/span><\/a><\/li>\r\n                     <li><a href=\"#\">Link<\/a><\/li>\r\n                     <li class=\"dropdown\">\r\n                         <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">Dropdown <span class=\"caret\"><\/span><\/a>\r\n                         <ul class=\"dropdown-menu\">\r\n                             <li><a href=\"#\">Action<\/a><\/li>\r\n                             <li><a href=\"#\">Another action<\/a><\/li>\r\n                             <li><a href=\"#\">Something else here<\/a><\/li>\r\n                             <li role=\"separator\" class=\"divider\"><\/li>\r\n                             <li><a href=\"#\">Separated link<\/a><\/li>\r\n                             <li role=\"separator\" class=\"divider\"><\/li>\r\n                             <li><a href=\"#\">One more separated link<\/a><\/li>\r\n                         <\/ul>\r\n                     <\/li>\r\n                 <\/ul>\r\n             <\/div>\r\n         <\/div>\r\n     <\/nav>\r\n\r\n<!--Fields provide customization options for the above displayed Navbar-->\r\n     <select id=\"navbar-type\" >\r\n         <option value=\"default\">Default<\/option>\r\n         <option value=\"inverse\">Inverse<\/option>\r\n     <\/select>\r\n     <input id=\"custom-branding\" type=\"checkbox\">Custom Branding<\/input>\r\n     <input id=\"custom-brand-name\" type=\"text\" placeholder=\"Enter custom brand name\" \/>\r\n     <input id=\"navbar-mode\" type=\"checkbox\">Static<\/input>\r\n     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->\r\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.4\/jquery.min.js\"><\/script>\r\n <!-- Include all compiled plugins (below), or include individual files as needed -->\r\n <!-- Latest compiled and minified JavaScript -->\r\n <script src=\".\/js\/bootstrap.min.js\"><\/script>\r\n <script src=\".\/js\/bootstrap.navbar.js\"><\/script>\r\n\r\n <\/body>\r\n <\/html>\r\n<\/pre>\n
5. Running the code<\/h2>\n
To run the code in the example you need to run the following two commands in order using a command prompt from the root of the project.<\/p>\n
project root>npm install\r\n<\/pre>\n
project root>node index.js\r\n<\/pre>\n
Navigate to http:\/\/localhost:8090<\/code> in a browser.<\/p>\n
6. Download the Source Code<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here : WCG — Bootstrap Responsive Navbar Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this example we will explore the Navbar component from Bootstrap. One of the key aspect of any website is ease of navigation and this component makes it easier to implement this crucial feature. So, let us try and learn how to best and effectively use the Navbar component. This component also needs to be …<\/p>\n","protected":false},"author":213,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[376,279,475],"class_list":["post-17676","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","tag-bootstrap","tag-navbar","tag-responsive-navbar"],"yoast_head":"\nBootstrap Responsive Navbar Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example we will explore the Navbar component from Bootstrap. One of the key aspect of any website is ease of navigation and this component makes\" \/>\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.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Responsive Navbar Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example we will explore the Navbar component from Bootstrap. One of the key aspect of any website is ease of navigation and this component makes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-11T13:15:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T11:08:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\"},\"headline\":\"Bootstrap Responsive Navbar Example\",\"datePublished\":\"2017-07-11T13:15:22+00:00\",\"dateModified\":\"2018-01-08T11:08:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/\"},\"wordCount\":875,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"keywords\":[\"bootstrap\",\"navbar\",\"responsive navbar\"],\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/\",\"name\":\"Bootstrap Responsive Navbar Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"datePublished\":\"2017-07-11T13:15:22+00:00\",\"dateModified\":\"2018-01-08T11:08:19+00:00\",\"description\":\"In this example we will explore the Navbar component from Bootstrap. One of the key aspect of any website is ease of navigation and this component makes\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bootstrap\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Bootstrap Responsive Navbar Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Responsive Navbar Example - Web Code Geeks - 2026","description":"In this example we will explore the Navbar component from Bootstrap. One of the key aspect of any website is ease of navigation and this component makes","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.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Responsive Navbar Example - Web Code Geeks - 2026","og_description":"In this example we will explore the Navbar component from Bootstrap. One of the key aspect of any website is ease of navigation and this component makes","og_url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-07-11T13:15:22+00:00","article_modified_time":"2018-01-08T11:08:19+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592"},"headline":"Bootstrap Responsive Navbar Example","datePublished":"2017-07-11T13:15:22+00:00","dateModified":"2018-01-08T11:08:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/"},"wordCount":875,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","keywords":["bootstrap","navbar","responsive navbar"],"articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/","name":"Bootstrap Responsive Navbar Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","datePublished":"2017-07-11T13:15:22+00:00","dateModified":"2018-01-08T11:08:19+00:00","description":"In this example we will explore the Navbar component from Bootstrap. One of the key aspect of any website is ease of navigation and this component makes","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-responsive-navbar-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"Bootstrap","item":"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/"},{"@type":"ListItem","position":4,"name":"Bootstrap Responsive Navbar Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/17676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=17676"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/17676\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/8515"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=17676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=17676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=17676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}