I have created a header , with inside a navbar
I would like to have an element wihich become a dropdown-menu. But I don't understand why is not appearing my item.
I see on the link, that it seem easy:
https://getbootstrap.com/docs/4.0/components/navs/
Pills with dropdowns
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<header>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<header>
ITEC-EP
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Applications<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="wiki.html">Wiki</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
I dont have any error message.
When i click to my drop down menu, nothing happens. The inner element are not appearing.
I am trying to not use css, but only bootstrap. I chosed to use this template:
https://bootswatch.com/materia/
What am I mistaking?
In the future how can i debug in the developer mode in mozilla?
I imagine the issue is not having the correct javaScript packages installed. I had this when I first used Bootstrap, and I was missing popper.js
Related
I have created a simple dropdown menu using bootstrap Basic bootstrap dropdown
<li class="nav-item dropdown">
<a href="" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false" class="nav-link">
<i class="fa-solid fa-user" style="font-size: 24px"></i>
</a>
<ul class="dropdown-menu w-500 align-items-stretch" aria-labelledby="dropdownMenu2">
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><a class="dropdown-item" href="#">Nothing else</a></li>
</ul>
</li>
I've searched a lot on how to extend the UX for the user in a more complex window shown when the user clicks on the button but like this one.
Enhanced menu
Any hint on what bootstrap options do I have?
Thank you
You could always put a grid within the <li></li>. Of course you're going to have to use the docs (Grid system) to see what options you have in styling it, but basically:
<li>
<div class='row'>
<div class='col'>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Nothing else</a>
</div>
<div class='col'>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Nothing else</a>
</div>
<div class='col'>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Nothing else</a>
</div>
</div>
</li>
Hi there This navbar template is made with bootstrap 5.
In my opinion, the structure is the most beautiful bootstrap dropdown like following, I think.
Hope this helps for you.
Thanks, see you again.
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<div class=" collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Action</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Action</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Action</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Action
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><a class="dropdown-item" href="#">Nothing else</a></li>
</ul>
</li>
</ul>
</div>
</div>
I have a simple navbar in which is there are multiple items i just need to center and make the last div to end.
My code
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto mt-2 mt-lg-0 justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">WHO WE ARE</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
WHAT WE DO
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MEDIA
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<div class="dropdown drp-user" ngbDropdown placement='auto'>
<a href="javascript:" ngbDropdownToggle data-toggle="dropdown">
<i class="icon feather icon-settings"></i>
</a>
<div class="dropdown-menu dropdown-menu-right profile-notification" ngbDropdownMenu>
<div class="pro-head">
<img src="assets/images/user/avatar-2.jpg" class="img-radius" alt="User-Profile-Image">
<span>{{userTitle}}</span>
<a href="javascript:" class="dud-logout" title="Logout" (click)="logout()">
<i class="feather icon-log-out"></i>
</a>
</div>
<ul class="pro-body">
<li *ngIf="user?.userTypeId == this.userTypeIdEnum.ADMIN"><a href="javascript:" class="dropdown-item"
routerLink="/manageprofile"><i class="feather icon-user"></i> Manage Profile</a></li>
<li><a href="javascript:" class="dropdown-item" routerLink="/auth/change-password"><i
class="feather icon-lock"></i> Change Password</a></li>
</ul>
</div>
</div>
</div>
</div>
In image i have marked red item which i need to do center if i am wrapping it to div then its not showing in a row.
I'm working on my first big project. I've built almost everything but the menu has problems. Clicking on the link in the menu opens the subpage but does not go to the label.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
<span class="caret"></span>
Nurty</a>
<div class="dropdown-menu aria-labelledby=dropdown_target">
<a class="dropdown-item" href="/nurty.html">Techouse</a>
<a class="dropdown-item" href="/nurty.html#minit">Minimal</a>
<a class="dropdown-item" href="/nurty.html#classt">Classic</a>
<a class="dropdown-item" href="/nurty.html#detrt">Detroit</a>
<a class="dropdown-item disabled" href="/nurty.html#hardgroove">Hardgroove</a>
<a class="dropdown-item" href="/nurty.html#hart">Hard</a>
</div>
In subpage I want to go for example to this label:
<section id="minit">
But still not working.
How can I fix it or maybe is other way to do it?
this is the working example of your need, i also added smooth scoll by adding css smooth-behavior: smooth, i added 1500px height for clear view of your problem
Index.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
<span class="caret"></span>
Nurty
</a>
<div class="dropdown-menu aria-labelledby=dropdown_target">
<a class="dropdown-item" href="example.html">Techouse</a>
<a class="dropdown-item" href="example.html#minit">Minimal</a>
<a class="dropdown-item" href="example.html#classt">Classic</a>
<a class="dropdown-item" href="example.html#detrt">Detroit</a>
<a class="dropdown-item disabled" href="example.html#hardgroove">Hardgroove</a>
<a class="dropdown-item" href="example.html#hart">Hard</a>
</div>
</li>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
example.html
<style>
html {
scroll-behavior: smooth;
}
</style>
<div style="height: 1500px;"></div> <!-- FOR SCROLL VIEW -->
<section id="minit">scroll or die</section>
I am trying to center the navbar content in Bootstrap 4, alpha 5. I have been googling a bit, and I guess there might be some trick involving d-block and mx-auto.
However I cannot find out how to center the navigation links so that they are total in center, not just adding a container around them.
Sample navbar code I am playing with:.
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
JSFiddle if you like
Centering Navbar items is simpler in Bootstrap 4, and doesn't require additional markup.
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<ul class="navbar-nav mx-auto">
<li class="nav-item active text-center">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown text-center">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
Bootstrap 4 Center Navbar Demo (updated for v4.0.0)
If you need to center only specific elements, such as the Brand or Links, see this answer
You shouldn't need to use css to accomplish this, since bootsrap's "mx-auto" class can take care of this for you. You can simply add the following to your ul class:
more info on horizontal centering in boostraps docs: https://getbootstrap.com/docs/4.4/utilities/spacing/
I have a nav bar at the left which has a few dropdowns. I want to make the text centrally align for the dropdowns or maybe a better representation of dropdowns in a nav bar. How to do that? (if possible without modifying css)
My current code snippet -
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="https://v4-alpha.getbootstrap.com/examples/dashboard/#">Overview <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Region</a>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Category</a>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Brand</a>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Packaging</a>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<!--<li class="nav-item">-->
<!--<a class="nav-link" href="https://v4-alpha.getbootstrap.com/examples/dashboard/#">Analytics</a>-->
<!--</li>-->
</ul>
</nav>
I'm not sure what you mean "centrally align". You can just use text-center to horizontally align the text.
<ul class="nav nav-pills flex-column text-center">
</ul>
http://www.codeply.com/go/J8C7RwDIDW