Загрузочный экран 4 Navbar Dropdown Right

Как вы видите на рисунке ниже, когда я нажимаю на значок колокола, выпадающее меню появляется в правом нижнем углу значка. Я хочу, чтобы это выпадающее меню отображалось внизу слева, а не внизу справа. Что мне делать?

Если вы хотите увидеть мой код, он написан на 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; } 

И тогда этот вывод будет отображаться в html-файле:

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

  <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> 

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