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
Related
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>
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>
I have a problem editing an HTML page. I need to change the content on the second tab on the nav-tabs, the one with the name Anexos. I tried to create a new href, but this didn't work. What do I need to do?
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#adm_carteiras">Formulário</a></li>
<li><a data-toggle="tab" href="#utilizacao">Anexos</a></li>
<li><a data-toggle="tab" href="#utilizacao">Versões</a></li>
</ul>
<div class="tab-content">
<div id="adm_carteiras" class="tab-pane fade in active">
<div class="row">
<div class="col-md-12">
<div class="filtrar_cliente box" style="padding-bottom:25px;">
<div class="box_conteudo">
<div class="box_conteudo">
<h1 class="title_box">Solicitação de Viagem</h1>
<div class="adm_carteiras box">
<div class="box_conteudo">
<h4>Nome do Solicitante:</h4><br>
</div>
</div>
this is the correct bootstrap nav-tabs structure
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
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>
This is currently the code I'm working with.
I want it to be able to switch tabs however it does not. I've tried taking off the active class however it still doesn't work.
I followed a tutorial to do it this way which didn't require JavaScript.
Can anyone help me find out why it is not working?
<div class="nav">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Home">Home</a></li>
<li><a data-toggle="tab" href="#Tournaments">Tournaments</a></li>
<li><a data-toggle="tab" href="#About">About</a></li>
<li><a data-toggle="tab" href="#Contact">Contact</a></li>
</ul>
</div>
<div class="tab-content">
<div id="Home" class="tab-pane fade">
<h3> example </h3>
</div>
<div id="Tournaments" class="tab-pane fade">
<h3>create images to show for new pages</h3>
</div>
<div id="About" class="tab-pane fade">
<h3>6214</h3>
</div>
<div id="Contact" class="tab-pane fade">
<h3>exds</h3>
</div>
</div>
You are missing all javascripts.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Refer to this : https://codepen.io/jrcanicula/pen/vmojRG