I have a bootstrap modal that consists of a set of tabs, I want the tabs to appear in a row through the two symbols I put on the image I can go to the tabs on the right and left, how to do that?
thanks you for your help...
Here is the picture where the tabs look like this,
I want them to be in the same row when I click on the symbols to go to other tabs
This is my code:
<button data-toggle="modal" data-target="#menu_tab">Menu</button>
<div class="modal fade" id="menu_tab">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="form-group" id="font" align='right'>
<div class="form-group" id="font" align='right'>
<fieldset class="scheduler-border">
<legend class="scheduler-border">Menu</legend>
<div class="form-row">
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab1" aria-controls="home" role="tab" data-toggle="tab">Tab1</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab2" aria-controls="home" role="tab" data-toggle="tab">Tab2</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab3" aria-controls="home" role="tab" data-toggle="tab">Tab3</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab4" aria-controls="home" role="tab" data-toggle="tab">Tab4</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab5" aria-controls="home" role="tab" data-toggle="tab">Tab5</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab6" aria-controls="home" role="tab" data-toggle="tab">Tab6</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab7" aria-controls="home" role="tab" data-toggle="tab">Tab7</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab8" aria-controls="home" role="tab" data-toggle="tab">Tab8</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab9" aria-controls="home" role="tab" data-toggle="tab">Tab9</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="Tab1" class="active">
<div class="p-3">
tab1 content
</div>
</div>
<div role="tabpanel" class="tab-pane" id="Tab2" class="active">
<div class="p-3">
tab2 content
</div>
</div>
<div role="tabpanel" class="tab-pane" id="Tab3" class="active">
<div class="p-3">
tab3 content
</div>
</div>
<div role="tabpanel" class="tab-pane" id="Tab4" class="active">
<div class="p-3">
tab4 content
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
Related
I created a navigation Bar using bootstrap in Angular, however I have encountered an issue when adding a user icon as shown in the picture below, that problem does not happen if I instead use a text as shown Below (My Account). How can I fix this and make sure the user icon is centered aligned just like the rest of the links in the navbar?
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center navbar-light bg-light">
<div class="container">
<a href="/" class="navbar-brand d-flex w-50 me-auto">
<img
src="assets/images/myImage.png"
alt="my-image"
loading="lazy"
class="logo"
/>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Home</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" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ms-auto w-100 justify-content-end">
<!-- <li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
-->
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img
src="assets/images/user.png"
alt="user-logo"
loading="lazy"
class="logo"
/>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Sign Up</a></li>
<!-- <li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Item</a></li>
-->
</ul>
</li>
</ul>
</div>
</div>
</nav>
Here you go...
The solution that #ethry suggested is not the best one (even though it works). Why using CSS if this can be done with Bootstrap? You just need to add d-flex justify-content-center to the nav-item.
See the snippet below.
<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>
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center navbar-light bg-light">
<div class="container">
<a href="/" class="navbar-brand d-flex w-50 me-auto">
<img src="assets/images/myImage.png" alt="my-image" loading="lazy" class="logo" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active d-flex justify-content-center">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ms-auto w-100 justify-content-end">
<!-- <li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
-->
<li class="nav-item dropdown d-flex justify-content-center">
<a class="nav-link" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="assets/images/user.png" alt="user-logo" loading="lazy" class="logo" />
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Sign Up</a></li>
<!-- <li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#">Item</a>
</li>
-->
</ul>
</li>
</ul>
</div>
</div>
</nav>
You can use the <center> tag to do this, but I would recommend using CSS instead.
<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"/>
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center navbar-light bg-light">
<div class="container">
<a href="/" class="navbar-brand d-flex w-50 me-auto">
<img
src="https://i-need-to-go.to-sleep.xyz/r/hi.png"
alt="my-image"
loading="lazy"
class="logo"
/>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Home</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" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ms-auto w-100 justify-content-end">
<!-- <li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
-->
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<div style="text-align: center;"><img
src="https://i-need-to-go.to-sleep.xyz/r/hi.png"
alt="user-logo"
loading="lazy"
class="logo"
style="border: 1px solid lime; /*remove*/"
/></div>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Sign Up</a></li>
<!-- <li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Item</a></li>
-->
</ul>
</li>
</ul>
</div>
</div>
</nav>
The center tag has been deprecated, and is not supported by some browsers, so you should probably use the CSS option above instead of <center>.
You can also remove that green border, I just put it there to show that it was actually centered.
I have two tabs; one labeled boys and the other labeled girls.
within each of those 2 tabs I have a dropdown options for age's.
What im trying to do:
display the age group under the test-b or test-g. depending on what tab im in.
example: if i select 17-18 i want 17-18 displayed under the test-b; if im inside the boys tab
what I tried so far:
basically just moving the tabs div that contains what will display on the page in different areas. It worked on a previous project. but that project wasn't a tab within another tab, unsure if that is the reason it's not working the way it should.
using bootstrap 4.6
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-boy" role="tab" aria-controls="v-pills-boy" aria-selected="true">Boys</a>
<a class="nav-link" id="v-pills-girl-tab" data-toggle="pill" href="#v-pills-girl" role="tab" aria-controls="v-pills-girl" aria-selected="false">Girls</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-boy" role="tabpanel" aria-labelledby="v-pills-boy-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">b-Age</a>
<div class="dropdown-menu">
<a class="dropdown-item nav-link" id="7-8-tab" data-toggle="tab" href="#7-8" role="tab" aria-controls="7-8" aria-selected="true">7-8</a>
<a class="dropdown-item nav-link" id="9-10-tab" data-toggle="tab" href="#9-10" role="tab" aria-controls="9-10" aria-selected="false">9-10</a>
<a class="dropdown-item nav-link" id="11-12-tab" data-toggle="tab" href="#11-12" role="tab" aria-controls="11-12" aria-selected="false">11-12</a>
<a class="dropdown-item nav-link" id="13-14-tab" data-toggle="tab" href="#13-14" role="tab" aria-controls="13-14" aria-selected="false">13-14</a>
<a class="dropdown-item nav-link" id="15-16-tab" data-toggle="tab" href="#15-16" role="tab" aria-controls="15-16" aria-selected="false">15-16</a>
<a class="dropdown-item nav-link" id="17-18-tab" data-toggle="tab" href="#17-18" role="tab" aria-controls="17-18" aria-selected="false">17-18</a>
</div>
</div>
</nav>
test b
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade" id="7-8" role="tabpanel" aria-labelledby="7-8-tab">7-8</div>
<div class="tab-pane fade" id="9-10" role="tabpanel" aria-labelledby="9-10-tab">9-10</div>
<div class="tab-pane fade" id="11-12" role="tabpanel" aria-labelledby="11-12-tab">11-12</div>
<div class="tab-pane fade" id="13-14" role="tabpanel" aria-labelledby="13-14-tab">13-14</div>
<div class="tab-pane fade" id="15-16" role="tabpanel" aria-labelledby="15-16-tab">15-16</div>
<div class="tab-pane fade" id="17-18" role="tabpanel" aria-labelledby="17-18-tab">17-18</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-girl" role="tabpanel" aria-labelledby="v-pills-girl-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">g-Age</a>
<div class="dropdown-menu">
<a class="dropdown-item nav-link" id="7-8-tab" data-toggle="tab" href="#7-8" role="tab" aria-controls="7-8" aria-selected="true">7-8</a>
<a class="dropdown-item nav-link" id="9-10-tab" data-toggle="tab" href="#9-10" role="tab" aria-controls="9-10" aria-selected="false">9-10</a>
<a class="dropdown-item nav-link" id="11-12-tab" data-toggle="tab" href="#11-12" role="tab" aria-controls="11-12" aria-selected="false">11-12</a>
<a class="dropdown-item nav-link" id="13-14-tab" data-toggle="tab" href="#13-14" role="tab" aria-controls="13-14" aria-selected="false">13-14</a>
<a class="dropdown-item nav-link" id="15-16-tab" data-toggle="tab" href="#15-16" role="tab" aria-controls="15-16" aria-selected="false">15-16</a>
<a class="dropdown-item nav-link" id="17-18-tab" data-toggle="tab" href="#17-18" role="tab" aria-controls="17-18" aria-selected="false">17-18</a>
</div>
</div>
</nav>
test g
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade" id="7-8" role="tabpanel" aria-labelledby="7-8-tab">7-8</div>
<div class="tab-pane fade" id="9-10" role="tabpanel" aria-labelledby="9-10-tab">9-10</div>
<div class="tab-pane fade" id="11-12" role="tabpanel" aria-labelledby="11-12-tab">11-12</div>
<div class="tab-pane fade" id="13-14" role="tabpanel" aria-labelledby="13-14-tab">13-14</div>
<div class="tab-pane fade" id="15-16" role="tabpanel" aria-labelledby="15-16-tab">15-16</div>
<div class="tab-pane fade" id="17-18" role="tabpanel" aria-labelledby="17-18-tab">17-18</div>
</div>
</div>
</div>
</div>
You need to change the ids of tabpanel.You need to make sure the id of each tabpanel is unique.
Here is a demo(In the sample of official doc,it uses <ul></ul> and <li></li> in tabs with dropdowns,so I also use <ul></ul> and <li></li> with the dropdown):
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-boy" role="tab" aria-controls="v-pills-boy" aria-selected="true">Boys</a>
<a class="nav-link" id="v-pills-girl-tab" data-toggle="pill" href="#v-pills-girl" role="tab" aria-controls="v-pills-girl" aria-selected="false">Girls</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-boy" role="tabpanel" aria-labelledby="v-pills-boy-tab">
<nav>
<ul class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">b-Age</a>
<li class="dropdown-menu">
<a class="dropdown-item nav-link" id="7-8-tab" data-toggle="tab" href="#b7-8" role="tab" >7-8</a>
<a class="dropdown-item nav-link" id="9-10-tab" data-toggle="tab" href="#b9-10" role="tab">9-10</a>
<a class="dropdown-item nav-link" id="11-12-tab" data-toggle="tab" href="#b11-12" role="tab">11-12</a>
<a class="dropdown-item nav-link" id="13-14-tab" data-toggle="tab" href="#b13-14" role="tab" >13-14</a>
<a class="dropdown-item nav-link" id="15-16-tab" data-toggle="tab" href="#b15-16" role="tab">15-16</a>
<a class="dropdown-item nav-link" id="17-18-tab" data-toggle="tab" href="#b17-18" role="tab">17-18</a>
</li>
</ul>
</nav>
test b
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade" id="b7-8" role="tabpanel" aria-labelledby="7-8-tab">7-8</div>
<div class="tab-pane fade" id="b9-10" role="tabpanel" aria-labelledby="9-10-tab">9-10</div>
<div class="tab-pane fade" id="b11-12" role="tabpanel" aria-labelledby="11-12-tab">11-12</div>
<div class="tab-pane fade" id="b13-14" role="tabpanel" aria-labelledby="13-14-tab">13-14</div>
<div class="tab-pane fade" id="b15-16" role="tabpanel" aria-labelledby="15-16-tab">15-16</div>
<div class="tab-pane fade" id="b17-18" role="tabpanel" aria-labelledby="17-18-tab">17-18</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-girl" role="tabpanel" aria-labelledby="v-pills-girl-tab">
<nav>
<ul class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">g-Age</a>
<li class="dropdown-menu">
<a class="dropdown-item nav-link" id="7-8-tab" data-toggle="tab" href="#g7-8">7-8</a>
<a class="dropdown-item nav-link" id="9-10-tab" data-toggle="tab" href="#g9-10">9-10</a>
<a class="dropdown-item nav-link" id="11-12-tab" data-toggle="tab" href="#g11-12">11-12</a>
<a class="dropdown-item nav-link" id="13-14-tab" data-toggle="tab" href="#g13-14">13-14</a>
<a class="dropdown-item nav-link" id="15-16-tab" data-toggle="tab" href="#g15-16">15-16</a>
<a class="dropdown-item nav-link" id="17-18-tab" data-toggle="tab" href="#g17-18">17-18</a>
</li>
</ul>
</nav>
test g
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade container" id="g7-8" role="tabpanel">7-8</div>
<div class="tab-pane fade container" id="g9-10" role="tabpanel">9-10</div>
<div class="tab-pane fade container" id="g11-12" role="tabpanel">11-12</div>
<div class="tab-pane fade container" id="g13-14" role="tabpanel" >13-14</div>
<div class="tab-pane fade container" id="g15-16" role="tabpanel">15-16</div>
<div class="tab-pane fade container" id="g17-18" role="tabpanel">17-18</div>
</div>
</div>
</div>
</div>
html
result:
How do I remove the underline on the active tab? This is the codepen: https://codepen.io/centem/pen/XWmPbVa
I tried styling the .nav-link.active to no avail. Trying to make it look like actual folder tabs. Thank you.
<div class="container"
<div class="row row-content">
<div class="col-12">
<h2>Charts</h2>
<ul class="nav nav-tabs">
<li class="nav-items">
<a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">
Column Chart
</a>
</li>
<li class="nav-items">
<a class="nav-link" href="#tab2" role="tab" data-toggle="tab">
Treemap
</a>
</li>
<li class="nav-items">
<a class="nav-link" href="#tab3" role="tab" data-toggle="tab">
Donut Chart
</a>
</li>
<li class="nav-items">
<a class="nav-link" href="#tab4" role="tab" data-toggle="tab">
Time Series
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="tab1">
<h3>Column Chart <small>Lorem ipsum</small></h3>
<svg id="chart1" width="900" height="400"></svg>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab2">
<h3>Treemap <small>Lorem ipsum</small></h3>
<svg id="chart2" width="900" height="400"></svg>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab3">
<h3>Donut Chart <small>Lorem ipsum</small></h3>
<svg id="chart3" width="900" height="400"></svg>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab4">
<h3>Time Series <small>Lorem ipsum</small></h3>
<svg id="chart4" width="900" height="400"></svg>
</div>
</div>
</div>
</div>
</div>
Simply change li class nav-items to nav-item.
Explanation: there is no class nav-items, see Bootstrap 4 all css classes
Just change nav-items class to nav-item
nav-items class is invalid class as does not exist. modified code would be
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">
Column Chart
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" role="tab" data-toggle="tab">
Treemap
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab3" role="tab" data-toggle="tab">
Donut Chart
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab4" role="tab" data-toggle="tab">
Time Series
</a>
</li>
</ul>
Just Copy and Past this Code
Let me know if its not working !
<div class="container"
<div class="row row-content">
<div class="col-12">
<h2>Charts</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">
Column Chart
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" role="tab" data-toggle="tab">
Treemap
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab3" role="tab" data-toggle="tab">
Donut Chart
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab4" role="tab" data-toggle="tab">
Time Series
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="tab1">
<h3>Column Chart <small>Lorem ipsum</small></h3>
<svg id="chart1" width="900" height="400"></svg>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab2">
<h3>Treemap <small>Lorem ipsum</small></h3>
<svg id="chart2" width="900" height="400"></svg>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab3">
<h3>Donut Chart <small>Lorem ipsum</small></h3>
<svg id="chart3" width="900" height="400"></svg>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab4">
<h3>Time Series <small>Lorem ipsum</small></h3>
<svg id="chart4" width="900" height="400"></svg>
</div>
</div>
</div>
</div>
</div>
I am working in Bootstrap 4 and I have created a Modal Dialog Box. I want the last link on the Modal Dialog Box to be a dropdown menu, but I can't seem to get the code just right.
My HTML, CSS and JQuery code can be found here at JSFiddle:
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="tabbable">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active">
<a class="nav-link active" href="#AAA" data-toggle="tab">
AAA
</a>
</li>
<li>
<a class="nav-link" href="#BBB" data-toggle="tab">
BBB
</a>
</li>
<li>
<a class="nav-link" href="#CCC" data-toggle="tab">
CCC
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="DDL" href="#DDL">
Menu
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#News">
News
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
You don't want the href="..." set to an element that doesn't exist (#DDL). Just remove it and it will find the next dropdown-menu.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="">
Menu
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#News">
News
</a>
</li>
</ul>
</li>
https://www.codeply.com/go/nbXb8ipmxl
I'm using bootstrap tabs but the text in the nav links are not appearing. Do you know why?
Example:https://jsfiddle.net/o1w0m4os/
HTml:
<ul class="nav nav-pills bg-light-gray" role="tablist">
<li class="">
<a class="nav-link active" href="#tab1" data-toggle="tab" role="tab">
<span class="d-none d-lg-inline-block">tab 1</span>
</a>
</li>
<li class="disabled">
<a class="nav-link" href="#tab2" data-toggle="tab" role="tab">
<span class="d-none d-lg-inline-block">tab 2</span>
</a>
</li>
<li class="disabled">
<a class="nav-link" href="#tab3" data-toggle="tab" role="tab">
<span class="d-none d-lg-inline-block"> tab 3</span>
</a>
</li>
</ul>
you put this class d-none what says in css display: none!important;
so remove d-none
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-pills bg-light-gray" role="tablist">
<li class="">
<a class="nav-link active" href="#tab1" data-toggle="tab" role="tab">
<span class="d-lg-inline-block">tab 1</span>
</a>
</li>
<li class="disabled">
<a class="nav-link" href="#tab2" data-toggle="tab" role="tab">
<span class="d-lg-inline-block">tab 2</span>
</a>
</li>
<li class="disabled">
<a class="nav-link" href="#tab3" name="myCongresses" data-toggle="tab" role="tab">
<span class="d-lg-inline-block"> tab 3</span>
</a>
</li>
</ul>