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:
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.
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>
Is it possible to achieve this?
By slightly modifying this codes?
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
</div>
EDITED
I can achieve this using below. I'm wondering if there's any other simple way.
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
</div>
</div>
tarako
You may try it by
just add a single div in start and add its height plus hide the lower div
<div class="row">
<div style="height:10px(according to you)" class="col-md-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
</div>
Hi you can try with this code
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
</nav>
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
<h1>Dashboard</h1>
<section class="row text-center placeholders">
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<div class="text-muted">Something else</div>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</section>
</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