Bootstrap\u2019s Quick Start<\/a> page for assistance with getting all your dependencies.
<\/p>\n\n\n\nIt\u2019s up to you how to link the packages we need, but the easiest, most beginner-friendly way is to use the content delivery network \u2014 the CDN \u2014 for jQuery, Popper.js, and Bootstrap. Be careful of the order of your <script> tags \u2014 order matters here.
<\/p>\n\n\n\n
You\u2019re ready to get started! <\/p>\n\n\n\n
Using Bootstrap Documentation To Create Tabs<\/h2>\n\n\n\n
On the left hand side of the \u201cIntroduction\/Getting Started\u201d page, you see a sidebar that links to various things. Take a look for the \u201cComponents\u201d <\/em>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\u2019s been updated to show the different links to all the different components we have available to us.
<\/p>\n\n\n\nClick on the \u201cNavs\u201d components. This will have the tabs information that we need to get started.<\/p>\n\n\n\n
Start with the Base Nav<\/h3>\n\n\n\n
To use Bootstrap\u2019s given code in their documentation, start with the base nav at the top of the page. This demonstrates that the nav class doesn\u2019t specifically handle any special styling.
<\/p>\n\n\n\n
<ul class="nav">\n <li class="nav-item">\n <a class="nav-link active" href="#">Active<\/a>\n <\/li>\n <li class="nav-item">\n <a class="nav-link" href="#">Link<\/a>\n <\/li>\n <li class="nav-item">\n <a class="nav-link" href="#">Link<\/a>\n <\/li>\n <li class="nav-item">\n <a class="nav-link disabled" href="#">Disabled<\/a>\n <\/li>\n<\/ul><\/pre><\/div>\n\n\n\nTo create the tabs, add the nav-tabs class to the first line of code in the class attribute. <\/p>\n\n\n\n
<ul class="nav nav-tabs">\n <li class="nav-item">\n <a class="nav-link active" href="#">Active<\/a>\n <\/li>\n <li class="nav-item">\n <a class="nav-link" href="#">Link<\/a>\n <\/li>\n <li class="nav-item">\n <a class="nav-link" href="#">Link<\/a>\n <\/li>\n <li class="nav-item">\n <a class="nav-link disabled" href="#">Disabled<\/a>\n <\/li>\n<\/ul>\n<div> ***** tab content will go here as <div>s ***** <\/div><\/pre><\/div>\n\n\n\nFrom a UI standpoint, we now have tabs. But we don\u2019t yet have the functionality. Let\u2019s take a look at how to do that next. <\/p>\n\n\n\n
Add Roles to the Markdown<\/h3>\n\n\n\n
To keep up with the ARIA standard (accessibility rules), add a role attribute to each of the tags:
<\/p>\n\n\n\n
- For <ul>, add role=\u201dtablist\u201d<\/li>
- For <a>, add role=\u201dtab\u201d<\/li>
- For <div> that wraps around the contents of each tab, add role=\u201dtabpanel\u201d<\/li><\/ul>\n\n\n\n
Add Attributes to Point to Tab-Content<\/h3>\n\n\n\n
At this point, we know at a high level, we have a block of code dedicated to the links, and we have another block of code dedicated to the content. We need to do a couple of things to get the tab connected with its content. Let\u2019s start with the <ul> block of code.
<\/p>\n\n\n\n
- First, add ids to all of your <a> elements. Use \u201ctab-name + -tab\u201d (for example, a tab whose name is home \u2013 their id would be \u201chome-tab\u201d).
- For the <div> block of code that houses the tab-contents (those to be used as tabpanels), use the name of the tab they are associated with as the id (i.e. content associated with the home tab should have an id of \u201chome\u201d). <\/li><\/ol><\/li>
- Next, add an href to the tab that links to the id of the tab-content it is associated with. To keep using our \u201chome\u201d tab analogy, the <a> tag should have an href of \u201c#home\u201d. <\/li>
- Add a data-toggle attribute that indicates what is to be toggled. In this instance it is \u201ctab\u201d. <\/li>
- Finally, add any aria attributes that will help those with assistive technologies. <\/li><\/ol>\n\n\n\n
Our <ul> element with our links should look like this so far:
<\/p>\n\n\n\n
<ul class="nav nav-tabs" role="tablist">\n <li class="nav-item">\n <a id="a-tab" class="nav-link active" role="tab" data-toggle="tab" href="#a">A<\/a>\n <\/li>\n <li class="nav-item">\n <a id="b-tab" class="nav-link" role="tab" data-toggle="tab" href="#b">B<\/a>\n <\/li>\n <li class="nav-item">\n <a id="c-tab" class="nav-link" role="tab" data-toggle="tab" href="#c">C<\/a>\n <\/li>\n <li class="nav-item">\n <a id="d-tab" class="nav-link" role="tab" data-toggle="tab" href="#d">D<\/a>\n <\/li>\n <\/ul><\/pre><\/div>\n\n\n\nThe tab-content element is next. This is a separate block of code from the <ul> block that contains all of our links.
<\/p>\n\n\n\n
- Make sure your tab contents divs are enclosed in an outer div that acts as a container for each of the smaller divs. Also, ensure each of the smaller divs is named for the appropriate tab heading from the previous block. <\/li><\/ol>\n\n\n\n
- Ensure that the proper ARIA attributes are added. Here, we use aria-selected and aria-labelledby. Aria-labelledby matches the id of the matching tab heading. Aria-controls match the id of that particular div element. <\/li><\/ol>\n\n\n\n
- Finally, add a class attribute that at least contains the \u201cshow\u201d class name. This is a bootstrap class that assists with showing the proper pane when you click on a particular tab. The \u201cactive\u201d part of the class name indicates which pane is showing. \u201cFade\u201d indicates that an animation is being used to fade the pane in and out when a tab has been clicked.<\/li><\/ol>\n\n\n\n
The code for one of the tab-contents divs is as follows:
<\/p>\n\n\n\n
<div class="tab-content" style="padding: 20px;">\n <div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A<\/div>\n<\/div><\/pre><\/div>\n\n\n\nUse this as a guide to create the rest of the tab-content divs. Refer to the code below to help you if you get stuck.
<\/p>\n\n\n\n
Here is the entire codebase in full:
<\/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>repl.it<\/title>\n <!-- Bootstrap stylesheet -->\n <link rel="stylesheet" href="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">\n <\/head>\n <body>\n <!-- tab headings -->\n <ul class="nav nav-tabs" role="tablist">\n <li class="nav-item">\n <a id="a-tab" class="nav-link active" data-toggle="tab" role="tab" href="#a">A<\/a>\n <\/li>\n <li class="nav-item">\n <a id="b-tab" class="nav-link" data-toggle="tab" role="tab" href="#b">B<\/a>\n <\/li>\n <li class="nav-item">\n <a id="c-tab" class="nav-link" data-toggle="tab" role="tab" href="#c">C<\/a>\n <\/li>\n <li class="nav-item">\n <a id="d-tab" class="nav-link" data-toggle="tab" role="tab" href="#d">D<\/a>\n <\/li>\n <\/ul>\n <!-- tab contents -->\n <div class="tab-content" style="padding: 20px;">\n <div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A<\/div>\n <div id="b" aria-labelledby="b-tab" class="tab-pane fade" role="tabpanel" aria-controls="b" aria-selected="false">B<\/div>\n <div id="c" aria-labelledby="c-tab" class="tab-pane fade" role="tabpanel" aria-controls="c" aria-selected="false">C<\/div>\n <div id="d" aria-labelledby="d-tab" class="tab-pane fade" role="tabpanel" aria-controls="d" aria-selected="false">D<\/div>\n <\/div>\n <!-- jquery cdn -->\n <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js"><\/script> \n <!-- popper js cdn -->\n <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/2.4.4\/umd\/popper.min.js"><\/script>\n <!-- bootstrap cdn -->\n <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.2\/js\/bootstrap.min.js"><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\nConclusion<\/h2>\n\n\n\n
You\u2019ve just created a tab navigational component using Bootstrap! Try your hand at creating pill navigational containers next. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"Tabs are a user interface (UI) element that allow us to see different panes of information without using up extra space. Just like tabs in a binder or book, they mark a placement on the page for more information and are identified by what the pane of information contains. When you click on a tab,…","protected":false},"author":77,"featured_media":18894,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-21352","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":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\n
Use the Bootstrap Framework to Create Tabs | Career Karma<\/title>\n<meta name=\"description\" content=\"Bootstrap's Tabs component can update the look of your UI so that it is more minimalistic or professional. Learn how to incorporate this into your site on CareerKarma.\" \/>\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-tabs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use the Bootstrap Framework to Create Tabs\" \/>\n<meta property=\"og:description\" content=\"Bootstrap's Tabs component can update the look of your UI so that it is more minimalistic or professional. Learn how to incorporate this into your site on CareerKarma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-18T06:27:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-04T10:56:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/russ-ward-bqzLehtF8XE-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"665\" \/>\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=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"Use the Bootstrap Framework to Create Tabs\",\"datePublished\":\"2020-08-18T06:27:51+00:00\",\"dateModified\":\"2021-01-04T10:56:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/\"},\"wordCount\":907,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/russ-ward-bqzLehtF8XE-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/\",\"name\":\"Use the Bootstrap Framework to Create Tabs | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/russ-ward-bqzLehtF8XE-unsplash.jpg\",\"datePublished\":\"2020-08-18T06:27:51+00:00\",\"dateModified\":\"2021-01-04T10:56:33+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Bootstrap's Tabs component can update the look of your UI so that it is more minimalistic or professional. Learn how to incorporate this into your site on CareerKarma.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/russ-ward-bqzLehtF8XE-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/russ-ward-bqzLehtF8XE-unsplash.jpg\",\"width\":1000,\"height\":665,\"caption\":\"White book with yellow, red, and blue tabs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-tabs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Use the Bootstrap Framework to Create Tabs\"}]},{\"@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":"Use the Bootstrap Framework to Create Tabs | Career Karma","description":"Bootstrap's Tabs component can update the look of your UI so that it is more minimalistic or professional. Learn how to incorporate this into your site on CareerKarma.","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-tabs\/","og_locale":"en_US","og_type":"article","og_title":"Use the Bootstrap Framework to Create Tabs","og_description":"Bootstrap's Tabs component can update the look of your UI so that it is more minimalistic or professional. Learn how to incorporate this into your site on CareerKarma.","og_url":"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-08-18T06:27:51+00:00","article_modified_time":"2021-01-04T10:56:33+00:00","og_image":[{"width":1000,"height":665,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/russ-ward-bqzLehtF8XE-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":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"Use the Bootstrap Framework to Create Tabs","datePublished":"2020-08-18T06:27:51+00:00","dateModified":"2021-01-04T10:56:33+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/"},"wordCount":907,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/russ-ward-bqzLehtF8XE-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/","url":"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/","name":"Use the Bootstrap Framework to Create Tabs | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/russ-ward-bqzLehtF8XE-unsplash.jpg","datePublished":"2020-08-18T06:27:51+00:00","dateModified":"2021-01-04T10:56:33+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Bootstrap's Tabs component can update the look of your UI so that it is more minimalistic or professional. Learn how to incorporate this into your site on CareerKarma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/russ-ward-bqzLehtF8XE-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/russ-ward-bqzLehtF8XE-unsplash.jpg","width":1000,"height":665,"caption":"White book with yellow, red, and blue tabs"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-tabs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"Use the Bootstrap Framework to Create Tabs"}]},{"@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\/21352","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=21352"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18894"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=21352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=21352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=21352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}