Menu
As you see in the picture below, when I click on the bell icon, a dropdown menu appears at the bottom-right of the icon. I want this dropdown menu to appear at bottom-left instead of bottom-right. What should I do?
<nav class="navbar"> <div class="container"> <div class="navbar-nav d-flex flex-row"> ... </div> </div> </nav> 
322
Use data-offset or data-reference to change the location of the dropdown.
ml-auto class in Bootstrap can be used to align navbar items to the right. The . ml-auto class automatically aligns elements to the right.
Use the w3-right class to float the dropdown to the right, and use CSS to position the dropdown content (right:0 will make the dropdown menu go from right to left).
Basic Dropdown To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
By default, the Bootstrap 5 navbar components are aligned to the left. Here, we will learn to align items to the right. As the navbar is built with flexbox. The navbar items can be aligned using flex utility. Use .justify-content-end class on collapse menu to justify items to the right.
Just change the .navbar-default class into .navbar-inverse: Navigation bars can also hold dropdown menus. The following example adds a dropdown menu for the "Page 1" button: The .navbar-right class is used to right-align navigation bar buttons.
1 Navigation Bars. With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. ... 2 Inverted Navigation Bar 3 Navigation Bar With Dropdown. Navigation bars can also hold dropdown menus. 4 Right-Aligned Navigation Bar. ... 5 Navbar Buttons 6 Navbar Forms. ... 7 Navbar Text. ... 8 Fixed Navigation Bar. ...
Bootstrap version: 3.3.0 Author bestjquery Links demo and code Made with HTML / CSS / JS About a code Bootstrap Dropdown Menu Style 83 Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: bootsnav.css, jquery.js, bootsnav.js Bootstrap version: 3.3.0
Bootstrap 5 (update 2021)
Use the dropdown-menu-end class on the dropdown-menu to align the items inside the menu right..
<div class="dropdown-menu dropdown-menu-end"> <a class="dropdown-item" href="#">Link</a> <a class="dropdown-item" href="#">Link</a> <a class="dropdown-item" href="#">Link</a> </div> https://codeply.com/p/kWLLKdjdpC
Bootstrap 4 (original answer)
Use the dropdown-menu-right class to align the items inside the menu right..
<div class="dropdown-menu dropdown-menu-right text-right"> <a class="dropdown-item" href="#">Link</a> <a class="dropdown-item" href="#">Link</a> <a class="dropdown-item" href="#">Link</a> </div> http://codeply.com/go/6Mf9aK0P8G
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
