bootstrap4 content/div align - html

Please look at a codepen for this:
codepen
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container position-relative">
<div class="pillwrapper">
<div class="rightpart d-flex justify-content-end">
<ul class="nav nav-pills" id="mypill">
<li class="nav-item">button</li>
<li class="nav-item">button</li>
<li class="nav-item">button</li>
</ul>
<div class="tab-content" id="mypillcontent">
<div class="tab-pane fade show active" id="content-1">
<p>content here</p>
<img src="https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg" alt="" class="content-photo position-absolute" />
</div>
<div class="tab-pane fade" id="content-2">
<p>content here</p>
<img src="https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg" alt="" class="content-photo position-absolute" />
</div>
<div class="tab-pane fade" id="content-3">
<p>content here</p>
<img src="https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg" alt="" class="content-photo position-absolute" />
</div>
</div>
</div>
</div>
</div>
I'm learning bootstrap4. I'm trying to realize a structure here with bootstrap NAV PILL: a tab system(but looks like buttons), you can switch tabs, under a tab there is a text content and a photo, only this photo will be shown in the left, looks like tabs system is right part, photo is left part. Problem is: 1, the first tab is active, when I click any other one, nothing happens. 2, why position-absolute does not work, photo still at right? 3, how to put text content under tabs, and horizontally align center the tab and content?
.rightpart{
border:2px solid red;
min-height:100vh;
}
.pillwrapper{
border:1px solid green;
min-height:100vh;
}
.container{
border:1px solid yellow;
min-height:100vh;
}
.content-photo{
width:200px;
left:0;
top:0;
}
Could anybody please help?

For Bootstrap 4, the 'tabs' are not actually tabbable until you include the JavaScript plugin to make the tabs work. The documentation for Bootstrap states this:
https://getbootstrap.com/docs/4.3/components/navs/#tabs
To see the tabs work, see this link from the Bootstrap documentation:
https://getbootstrap.com/docs/4.3/components/navs/#javascript-behavior
The above links show the tabs working with content associated with each tab. To have content 'under' each tab, you need to have tab-panes for the content for each tab. See this example from the Bootstrap documentation.
<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>
To center the tab navigation and content under each tab, you could use CSS like below for the tab navigation (from the above example HTML).
.nav {
display: block;
margin: 0 auto;
}
With this information, your HTML should look more like this:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<ul class="nav">
<li class="nav-item">
Button 1
</li>
<li class="nav-item">
Button 2
</li>
<li class="nav-item">
Button 3
</li>
</ul>
<div class="tab-content" id="mypillcontent">
<div class="tab-pane fade" id="content-1">
<p>Content Here</p>
<img src="https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg" alt="" class="content-photo position-absolute" />
</div>
<div class="tab-pane fade" id="content-2">
</div>
<div class="tab-pane fade" id="content-3">
</div>
</div>
</div>
</div>
<!--
Add Bootstrap JavaScript
-->
<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>

Related

Single tab multiple content bootstrap 5

I am working on bootstrap tabs, I am trying for the single tab with multiple content div's. I have tried by using two data-target values like data-target=".etab-p1, .etabi-img1".but it only works on bootstrap 4,Its not work on bootstrap 5,how is it work on bootstrap 5?
<body>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link active show" href="#tab-1" data-bs-target=".etab-p1, .etabi-img1" data-toggle="tab">C1</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-2" data-bs-target=".etab-p2, .etabi-img2" data-toggle="tab">C2</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-3" data-bs-target=".etab-p3, .etabi-img3" data-toggle="tab">C3</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-4" data-bs-target=".etab-p4, .etabi-img4" data-toggle="tab">C4</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-5" data-bs-target=".etab-p5, .etabi-img5" data-toggle="tab">C5</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-6" data-bs-target=".etab-p6, .etabi-img6" data-toggle="tab">C6</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active etab-p1">
<p>Content 1.</p>
</div>
<div class="tab-pane fade etab-p2">
<p>Content 2.</p>
</div>
<div class="tab-pane fade etab-p3">
<p>Content 3.</p>
</div>
<div class="tab-pane fade etab-p4">
<p>Content 4.</p>
</div>
<div class="tab-pane fade etab-p5">
<p>Content 5.</p>
</div>
<div class="tab-pane fade etab-p6">
<p>Content 6.</p>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade show active etabi-img1">
<p>Content 111.</p>
</div>
<div class="tab-pane fade etabi-img2">
<p>Content 2222.</p>
</div>
<div class="tab-pane fade etabi-img3">
<p>Content 3333.</p>
</div>
<div class="tab-pane fade etabi-img4">
<p>Content 4444.</p>
</div>
<div class="tab-pane fade etabi-img5">
<p>Content 5555.</p>
</div>
<div class="tab-pane fade etabi-img6">
<p>Content 6666.</p>
</div>
</div>
<sctipt>
$('#myTab a[data-bs-toggle="tab"]').on('show.bs.tab', function(e) {
let target = $(e.target).data('bs-target');
$(target)
.addClass('active show')
.siblings('.tab-pane.active')
.removeClass('active show')
});
</script>
</body>
Did you read the part of the Bootstrap 5 docs that says "Dropped jQuery dependency and rewrote plugins to be in regular JavaScript"?
Therefore you need to include jQuery, and fix the markup to use data-bs-toggle.
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link active show" href="#tab-1" data-bs-target=".etab-p1, .etabi-img1" data-bs-toggle="tab">C1</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-2" data-bs-target=".etab-p2, .etabi-img2" data-bs-toggle="tab">C2</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-3" data-bs-target=".etab-p3, .etabi-img3" data-bs-toggle="tab">C3</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-4" data-bs-target=".etab-p4, .etabi-img4" data-bs-toggle="tab">C4</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-5" data-bs-target=".etab-p5, .etabi-img5" data-bs-toggle="tab">C5</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-6" data-bs-target=".etab-p6, .etabi-img6" data-bs-toggle="tab">C6</a></li>
</ul>
https://codeply.com/p/E0uoClzJZo

How to stretch bootstrap5 text area in tabs

I would like to place a text area within the tab and stretch it horizontally and vertically within the card body.
However, using d-flex and align-self-stretch does not seem to work on the tab content div.
Here is what I have tried. I used bootstrap5 to place tabs with text areas inside cards.
I added a d-flex flex-column class to the card-body.
I added d-flex align-self-stretch to the tab content <div class="tab-content">
I have set display: flex from css, since there seems to be no flex in the div attribute.
However, the tab content does not fill the extra space in the card.
Is there any solution to this problem?
Thank you.
Here is a simple code that reproduces the problem.
https://codepen.io/sankai0044/pen/abEXaoJ
Here is the code.
.card{
width: 400px;
height: 300px;
}
.tab-content{
display: flex;
}
.tab-pane{
width: 100%;
height: 100%;
}
.form-group{
width: 100%;
height: 100%;
}
#MyTextarea{
resize: none;
}
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="home-tab"
data-bs-toggle="tab"
data-bs-target="#home"
type="button"
role="tab"
aria-controls="home"
aria-selected="true"
>
Home
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#profile"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="contact-tab"
data-bs-toggle="tab"
data-bs-target="#contact"
type="button"
role="tab"
aria-controls="contact"
aria-selected="false"
>
Contact
</button>
</li>
</ul>
<div class="tab-content d-flex align-self-stretch" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<div class="form-group">
<textarea class="form-control" id="MyTextarea" disabled>This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.</textarea>
</div>
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
Profile Content
</div>
<div
class="tab-pane fade"
id="contact"
role="tabpanel"
aria-labelledby="contact-tab"
>
Contact Content
</div>
</div>
</div>
<div class="card-footer">
Footer
</div>
</div>
</body>
You don't need the .align-self-stretch class. You are running into problems with the original Bootstrap CSS for .card. To fix that you have to add the BS class .flex-grow-1 to your tab-content div.
Moreover, you have to make sure that your #myTextarea is set to height: 100%.
I hope this creates the effect you were looking for.
.card{
width: 400px;
height: 300px;
}
.tab-content{
display: flex;
}
.tab-pane{
width: 100%;
height: 100%;
}
.form-group{
width: 100%;
height: 100%;
}
#MyTextarea{
resize: none;
height: 100%;
}
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="home-tab"
data-bs-toggle="tab"
data-bs-target="#home"
type="button"
role="tab"
aria-controls="home"
aria-selected="true"
>
Home
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#profile"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="contact-tab"
data-bs-toggle="tab"
data-bs-target="#contact"
type="button"
role="tab"
aria-controls="contact"
aria-selected="false"
>
Contact
</button>
</li>
</ul>
<div class="tab-content d-flex flex-grow-1" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<div class="form-group">
<textarea class="form-control" id="MyTextarea" disabled>This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.</textarea>
</div>
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
Profile Content
</div>
<div
class="tab-pane fade"
id="contact"
role="tabpanel"
aria-labelledby="contact-tab"
>
Contact Content
</div>
</div>
</div>
<div class="card-footer">
Footer
</div>
</div>
</body>
Add flex-basis: 100%; to your #myTabContent. Next, just simply add h-100 or (height: 100%;) as a class on your textarea element.
.card{
width: 400px;
height: 300px;
}
.tab-content{
display: flex;
}
.tab-pane{
width: 100%;
height: 100%;
}
.form-group{
width: 100%;
height: 100%;
}
#myTabContent {
flex-basis: 100%;
}
#MyTextarea{
resize: none;
}
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="home-tab"
data-bs-toggle="tab"
data-bs-target="#home"
type="button"
role="tab"
aria-controls="home"
aria-selected="true"
>
Home
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#profile"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="contact-tab"
data-bs-toggle="tab"
data-bs-target="#contact"
type="button"
role="tab"
aria-controls="contact"
aria-selected="false"
>
Contact
</button>
</li>
</ul>
<div class="tab-content d-flex align-self-stretch" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<div class="form-group">
<textarea class="form-control h-100" id="MyTextarea" disabled>This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.</textarea>
</div>
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
Profile Content
</div>
<div
class="tab-pane fade"
id="contact"
role="tabpanel"
aria-labelledby="contact-tab"
>
Contact Content
</div>
</div>
</div>
<div class="card-footer">
Footer
</div>
</div>
</body>

Bootstrap 4.3 Tab not switching from the first tab

I've incorporated bootstrap tabs into my web app following the documentation on the bootstrap website.
I've so far managed to get the first tab fade animation to play and show the the other two tabs don't seem to work and I'm quite stumped as to why.
<div id="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs" role="tablist">
<li id="dashboardTab" class="nav-item">
<a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a>
</li>
<li id="usersTab" class="nav-item">
<a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(0)">X</span></a>
</li>
<li id="wholesalerTab" class="nav-item">
<a class="nav-link" id="wholesalerCreate-tab" data-toggle="tab" href="#wholesalerCreate" role="tab" aria-controls="wholesalerCreate" aria-selected="false">Wholesalers<span onclick="onCloseTabButtonClick(1)">X</span></a>
</li>
</ul>
<div class="tab-content">
<div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="dashboard-tab">
<h3>Dash Tab</h3>
<iframe class="iframe-size" id="dashboardHolder" src="Dashboard.aspx" />
</div>
<div class="tab-pane fade" id="userCreate" role="tabpanel" aria-labelledby="userCreate-tab">
<h3>User Tab</h3>
<iframe class="iframe-size" src="UserCreate.aspx" />
</div>
<div id="wholesalerCreate" class="tab-pane fade" role="tabpanel" aria-labelledby="wholesalerCreate-tab">
<h3>Wholesaler Tab</h3>
<iframe class="iframe-size" src="WholsalerCreate.aspx" />
</div>
</div>
</div>
</div>
</div>
Alot of similar questions I've read show that the error is simply not importing the Jquery and the bootstrap js files.
<script src="../Scripts/jquery-3.4.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
I have got this in my header and do believe it's working.
Tabs do not work well with Iframes. So remove them. It is also a better user experience.
<div class="tab-content">
<div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="dashboard-tab">
<h3>Dash Tab</h3>
<div class="iframe-size">
...
</div>
</div>
<div class="tab-pane fade" id="userCreate" role="tabpanel" aria-labelledby="userCreate-tab">
<h3>User Tab</h3>
<div class="iframe-size">
...
</div>
</div>
<div id="wholesalerCreate" class="tab-pane fade" role="tabpanel" aria-labelledby="wholesalerCreate-tab">
<h3>Wholesaler Tab</h3>
<div class="iframe-size">
...
</div>
</div>
</div>

Nested tabs in a pill tab panel not working in Bootstrap

I'm having trouble getting tabs inside of a vertical pill tab panel to work correctly in Bootstrap 4.
Here's a minimal code example:
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="popper.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<div class="row">
<div class="col-2">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
<a class="nav-link active" data-toggle="pill" href="#v-pills-1" role="tab">Pill 1</a>
<a class="nav-link" data-toggle="pill" href="#v-pills-2" role="tab">Pill 2</a>
<a class="nav-link" data-toggle="pill" href="#v-pills-3" role="tab">Pill 3</a>
</div>
</div>
<div class="col-10">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active show" id="v-pills-1" role="tabpanel">
Pill 1 content
<!-- tabs
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active show" id="tabs-1" role="tabpanel">Tab 1 content</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">Tab 2 content</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">Tab 3 content</div>
</div>
-->
</div>
<div class="tab-pane fade" id="v-pills-2" role="tabpanel">Pill 2 content</div>
<div class="tab-pane fade" id="v-pills-3" role="tabpanel">Pill 3 content</div>
</div>
</div>
</div>
</body>
</html>
The webpage functions correctly, that is the vertical pills work as expected. Once you uncomment the section that gives the first vertical pill a nested tab, the pills do not function correctly. Clicking on Pill 2 and then Pill 3 will results in the content for both pills to be shown.
Why doesn't this work and how can I fix it?
This is a bug in version 4.0.0-beta. It is fixed in version 4.0.0-beta.2:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

How do I make tab button clickable?

I am trying to make my navigation bar clickable. For example when a user clicks data a data web page opens up. But in my code I am unable to do so. When I click the tab button nothing happens. Can someone help me so that when I click the tab button shows the content? Note I am using bootstrap nav-nav tab bar Below is my code below:-
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Sales</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/shop-item.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="persons/data.html"> data </a></li>
<li><a data-toggle="tab" href="teams/teamI.html"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container-fluid">
<div class="row">
<div id= "mapContainer" class="col-md-12">
<div id="map-canvas"></div>
</div>
<div id = "panelContainer" class="col-md-3 hidden">
<div id="right-panel"></div>
</div>
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
</div>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can make it simpler like below. But if you wanted to load another html into specific tabs then use jquery.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="#data"> data </a></li>
<li><a data-toggle="tab" href="#teams"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container">
<h1>Home</h1>
</div>
</div>
<div id="data" class="tab-pane fade in">
<div class="container">
<h1>Data</h1>
</div>
</div>
<div id="teams" class="tab-pane fade in">
<div class="container">
<h1>Teams</h1>
</div>
</div>
</div>
Update: You can also add html inside your tabs using jQuery load
function.
Code looks like this:
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="#data"> data </a></li>
<li><a data-toggle="tab" href="#teams"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container">
<h1>Home</h1>
</div>
</div>
<div id="data" class="tab-pane fade in">
<div class="container">
<h1>Data</h1>
</div>
</div>
<div id="teams" class="tab-pane fade in">
<div class="container">
<h1>Teams</h1>
</div>
</div>
</div>
<script>
$('#home').load('/home.html');
$('#data').load('/data.html');
$('#teams').load('/teams.html');
</script>