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
Related
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>
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 a bootstrap navbar. I want to put signOut and welcome in the menu bar along with other menu items. Below is the screenshot of my navbar:
I want to put SignOut where the purple arrow is and right beneath "SignOut", I want to put "Welcome userName". I also want to move the logo and company/city name to extreeme left of the nav bar . How can I achieve that? Below is my code:
<nav class="navbar navbar-expand-lg py-5 navbar-dark shadow-sm " style="background-color: #264653;width:100%;" >
<div class="container">
<span class="navbar-brand" style="display:flex;">
<img src="~/Images/InfoOrange.png" alt="ACR" width="70" height="70" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">test City</span><br />test company</span>
</span>
<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<%-- <li class="nav-item active">Home <span class="sr-only">(current)</span></li>--%>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Users
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="Depatment.aspx">Department</a>
<%-- <a class="dropdown-item" href="#">Sections</a>--%>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="admindropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
<a class="dropdown-item" href="#">Configuration</a>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="recordsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Records
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="FileUpload.aspx">BlockChain Upload</a>
<a class="dropdown-item" href="#">Verify</a>
<a class="dropdown-item" href="DocReport.aspx">Report</a>
<a class="dropdown-item" href="BucketList.aspx">S3 List</a>
</div>
</li>
</div>
<div>
<ul>
<li class="nav-item" style="margin-right:5px" >
<a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
</li>
</ul>
</div>
</div>
</nav>
You can contain this section with a class. In this instance I called it <div class="sign">. Then since your ul is a direct child of the parent you can use .sign > ul in your CSS to target that div. To get it in that position you can simply apply absolute positioning which allows you to define the area of the page. In your application, the top right. You can then add in your Welcome & Username area underneath as other unordered list items.
.sign > ul {
position: absolute;
top: 0;
right: 0;
list-style-type: none;
}
<div class="sign">
<ul>
<li class="nav-item" style="margin-right:5px" >
<a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
</li>
</ul>
</div>
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:
This is a weird frustrating issue, as I'm working on converting code from Bootstrap 3 to 4. Navbar with a button group on the right (user name, login options, etc.)
When the button group is not a part of the navbar (not included in the menu -- I have PHP code that is not shown below that checks for a specific page if the menu (navbar) is to be displayed or not, the dropdown list appears correct -- vertical, etc. If, however, I place the button group in the navbar, the dropdown list goes horizontal.
I am sure this is because some of the code is somehow interfering with other parts, but I cannot figure it out. Stripping out the PHP code, and just showing the HTML for Bootstrap 4, this is what I have -- first with button group without the navbar:
<nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">hirsch</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
</div> <!-- / dropdown-menu -->
</div> <!-- / btn-group -->
</nav> <!-- / navbar-right -->
That code displays as expected. If, however, I insert this before the end of the collapse part of the navbar (or if I put it after, it doesn't seem to matter), it displays horizontally instead, which is ... weird:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="">Who's Who</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Disclaimer/Copyright</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul> <!-- / navbar-nav -->
<nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">UserName</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
</div> <!-- / dropdown-menu -->
</div> <!-- / btn-group -->
</nav> <!-- / navbar-right -->
</div> <!-- / collapse -->
</nav>
You should be able to copy and paste the code samples and see them if you have the rest of Bootstrap 4 set up. Click the down-caret symbol on the button group, in the first example it is vertical, in the second it is horizontal, but it's the exact same code. I am really confused where the issue is, I've been staring at this for quite some time and cannot find the problem.
Turns out that the Dropdown has changed a bit, and rather than using a UL tag and such:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
It works better (and simpler) with:
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<a class="dropdown-item" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
<a class="dropdown-item" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
<a class="dropdown-item" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</div>