How to make the localization culture picker work in Orchard Core

How I corrected the Orchard Core content culture picker to work.

Modification to the liquid templates.

Environment

Orchard Core 1.2.2 CMS Clean Blog Theme Boot Strap Clean Blog v6.0.7

Problem

Trying to follow Orchard Core content language localization instruction to add the {% shape "ContentCulturePicker" %} to my menu, left me with bad results. When i clicked on it, it did not work, nothing, not able to change or select a language.

Being new to Orchard Core and Bootstrap it took a lot of looking around to see what was happening. With my first digging around in boot strap i finally determent the Code <a class="nav-link dropdown-toggle" href="#" id="oc-culture-picker" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{Model.CurrentCulture.DisplayName}}</a> from the ContentCulturePickerContainer was the problem. The data-toggle="dropdown" did not appear in the boot strap version being used. At some point it had been changed to data-bs-toggle="dropdown".

The Fix

I am trying to keep the theme as clean as possible and non-modified, so I decided to use the design template to fix the problem. I added a new template named ContentCulturePickerContainer and added the following code.

  <li class="nav-item dropdown">

			<a class="nav-link dropdown-toggle" href="#" id="oc-culture-picker" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{Model.CurrentCulture.DisplayName}}</a>

			<div class="dropdown-menu" aria-labelledby="oc-culture-picker">

			{% for culture in Model.SupportedCultures %}

					{% if culture.Name != Model.CurrentCulture.Name  %}

					<a class="dropdown-item" href="{{culture.Name | switch_culture_url }}">{{culture.DisplayName}}</a>

					{% endif %}

			{% endfor %}

			</div>

	</li>

I then added a Menu template.

<div class="collapse navbar-collapse" id="navbarResponsive">

    <ul class="navbar-nav ms-auto py-4 py-lg-0">

        {% for item in Model.Items %}

        {{ item | shape_render }}

        {% endfor %}

        {% shape "ContentCulturePicker" %}

</ul>

</div>

Conclusion

I still have a css problem with the expanded menu that i need to fix but at least the languages are changing.