Having difficulty in moving Nav bar to the left using bootstrap4 - html

Hi everyone i have a code for nav-bar and i want to move it to the left side of
the form, its staying on the right side of the form,
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button
</button>
<div class="dropdown-menu " aria-labelledby="dropdownMenuButton">
<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>
</div>
i have tried using floating to the left and using align-left it's still staying on the right side of the form what alternative can solve this issue?/ Thank you.

Kindly update your whole HTML page with navbar code. As running the code you have given is showing on left side of the browser.
Take a look:

Related

Dropdown menu not showing the listed elements when hovered

For some reason this dropdown menu is not showing the listed elements when hovered. Using bootstrap.
Am I missing something here? Maybe it's something simple but I just cannot see it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Services -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Rewiring</a>
<a class="dropdown-item" href="#">Light Fixes</a>
<a class="dropdown-item" href="#">Showers</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Rewiring</a>
<a class="dropdown-item" href="#">Light Fixes</a>
<a class="dropdown-item" href="#">Showers</a>
</div>
</li>
In Bootstrap, dropdown runs by default on mouse click, if you want to show dropdown on mouse hover then you have to use css or js
I have used css
.dropdown:hover ul.dropdown-menu{ display: block; }
.dropdown:hover ul.dropdown-menu{ display: block; }
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Services
</button>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Rewiring</a></li>
<li><a class="dropdown-item" href="#">Light Fixes</a></li>
<li><a class="dropdown-item" href="#">Showers</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Rewiring</a></li>
<li><a class="dropdown-item" href="#">Light Fixes</a></li>
<li><a class="dropdown-item" href="#">Showers</a></li>
</ul>
</div>
More things to talk about here:
Opening dropdown in BS is done by Popper.js (which is not part of bootstrap.min.js). So in order to make dropdown working, you need to load Bootstrap JS via bundle, where Popper.js is included
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js
Since you are using BS5, you need to change data-toggle="dropdown" to data-bs-toggle="dropdown". That is new markup from version 5 onwards.
As mentioned in another answer, opening dropdown on click (and not hover) is core part of BS philosophy (unfortunately). So in case you want to open submenu on hover, additional CSS has to be added.
Also be careful with the markup. It would be more clean to use the structure recommended by BS for the navigation (using <ul>, <li>, etc.)
change <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
to
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"> Dropdown button </button>
Change it to a button then it shoud work!!
I have found the solution:
This was the line causing trouble.
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
I simply just added the following via Bootstrap:
aria-haspopup="true" aria-expanded="false"

Boostrap 4 dropdown menu is exceeding the page on the right

I added a dropdown menu to my bootstrap4 navbar, but the dropdown menu exceeds the page by quite a bit (on the right side).
I tried applying a few things I saw on google like adding dropdown-menu-left or drop-left but both haven't worked for me. The only thing that works at the moment is applying margin-right to the element but that's not what I want since it ruins the format of my navbar.
https://imgur.com/a/jpCWi3e
My html
<!-- right side -->
<ul class="navbar-nav ml-auto">
#if (isset($_SESSION['user_data']))
<!-- Dropdown -->
<li class="nav-item dropdown" style="right: 0;">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
{{$_SESSION['user_data']->username}}
</a>
<div class="dropdown-menu dropleft">
<a class="dropdown-item" href="{{ url('/servers') }}">Manage servers</a>
<a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</div>
</li>
#else
#endif
</ul>
Have you tried dropdown-menu-right on your dropdown-menu ?
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="{{ url('/servers') }}">Manage servers</a>
<a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</div>
Here's a fiddle for that (try to enlarge the preview window if you see the mobile layout).
Is it what you're looking for?
See bootstrap4 documentation for more details on menu alignment

problem when I use mdbootstrap dropdown in angular

I have an angular project without JQuery library. I want to use mdbootstrap dropdown for angular.
I used codes in page:
https://mdbootstrap.com/docs/angular/components/dropdowns/
I copied and paste its html code like this:
<div class="btn-group" mdbDropdown>
<button mdbDropdownToggle type="button" mdbBtn color="primary" class="dropdown-toggle waves-light"
mdbWavesEffect>
Basic dropdown
</button>
<div class="dropdown-menu dropdown-primary">
<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="divider dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
but the when I click in button, the menu is not shown.
Please check that you have added a proper jQuery CDN it may also caused by that if not please check this site in details https://mdbootstrap.com/docs/angular/components/demo/

How to fix dropdown not displaying on click? [duplicate]

This question already has answers here:
Bootstrap 4 popper is undefined
(2 answers)
Closed 3 years ago.
I'm creating a static website with HTML, but the CSS framework was built for me via a free theme builder. Now it's time for me to implement the framework successfully. I'm using Bootstrap Builder with their documentation to form my CSS, and from there adding additional content I need. I'm trying to add a dropdown in my Navbar, but for some reason the example they give me isn't working, but their demo/example does. I've copied their code line-for-line and haven't been able to get the example to even work. The sample code I share below is for a button dropdown, the only difference is using the btn class, but the code otherwise is exactly the same for a Navbar dropdown.
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#dropdownMenuLink" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
</div>
I expect that when I click on the dropdown, the items listed would display in a ... well... dropdown.
Expected results:
Untoggled/Not Clicked and
Toggled/Clicked, without the green square around it obviously.
Twitter bootstrap uses javascript for few components. In the case of dropdowns it uses popper.js so if you want to make the dropdown work you will need to add popperjs script. It is documented here.
https://getbootstrap.com/docs/4.0/getting-started/introduction/#js
also all components which are JS dependent are listed in this link.
At First Please Check your CDN order Whether you added the CDNS Appropiately or not
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button"
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">Dropdown link</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
</div>
If Everything okay just remove the link reference from
<a class="btn btn-secondary dropdown-toggle" href="#" role="button"
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">Dropdown link</a>
It will work fine.Hope It helps you

bootstrap dropdown ::after pseudo-element align right

I am currently using btn-block on my .dropdown-toggle button to make it the full width.
However, I don't like how the ::after pseudo element only sits a fixed width away from the button content.
I am weak with psuedo element styling but is there a way that I can get the dropdown arrow to 'float' and be aligned a fixed width from the right side of the dropdown?
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>
You can make the :after element position: absolute; and align it to the right like so...
.dropdown-toggle::after {
position: absolute;
right: 20px;
top: 50%;
margin-top: -5px;
}
The top and margin-top elements are to help vertically align the arrow no matter the height of the dropdown.