How to remove inline element from bootstrap dropdown - css

Question

I have a simple question : when I use dropdown bootstrap https://getbootstrap.com/docs/5.1/components/dropdowns/#alignment-options, if I inspect the element I can see some properties added inline :
position: absolute;
inset: auto auto 0px 0px;
margin: 0px;
transform: translate(0px, -40px);
How can I remove this ?
I want to have my element centered in relation with my button and not on the right or left.
So, for this, want to use the position absolute and top and left not inset. Unless is there another possibility ?
I put bootstrap example behind.
.dropup {
margin-top: 8rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
EDIT. I would like to have this :
Thanks a lot far answer.

Answer 1

UPDATED
You can override left and right values on dropdown-menu to achieve it.
For example
.dropup {
margin-top: 8rem;
margin-left: 8rem;
}
.dropdown-menu {
right: auto !important;
left: -50% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
OLD ANSWER
All those inline CSS attributes are under dropdown-menu, so you can easily override it with !important
The !important rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!
For example
.dropdown-menu {
inset: auto !important;
}
But you need to be careful with !important. That might cause some CSS problems if you try to style on the same class with the same attribute again on other places