Boot Screen 4 Navbar Dropdown Right

Question

As you see in the picture below, when I click on the bell icon, a drop-down menu appears in the lower right corner of the icon. I want this drop-down menu to be displayed at the bottom left and not at the bottom right. What should I do?

If you want to see my code, it is written using php :

 function navigation(){ $output = ""; $icons = ["user","bell","envelope","commenting"]; $rows = [2,5,5,5]; for ($i=0; $i < count($icons) ; $i++) { $output .= '<div class="dropdown">'; $output .= '<a class="nav-item nav-link" data-toggle="dropdown">'; $output .= '<i class="fa fa-'.$icons[$i].'"></i></a>'; $output .= '<div class="dropdown-menu text-right">'; for ($j=0; $j < $rows[$i] ; $j++) { $output .= '<a href="#" class="dropdown-item">'.($j+1).'</a>'; } $output .= '</div>'; $output .= '</div>'; } return $output; } 

And then this output will be displayed in the html file:

 <nav class="navbar"> <div class="container"> <div class="navbar-nav d-flex flex-row"> <?= navigation() ?> </div> </div> </nav> 

Answer 1

Use the dropdown-menu-right class ..

  <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

Answer 2

Update for Bootstrap4-Beta strong>:

Since there is an error in bootstrap4 beta , I had to add

 .dropdown-menu-right { right: 0; left: auto; } 

for it to work.

Answer 3

.dropdown-menu-right class has a different behavior if it is inside a .navbar . You can read "Heads up" in the docs here:

https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

Actually, to solve, I use this class:

 .navbar .dropdown-menu-right { right: 0; left: auto; }