CODEWITHSUNDEEP
djangobootstrap-4
Harry Moreno
Harry Moreno

Reputation: 11603

Django logout button bootstrap navbar

I want to add a logout button to my bootstrap navbar but it doesn't look right.

{# template.html #}

<nav class="navbar navbar-light">
  <div class="container">
    <div class="navbar-expand">
      <ul class="navbar-nav mr-auto">
        {% if user.is_authenticated %}
        <li class="nav-item">
          <a href="#" class="nav-link">{{ user.get_username }}</a>
        </li>
        <form class="form-inline nav-item" action="{% url 'account_logout' %}" method="POST">
          {% csrf_token %}
          <button type="submit" class="btn btn-info">Log out</button>
        </form>
        {% else %}
        <li class="nav-item">
          <a class="nav-link" href="{% url 'account_login' %}">Log in</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'account_signup' %}">Sign up</a>
        </li>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>

is there any way to make the button look like a bootstrap nav-link ? If not, how do I make it an anchor that will POST to Django's logout endpoint?

screenshot

Upvotes: 4

Views: 2064

Answers (2)

Petr Mitsel
Petr Mitsel

Reputation: 87

This should work

<li class="nav-item">
  <a class="nav-link" href="#" 
    onClick="document.getElementById('logoutform').submit()">
    Logout
  </a>
</li>
<form id="logoutform" method="POST" action="{% url 'account_logout' %}">
  {% csrf_token %}
  <input type="hidden">
</form>

Upvotes: 5

drec4s
drec4s

Reputation: 8077

You don't need a form. Simply replace the form with this:

<a href="{% url 'account_logout' %}" class="nav-link">Logout</a>

Upvotes: 2

Related Questions