Bootstrap-4 drop-down gets some styles automatically. How to disable that? - css

Question

I am using Bootstrap-4 for my new website. I am using the drop-down in multiple places of the page. In the header nav-bar the drop-down works fine but when I use the same drop-down logic inside the page, bootstrap or popper is adding some inline styles, messing up my styles. Is there a way to disable this automatic inline CSS from getting added?
Below is the screenshot of faulty drop-down in the page,
Below is the screenshot of the correct dropdown in the top header.
Edit:
Code
Faulty Dropdown
<div className="pull-right">
<div className="dropdown">
<a
href="#sfsd"
className="dropdown-toggle"
data-toggle="dropdown"
id="dropdownMenuLink"
aria-haspopup="true"
aria-expanded="false"
>
<i className="fa fa-ellipsis-v" aria-hidden="true" />
</a>
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<li className="dropdown-item">
<a href="#">
<i className="fa fa-language mr-2" />
<span>Switch to Arabic</span>
</a>
</li>
<li className="dropdown-item">
<a href="#UpdatePersonalInfo">
<i className="fa fa-user mr-2" />
<span>My Profile</span>
</a>
</li>
<li className="dropdown-item">
<a href="#ChangeSecuritySettings">
<i className="fa fa-cog mr-2" />
<span>My Configuration</span>
</a>
</li>
<li className="dropdown-item">
<a href="login.html">
<i className="fa fa-sign-out mr-2" />
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>
Correct Dropdown
<div className="user-menu dropdown pull-right">
<a
href="#Menu"
className="dropdown-toggle"
data-toggle="dropdown"
aria-expanded="false"
>
<i className="fa fa-gear fa-spin" />
</a>
<ul className="dropdown-menu dropdown-menu-right">
<li className="dropdown-item">
<a href="#">
<i className="fa fa-language mr-2" />
<span>Switch to Arabic</span>
</a>
</li>
<li className="dropdown-item">
<a href="#UpdatePersonalInfo">
<i className="fa fa-user mr-2" />
<span>My Profile</span>
</a>
</li>
<li className="dropdown-item">
<a href="#ChangeSecuritySettings">
<i className="fa fa-cog mr-2" />
<span>My Configuration</span>
</a>
</li>
<li className="dropdown-item">
<a href="login.html">
<i className="fa fa-sign-out mr-2" />
<span>Logout</span>
</a>
</li>
</ul>

Answer 1

As stated in the docs, you can use the data-display option....
"By default, we use Popper.js for dynamic positioning. Disable this
with static."
Just remember that then you'll have to handle positioning of the dropdown menu.
https://www.codeply.com/go/85fPF73EtF
Related: Bootstrap 4 dropdown menu within accordion

Answer 2

Please add your custom css code (it is not real solution but working )
#media (min-width: 0px) and (max-width: 991px) {
.dropdown-menu.show {
transform: unset !important;
position: unset !important;
}
}