This question already has answers here:
Nested tabs in bootstrap
(3 answers)
Closed 3 years ago.
The goal is to make pills in pills like that with bootstrap 4 pills or navs. So it has tree structure like each category has subcategories and them dynamic.
You can see structure here
And should looks like
Here's what I've tried so far:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-cvar-summary-tab" data-toggle="pill" href="#pills-cvar-summary" role="tab" aria-controls="pills-cvar-summary" aria-selected="true">Climate VaR Summary</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-cvar-sector-analysis-tab" data-toggle="pill" href="#pills-cvar-sector-analysis" role="tab" aria-controls="#pills-cvar-sector-analysis" aria-selected="false">Sector Analysis</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-cvar-country-analysis-tab" data-toggle="pill" href="#pills-cvar-country-analysis" role="tab" aria-controls="#pills-cvar-country-analysis" aria-selected="false">Country Analysis</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-cvar-summary" role="tabpanel" aria-labelledby="pills-cvar-summary-tab">
<ul class="nav nav-pills mb-3" id="pills-tab-1" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-cvar-summary-primary-tab" data-toggle="pill" href="#pills-cvar-summary-primary" role="tab" aria-controls="pills-cvar-summary-primary" aria-selected="true">Primary Info & Allocation</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="pills-cvar-summary-portfolio-analysis-tab" data-toggle="pill" href="#pills-cvar-summary-portfolio-analysis" role="tab" aria-controls="#pills-cvar-summary-portfolio-analysis" aria-selected="false">Portfolio Analysis</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="pills-cvar-summary-spread-tab" data-toggle="pill" href="#pills-cvar-summary-spread" role="tab" aria-controls="#pills-cvar-summary-spread" aria-selected="false">spread</a>
</li>
</ul>
<div class="tab-content" id="pills-tab-1Content">
<div class="tab-pane fade" id="pills-cvar-summary-primary" role="tabpanel" aria-labelledby="pills-cvar-summary-primary-tab">
11111111
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-cvar-summary-portfolio-analysis" role="tabpanel" aria-labelledby="pills-cvar-summary-portfolio-analysis-tab">
2
</div>
<div class="tab-pane fade" id="pills-cvar-summary-spread" role="tabpanel" aria-labelledby="pills-cvar-summary-spread-tab">
3
</div>
</div>
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Climate VaR Summary</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Sector Analysis</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Country Analysis</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" type="button" class="btn btn-primary">test 1</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" class="btn btn-primary">test 1</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" class="btn btn-primary">test 1</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" type="button" class="btn btn-primary">test 2</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" class="btn btn-primary">test 2</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" class="btn btn-primary">test 2</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" type="button" class="btn btn-primary">test 3</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" class="btn btn-primary">test 3</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" class="btn btn-primary">test 3</a>
</li>
</ul>
</div>
</div>
I ended up with #Irin upgraded solution
1) use navs not button
2) Added content for the first section
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Climate VaR Summary</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Sector Analysis</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Country Analysis</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<ul class="nav nav-pills mb-3" id="pills-tab-1" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab-1" data-toggle="pill" href="#pills-home-1" role="tab" aria-controls="pills-home-1" aria-selected="true">test 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-home-tab-2" data-toggle="pill" href="#pills-home-2" role="tab" aria-controls="pills-home-2" aria-selected="false">test 2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-home-tab-3" data-toggle="pill" href="#pills-home-3" role="tab" aria-controls="pills-home-3" aria-selected="false">test 3</a>
</li>
</ul>
<div class="tab-content" id="pills-tab-1Content">
<div class="tab-pane fade show active" id="pills-home-1" role="tabpanel" aria-labelledby="pills-home-1">
tabby 1
</div>
<div class="tab-pane fade show" id="pills-home-2" role="tabpanel" aria-labelledby="pills-home-2">
tabby 2
</div>
<div class="tab-pane fade show" id="pills-home-3" role="tabpanel" aria-labelledby="pills-home-3">
tabby 3
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" type="button" class="btn btn-primary">test 2</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" class="btn btn-primary">test 2</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" class="btn btn-primary">test 2</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" type="button" class="btn btn-primary">test 3</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" class="btn btn-primary">test 3</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" class="btn btn-primary">test 3</a>
</li>
</ul>
</div>
</div>
Related
I am using bootstrap for creating a tab list like below one:
The problem is that when I click on "Profile" or Contact, it changes nothing. I included the bootstrap library. I mean it doesn't remove the 'active', 'show' classes. Does someone know why?
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
Somewhat unsure which approach you're after. This can work out of the box with Bootstrap 5 but you also tag this with Bootstrap 4.
For version 5 they changed:
data-toggle
to
data-bs-toggle
Here is the approach with no additions and uses Bootstrap 5. Note your code example brings in jQuery and that isn't needed.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" aria-controls="home" aria-selected="true" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu2">Contact</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-controls="home">
Home
</div>
<div class="tab-pane fade" id="menu1" role="tabpanel" aria-controls="profile">
Profile
</div>
<div class="tab-pane fade" id="menu2" role="tabpanel" aria-controls="contact">
Contact
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
Used below script and worked smoothly
$('#myTab a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
i can't navigate into tabs pages only it show in URL (myweb/pages#tab1 .. myweb/pages/#tab2 ..)
please help me
enter image description here
<div class="card-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link " id="home-tab" data-toggle="tab" href="#page1" role="tab" aria-controls="page1"
aria-selected="true">page one</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#page2" role="tab" aria-controls="page2"
aria-selected="false">page two</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#page3" role="tab" aria-controls="page3"
aria-selected="false">page three</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel">
page one
</div>
<div class="tab-pane fade" id="page2" role="tabpanel" >
page two
</div>
<div class="tab-pane fade" id="page3" role="tabpanel">
page three
</div>
</div>
</div>
</div>
Try this :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Bootstrap from that link work perfect for my and i try this on your problem and i can navigate
I am using below code for BootStrap 4 tab.
<ul class="nav nav-tabs font-weight-bold">
<li class="nav-item">
<a class="nav-link active" href="#details" data-toggle="tab">Page Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content" data-toggle="tab">Page Content</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="details">Page Details</div>
<div role="tabpanel" class="tab-pane fade" id="content">Page Content</div>
</div>
How can I make it responsive so that I can see this tabs even in 100px height and 100px width ?
use this
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
latest bootstrap 4.+ update of navs, works on every screensize
Will shrink to horizontal view if u go below 300px
link for latest bootstrap version
https://getbootstrap.com/
I'm having trouble with Bootstrap 4 in IE10; I made a navbar with a phone number/linked-in link on the right using justify-content-end which works perfectly until I checked it in IE10, the website is required to work on IE10 specifically so it is a problem. The code is as follows:
<nav class="navbar navbar-expand-md navbar justify-content-center bigText blueBG">
<!-- Dropdown toggler for small devices -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="fas fa-bars text-white"></span>
</button>
<!-- Links -->
<div class="navbar-collapse collapse w-100 justify-content-center ml-5" id="navbar">
<a class="nav-item nav-link text-white link" href="home">Home</a>
<a class="nav-item nav-link text-white link" href="#">#</a>
<a class="nav-item nav-link text-white link" href="tool">Tool</a>
<a class="nav-item nav-link text-white link" href="contact">Contact</a>
<a class="nav-item nav-link text-white link" id="finalLink" href="documentatie">Documentatie</a>
</div>
<div class="navbar-collapse collapse justify-content-end">
<a href="tel:+0123456789">
<i class="fas fa-phone text-white"></i>
</a>
<a href="https://www.linkedin.com/">
<i class="fab fa-linkedin text-white ml-2"></i>
</a>
</div>
The problem is that the navbar just cuts off near the right end of the page, after that it's just the white background and a blue square.
Fixed it! I omitted the w-100 class and changed the justify-content-center to justify-content-end:
<nav class="navbar navbar-expand-md navbar bigText blueBG">
<!-- Dropdown toggler for small devices -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="fas fa-bars text-white"></span>
</button>
<!-- Links -->
<div class="navbar-collapse collapse justify-content-end ml-5" id="navbar">
<a class="nav-item nav-link text-white link" href="home">Home</a>
<a class="nav-item nav-link text-white link" href="#">#</a>
<a class="nav-item nav-link text-white link" href="tool">Tool</a>
<a class="nav-item nav-link text-white link" href="contact">Contact</a>
<a class="nav-item nav-link text-white link" id="finalLink" href="documentatie">Documentatie</a>
</div>
<div class="navbar-collapse collapse justify-content-end">
<a href="tel:+0123456789">
<i class="fas fa-phone text-white"></i>
</a>
<a href="https://www.linkedin.com">
<i class="fab fa-linkedin text-white ml-2"></i>
</a>
</div>
Bootstrap 4 only partially supports IE 10/11. Your problem here could be the "justify-content" classes which, according to this Can I Use... isn't supported properly. Try removing them and see if that works for your overflow problem. If not, please inform us of what changed.
I hope this will helpful for you,
/*!
* IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014-2017 The Bootstrap Authors
* Copyright 2014-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// See the Getting Started docs for more information:
// https://getbootstrap.com/getting-started/#support-ie10-width
(function () {
'use strict'
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'#-ms-viewport{width:auto!important}'
)
)
document.head.appendChild(msViewportStyle)
}
}())
body {
padding-top: 2rem;
}
.container {
padding-bottom: 1.5rem;
}
.bd-example {
padding: 1.5rem;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
border-width: .2rem;
margin: 1rem -15px;
border: solid #f7f7f9;
}
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Horizontal: Base Nav</h2>
<div class="bd-example">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Horizontal: Justify Content Center</h2>
<div class="bd-example">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Horizontal: Justify Content End</h2>
<div class="bd-example">
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Vertical: Flex Column</h2>
<div class="bd-example">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Base Nav: Tabs</h2>
<div class="bd-example">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Base Nav: Pills</h2>
<div class="bd-example">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Base Nav: Fill and justify</h2>
<div class="bd-example">
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Just remove "mr-auto" or "m-auto" from the div just above .
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent" >
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Below is my code. For some reason when I load the page the navbar shows the contents of "Home". When I click on the Menu tab every works properly. But for some reason when I click on the Scheme tab I only get the Home tab contents
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="menu-tab" data-toggle="tab" href="#menu" role="tab" aria-controls="menu" aria-selected="false">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" id="scheme-tab" data-toggle="tab" href="#scheme" role="tab" aria-controls="scheme" aria-selected="false">Scheme</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">home tab</div>
<div class="tab-pane fade" id="menu" role="tabpanel" aria-labelledby="menu-tab">
<div class="input-group mb-3">
<ul>
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" id="addItem" type="button">Add Item to Menu</button>
</div>
<input type="text" class="form-control" id="addItemInput" placeholder="Enter New Item Here" aria-label="" aria-describedby="basic-addon1">
<ul id="dynamic-list"></ul>
</ul>
</div>
</div>
<div class="tab-pane fade" id="scheme" role="tabpanel" aria-labelledby="scheme-tab">What?</div>
</div>
</div>
I feel like it must be something really simple, thanks in advance.
Your code looks fine to me, and should work. I suspect there is an issue with how you are loading your jQuery and Bootstrap JS and CSS files. Check the console to see if there are any errors.
Here is a working sample of your code - where I am simply using the latest jQuery & Bootstrap CDN files:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="menu-tab" data-toggle="tab" href="#menu" role="tab" aria-controls="menu" aria-selected="false">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" id="scheme-tab" data-toggle="tab" href="#scheme" role="tab" aria-controls="scheme" aria-selected="false">Scheme</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">home tab</div>
<div class="tab-pane fade" id="menu" role="tabpanel" aria-labelledby="menu-tab">
<div class="input-group mb-3">
<ul>
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" id="addItem" type="button">Add Item to Menu</button>
</div>
<input type="text" class="form-control" id="addItemInput" placeholder="Enter New Item Here" aria-label="" aria-describedby="basic-addon1">
<ul id="dynamic-list"></ul>
</ul>
</div>
</div>
<div class="tab-pane fade" id="scheme" role="tabpanel" aria-labelledby="scheme-tab">What?</div>
</div>
</div>