Menu
I'm trying to align my dropdown menu to the center, I'm using Bootstrap 4.
I'm following this example:
[![Example Dropdown Menu]](https://i.stack.imgur.com/nImrY.png)
And this is what I'm getting:
[![My situation]](https://i.stack.imgur.com/yLZJB.png)
This is my code:
<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>
382
Dropdown button can be positioned in the center of the page by setting the “text-align” property of dropdown div to center. The following example contains a simple Bootstrap dropdown menu with an added class “my-menu”. The property “text-align: center” is added to the class.
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).
To right-align a menu, use . dropdown-menu-right.
Example Explained HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
Use this
.user-dropdown .dropdown-menu {
left: 50% !important;
transform: translateX(-50%) !important;
top: 100% !important;
}
.user-dropdown .dropdown-menu {
left: 50% !important;
transform: translateX(-50%) !important;
top: 100% !important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<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>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