I am attempting to center align my dropdown menu using Bootstrap 4.
Following the given example:
[
This is the result I am achieving:
[
This is the code I have implemented:
<div class="container">
<div class="row">
<div class="col-md pl-4 user-dropdown text-center">
<div class="dropdown btn-group">
<a class="navbar-brand dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i></a>
<ul class="dropdown-menu">
<li>
<a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('frm-logout').submit();">
Logout
</a>
<form id="frm-logout" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
<hr>
</li>
<li><a href="{{ route('user.profile') }}">My Profile</a></li>
</ul>
</div>
</div>
<div class="col-md">
<span><a class="navbar-brand" href="#"><i class="fas fa-shopping-cart"></i></a></span>
</div>
<div class="col-md">
<span><a class="navbar-brand" href="#"><i class="fas fa-heart"></i></a></span>
</div>
</div>
</div>