'How to remove inline element from bootstrap dropdown

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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 : enter image description here

Thanks a lot far answer.

cssbootstrap-5


Solution 1:[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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions