Change direction of Bootstrap Dropdown on React - css

Question

I'm trying to display a navbar Dropdown to open to the left, but it keeps opening to the right. My dropdown is located at the far right of the navbar and when I open it, it opens to the right, going outside of the layout.
I've already tried the "pull-right" and "pull-left" solutions to no avail. Also the "dropdown-menu-right" and "dropdown-menu-left" solutions don't work.
html5
<ul className="nav navbar-nav navbar-right">
<li className="nav-item dropdown">
<a className="nav-link" id="walletOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src={require('../img/wallet.svg')} alt="easyfeedbacktoken" height="40px" />
</a>
<ul className="dropdown-menu" aria-labelledby="walletOptions">
<ImportMnemonicModal onUpdateMnemonic = {this.props.onUpdateMnemonic}/>
<ShowMnemonic mnemonic = {this.props.mnemonic}/>
<DeleteWallet onUpdateMnemonic = {this.props.onUpdateMnemonic}/>
</ul>
</li>
</ul>
I want the dropdown menu to drop to the left. It always drops to the right.

Answer 1

Try changing it from a dropDOWN to a dropLEFT.
That way it always opens to the left
Change :
<li className="nav-item dropdown">
To :
<li className="nav-item dropleft">
Complete code :
<ul className="nav navbar-nav navbar-right">
<li className="nav-item dropleft">
<a className="nav-link" id="walletOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src={require('../img/wallet.svg')} alt="easyfeedbacktoken" height="40px" />
</a>
<ul className="dropdown-menu" aria-labelledby="walletOptions">
<ImportMnemonicModal onUpdateMnemonic = {this.props.onUpdateMnemonic}/>
<ShowMnemonic mnemonic = {this.props.mnemonic}/>
<DeleteWallet onUpdateMnemonic = {this.props.onUpdateMnemonic}/>
</ul>
</li>
</ul>
Source bootstrap (https://getbootstrap.com/docs/4.0/components/dropdowns/#dropleft-variation)

Answer 2

The Dropleft, Dropup and Dropright solutions didn't worked in my particular situation.
Neither the "pull-right" or "pull-left" solution.
I was able to force the Dropdown to drop into a specific coordinates using the following solution:
.nav .dropdown{
cursor: pointer;
position: absolute;
left: 88%;
top: 30%;
}
.dropdown-menu{
cursor: pointer;
position: absolute !important;
left: -8em;
top: 3em;
}
Making the dropdown button be in a specific position and the dropdown menu drop exactly how I wanted it to.
For Smaller devices, I just used #media and put another set of rules in order for the dropdown menu to work properly.