{"id":23315,"date":"2020-09-28T17:09:47","date_gmt":"2020-09-29T00:09:47","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=23315"},"modified":"2020-09-28T18:04:13","modified_gmt":"2020-09-29T01:04:13","slug":"bootstrap-navbar","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/","title":{"rendered":"Using the Bootstrap Framework to Create a Navbar"},"content":{"rendered":"\n

A navbar is a user interface (UI) element that\u2019s positioned at the top of a web page. It contains elements that make the navigational user experience more friendly by placing branding and navigational links that route to different components. In Bootstrap, we can use their documentation to create a navbar quickly that is fully functional and responsive. 
<\/p>\n\n\n\n

In this article, we will review how to set up Bootstrap and take a look at some examples of Bootstrap Navbars in action.<\/p>\n\n\n\n

Getting Started<\/h2>\n\n\n\n

The first thing we need to do to set up a Bootstrap Navbar is to ensure we have the proper dependencies. For this demonstration, we need Bootstrap, PopperJS, and jQuery. Take a look at Bootstrap\u2019s Quick Start<\/a> page for assistance with getting your dependencies added to your project.
<\/p>\n\n\n\n

It\u2019s your decision with how you handle the dependency requirement, but the easiest, more beginner-friendly way is to use the content delivery network \u2013 the CDN \u2013 for jQuery, Popper.js, and Bootstrap. Be careful of the order of your <script><\/code> tags \u2013 order matters here. 
<\/p>\n\n\n\n

You\u2019re now ready to get started!<\/p>\n\n\n\n

Using Bootstrap Documentation to Create a Navbar<\/h2>\n\n\n\n

On the left hand side of the Introduction\/Getting Started<\/code> page, you see a sidebar that links to various things. Take a look for the Components<\/code> link and click on it. This will navigate you to the first of Bootstrap\u2019s many available components: \u201cAlerts\u201d. If we take a look at the sidebar again, it now shows the different links to all the different components we have available to us. 
<\/p>\n\n\n\n

Click on the Navbar<\/code> component to get started. This will have the information we need.<\/p>\n\n\n\n

How it Works<\/h3>\n\n\n\n

Navbars start with a basic <nav><\/code> or <div> <\/code>element with a class of .navbar <\/code>and .navbar-expand{-sm | -md | -lg | -xl}<\/code>. This allows access to Bootstrap\u2019s color scheme classes and also allows for responsive collapsing. If you are using a <div><\/code> tag, be sure to add role=\u201dnavigation\u201d<\/code> to explicitly identify it as a navigation element for assistive devices. Utility classes (my-0, my-2, etc.) can be used to control spacing.<\/p>\n\n\n\n

Subcomponents<\/h4>\n\n\n\n

There are several built-in subcomponents that are available to use within our navbar. You can pick and choose what\u2019s needed for your project.
<\/p>\n\n\n\n
Subcomponent<\/td>Use<\/td><\/tr>
.navbar-brand<\/td>Company, product, logo, or project name. 
<\/td><\/tr>
.navbar-nav<\/td>Includes support for dropdowns
<\/td><\/tr>
.navbar-toggler<\/td>Used in conjunction with the collapse plugin so that the navbar can be made responsive. <\/td><\/tr>
.form-inline<\/td>Custom form controls or actions<\/td><\/tr>
.navbar-text<\/td>Vertically centered strings of text<\/td><\/tr>
.collapse.navbar-collapse<\/td>Groups and\/or hides navbar contents<\/td><\/tr><\/tbody><\/table>\n\n\n\n

<\/p>\n\n\n\n

Here is an example of the Navbar component with most of the possible subcomponents included. This one will automatically collapse at the lg (large) breakpoint.
<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n <head>\n   <meta charset="utf-8">\n   <meta name="viewport" content="width=device-width">\n   <title>Bootstrap Navbar<\/title>\n   <link rel="stylesheet" href="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">\n   <link href="style.css" rel="stylesheet" type="text\/css" \/>\n <\/head>\n <body>\n   <nav class="navbar navbar-expand-lg navbar-light bg-light">\n <a class="navbar-brand" href="#"><img width="150" src="https:\/\/d30vrbc6r9jj52.cloudfront.net\/web-illustrations\/layout\/ck_logo.png" \/><\/a>\n <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">\n   <span class="navbar-toggler-icon"><\/span>\n <\/button>\n \n <div class="collapse navbar-collapse" id="navbarSupportedContent">\n   <ul class="navbar-nav mr-auto">\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Bootcamps\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item" href="#">Popular Bootcamps<\/a>\n         <a class="dropdown-item" href="#">Bootcamp Prep<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item" href="#">Bootcamp Financing<\/a>\n         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni<\/a>\n \n       <\/div>\n     <\/li>\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Coding\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item" href="#">Coding Tools<\/a>\n         <a class="dropdown-item" href="#">Git<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item" href="#">HTML<\/a>\n         <a class="dropdown-item" href="#">CSS<\/a>\n         <a class="dropdown-item" href="#">JS<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item" href="#">Python<\/a>\n         <a class="dropdown-item" href="#">Ruby<\/a>\n         <a class="dropdown-item" href="#">C++<\/a>\n         <a class="dropdown-item" href="#">Java<\/a>\n       <\/div>\n     <\/li>\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Career Resources\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item smallcaps" href="#">Career Advice<\/a>\n         <a class="dropdown-item smallcaps" href="#">Interviews<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item smallcaps" href="#">Tech Cities<\/a>\n         <a class="dropdown-item smallcaps" href="#">Tech Salaries<\/a>\n       <\/div>\n     <\/li>\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Tech Fields\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item" href="#">Web Design<\/a>\n         <a class="dropdown-item" href="#">Web Development<\/a>\n         <a class="dropdown-item" href="#">Software Engineering<\/a>\n         <a class="dropdown-item" href="#">Data Science<\/a>\n       <\/div>\n     <\/li>\n     <li class="nav-item">\n       <a class="nav-link smallcaps" href="#">News & Commentary<\/a>\n     <\/li>\n   <\/ul>\n   <form class="form-inline my-2 my-lg-0">\n     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">\n     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search<\/button>\n   <\/form>\n <\/div>\n<\/nav>\n<script src="https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js" integrity="sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"><\/script>\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.7\/umd\/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"><\/script>\n<script src="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"><\/script>\n   <script src="script.js"><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
The content between the <div><\/code> tags with the .navbar-toggler class is everything that will be collapsed into the hamburger menu when it hits the lg breakpoint.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
The Bootstrap Documentation is very good when putting together a Navbar component. It\u2019s a matter of picking and choosing what you need for your project and utilizing the code that Bootstrap provides for your project.
<\/p>\n\n\n\n
In this article we went over how to add Bootstrap to your project and created a sample navigation bar that can be used in a project. Use this as a springboard for your own project to create your own custom styled navbar!<\/p>\n","protected":false},"excerpt":{"rendered":"A navbar is a user interface (UI) element that\u2019s positioned at the top of a web page. It contains elements that make the navigational user experience more friendly by placing branding and navigational links that route to different components. In Bootstrap, we can use their documentation to create a navbar quickly that is fully functional…","protected":false},"author":77,"featured_media":22710,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-23315","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":"Coding","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":[]},"yoast_head":"\nBootstrap Navbar | Career Karma<\/title>\n<meta name=\"description\" content=\"Learn how to use Bootstrap's Navbar component to create navigation bars quickly and easily on 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-navbar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using the Bootstrap Framework to Create a Navbar\" \/>\n<meta property=\"og:description\" content=\"Learn how to use Bootstrap's Navbar component to create navigation bars quickly and easily on Career Karma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/\" \/>\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-09-29T00:09:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-29T01:04:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/jess-bailey-q10VITrVYUM-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\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=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"Using the Bootstrap Framework to Create a Navbar\",\"datePublished\":\"2020-09-29T00:09:47+00:00\",\"dateModified\":\"2020-09-29T01:04:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/\"},\"wordCount\":547,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/jess-bailey-q10VITrVYUM-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/\",\"name\":\"Bootstrap Navbar | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/jess-bailey-q10VITrVYUM-unsplash.jpg\",\"datePublished\":\"2020-09-29T00:09:47+00:00\",\"dateModified\":\"2020-09-29T01:04:13+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Learn how to use Bootstrap's Navbar component to create navigation bars quickly and easily on Career Karma.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/jess-bailey-q10VITrVYUM-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/jess-bailey-q10VITrVYUM-unsplash.jpg\",\"width\":1000,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-navbar\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Coding\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Using the Bootstrap Framework to Create a Navbar\"}]},{\"@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\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap Navbar | Career Karma","description":"Learn how to use Bootstrap's Navbar component to create navigation bars quickly and easily on 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-navbar\/","og_locale":"en_US","og_type":"article","og_title":"Using the Bootstrap Framework to Create a Navbar","og_description":"Learn how to use Bootstrap's Navbar component to create navigation bars quickly and easily on Career Karma.","og_url":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-09-29T00:09:47+00:00","article_modified_time":"2020-09-29T01:04:13+00:00","og_image":[{"width":1000,"height":750,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/jess-bailey-q10VITrVYUM-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"Using the Bootstrap Framework to Create a Navbar","datePublished":"2020-09-29T00:09:47+00:00","dateModified":"2020-09-29T01:04:13+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/"},"wordCount":547,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/jess-bailey-q10VITrVYUM-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/","url":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/","name":"Bootstrap Navbar | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/jess-bailey-q10VITrVYUM-unsplash.jpg","datePublished":"2020-09-29T00:09:47+00:00","dateModified":"2020-09-29T01:04:13+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Learn how to use Bootstrap's Navbar component to create navigation bars quickly and easily on Career Karma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/jess-bailey-q10VITrVYUM-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/jess-bailey-q10VITrVYUM-unsplash.jpg","width":1000,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-navbar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Coding","item":"https:\/\/careerkarma.com\/blog\/code\/"},{"@type":"ListItem","position":3,"name":"Using the Bootstrap Framework to Create a Navbar"}]},{"@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\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/23315","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\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=23315"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/23315\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/22710"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=23315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=23315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=23315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}