ZoeLiao · March 11, 2024 22:58 · ViktorRaboshchuk · Aug 13, 2022
diff --git a/django-bootstrap-navbar-select-language.html b/django-bootstrap-navbar-select-language.html
 {% load i18n %}

 <!DOCTYPE html>
 <html lang="en">

 <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 </head>

 <body>
    
    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-light navbar-suspend" id="base-navbar">
        <div class="container">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    
                    <!-- dropdown -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="/" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans "Language" %}</a>
                        <form action="{% url 'set_language' %}" method="post" id="lang_form">{% csrf_token %}
                            <input name="next" type="hidden" value="{{ redirect_to }}">
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                {% get_current_language as LANGUAGE_CODE %}
                                {% get_available_languages as LANGUAGES %}
                                {% get_language_info_list for LANGUAGES as languages %}
                                {% for language in languages %}
                                <li>
                                    <button type="submit" name="language" value="{{ language.code }}" class="{% if language.code == LANGUAGE_CODE %}selected{% else%}demo-text-black{% endif %} dropdown-item">
                                        {{ language.name_local }}
                                    </button>
                                </li>
                                {% endfor %}
                            </ul>
                        </form>
                        </a>
                    </li>
                    <!--/ dropdown -->
            
                </ul>
            </div>
        </div>
    </nav>
    <!--/ navbar -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

 </body>

 </html>
	{% load i18n %}

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	</head>

	<body>

	<!-- navbar -->
	<nav class="navbar navbar-expand-lg navbar-light navbar-suspend" id="base-navbar">
	<div class="container">
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav mr-auto">

	<!-- dropdown -->
	<li class="nav-item dropdown">
	<a class="nav-link dropdown-toggle" href="/" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans "Language" %}</a>
	<form action="{% url 'set_language' %}" method="post" id="lang_form">{% csrf_token %}
	<input name="next" type="hidden" value="{{ redirect_to }}">
	<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
	{% get_current_language as LANGUAGE_CODE %}
	{% get_available_languages as LANGUAGES %}
	{% get_language_info_list for LANGUAGES as languages %}
	{% for language in languages %}
	<li>
	<button type="submit" name="language" value="{{ language.code }}" class="{% if language.code == LANGUAGE_CODE %}selected{% else%}demo-text-black{% endif %} dropdown-item">
	{{ language.name_local }}
	</button>
	</li>
	{% endfor %}
	</ul>
	</form>
	</a>
	</li>
	<!--/ dropdown -->

	</ul>
	</div>
	</div>
	</nav>
	<!--/ navbar -->

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

	</body>

	</html>