dropdown menu text align, css works but bootstrap fails?

Question

I have this dropdown menu, its submenu items are text aligned center. I want to change that to align left. Please take a look: With "usual" css, I could do it (as the right arrow pointed, this is changing a submenu item, and it works). But I'm learning bootstrap(which means making changes in html, instead of css?), I've tried two methods(without changing css), the first was changing the "parent" menu, ABOVE the left arrow I added:

dropdown-menu-left

it failed. So, a second method, I tried changing submenu item, just like above-mentioned "usual" CSS, by adding to where the left arrow pointed:

justify-content-left

This one failed, too. Could anybody please tell me why? - I guess it's the same as "usual" CSS.

For more information: I'm talking about this page: https://better4living.github.io/what_can_i_afford.html please look at the nav bar -> Calculators.

Please note: this question is about bootstrap!

Answer 1

Use should use .d-flex and then add this class .justify-content-start

Note: bootstrap V4

<a href="monthly_payment.html" class="dropdown-item text-white display-4 d-flex justify-content-start ">Monthly Payment</a>

Check this for more justify-content