{% load static %} {% load i18n %} {% load i18n_noprefix %}

{% trans "Bootstrap 5 Language Selector Examples" %}

{% trans "Dropdown Style" %}

{% trans "Native select element with Bootstrap styling" %}

{% language_selector style='dropdown' %}
{% trans "List Style" %}

{% trans "Vertical list with active state indicator" %}

{% language_selector style='list' %}
{% get_available_languages as LANGUAGES %} {% get_current_language as LANGUAGE_CODE %} {% for lang_code, lang_name in LANGUAGES %} {% if lang_code == LANGUAGE_CODE %} {{ lang_name }} {% trans "Current" %} {% else %} {{ lang_name }} {% endif %} {% endfor %}
{% trans "Inline Style" %}

{% trans "Horizontal pills for compact display" %}

{% language_selector style='inline' %}
    {% get_available_languages as LANGUAGES %} {% get_current_language as LANGUAGE_CODE %} {% for lang_code, lang_name in LANGUAGES %}
  • {% if lang_code == LANGUAGE_CODE %} {{ lang_code|upper }} {% else %} {{ lang_code|upper }} {% endif %}
    • {% endfor %}
{% trans "Dark Mode Support" %}

{% trans "All styles work with Bootstrap's dark mode" %}

{% language_selector style='dropdown' %}
{% language_selector style='inline' %}
{% trans "Integration Examples" %}
{% language_selector style='dropdown' %}
{% language_selector style='inline' %}