When creating my new website, I decided to use Bootstrap-4. However, I ran into an issue with the drop-down feature. While the drop-down works perfectly fine in the header nav-bar, it seems to be adding some unwanted inline styles when used within the page itself. Is there a way to prevent Bootstrap or Popper from automatically adding these inline CSS styles?
Here is a screenshot of the problematic drop-down on the page:
https://i.sstatic.net/EPIJB.png
And here is a screenshot of the correctly functioning drop-down in the top header:
https://i.sstatic.net/z34WC.png
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>