I need help creating a centered NavBar with dropdown options. I'm currently struggling with deciding whether to align the dropdowns left or right. Can anyone provide guidance on how to center them instead?
I've attempted using the float property, but it hasn't yielded the desired result.
Here is my HTML:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu dropdown-menu-doors-windows">
<div class="row">
<div class="col-md-6">
<img class="pic-align" src="img/products/doors/doors_3.png" />
</div>
<div class="col-md-6">
<img class="win-align" src="img/products/windows/windows_2.png" />
</div>
</div>
</div>
</li>
And here is my CSS:
.win-align {
text-align: center;
height: 250px;
width: 190px;
margin-bottom: 20px;
}
.dropdown-menu-doors-windows {
width: 900px;
height: 400px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
opacity: 0.97;
}
.pic-align {
text-align: center;
height: 250px;
width: 140px;
margin-bottom: 20px;
}