использование css / bootstrap webtabs для форм django

Question

Я столкнулся со следующей проблемой в моем проекте Django: у меня есть страница редактирования профиля, где я хочу, чтобы пользователь мог редактировать информацию своего профиля, которая разделена на вкладки, по которым он может перемещаться: профиль и расширенная информация.Однако страница загружается на вкладке «Профиль», но когда я перехожу на вкладку «Расширенная информация», она просто открывает эту вкладку под вкладкой «Профиль» и не «заменяет» первую вкладку второй.Следовательно, я получаю ошибку MultiValueDictKeyError, когда меняю только что-то в форме расширенной информации на этой вкладке.Как исправить ошибку с помощью вкладок, открывающихся друг под другом?Я подозреваю, что моя MultiValueDictKeyError тоже исчезает (но я не уверен).

HTML

{% extends "base.html" %}
{% load bootstrap3 %}

{% block content %}

<!-- Nav tabs -->
<div class="container profile">
    <div>
        <h1>Edit your details:</h1>
        <h3><strong><a href="{% url 'users:profile' %}">{{user.username}}</a></strong></h3>
    </div>
    <nav>
      <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Profile</a>
        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Extended information</a>
      </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
        <form method="post">
        {% csrf_token %}
        {% bootstrap_form basic_form %}
        <button name="basic_btn" class="btn btn-primary btn-sm" type="Submit" value="basic_form_value">Submit</button>
        </form>
      </div>
      <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
        <form method="post">
        {% csrf_token %}
        {% bootstrap_form ext_form %}
        <button name="ext_btn" class="btn btn-primary btn-sm" type="Submit" value="ext_form_value">Submit</button>
        </form>
      </div>
</div>

Views.py

def edit_profile(request):

    # https://groups.google.com/forum/#!topic/django-users/T9Y67_Nx2qo
    basic_form = EditBasicProfileForm(request.POST, instance=request.user)
    ext_form = EditExtendedProfileForm(request.POST, instance=request.user)

    if request.method == 'POST':
        if request.POST['basic_btn'] == "basic_form_value":
            basic_form.save()
            messages.success(request, ('Your profile was successfully updated!'))
            return redirect('users/profile')
        elif request.POST['ext_btn'] == "ext_form_value":
            ext_form.save()
            messages.success(request, ('Your profile was successfully updated!'))
            return redirect('users/profile')

    else:
        basic_form = EditBasicProfileForm(instance=request.user)
        ext_form = EditExtendedProfileForm( instance=request.user)
        args = {'basic_form': basic_form,'ext_form': ext_form}
        return render(request,'users/edit_profile.html',args)

Forms.py

class EditBasicProfileForm(UserChangeForm):

    class Meta:
        model = User
        fields = ('first_name', 
                 'last_name',
                 'email',
                 'password'
                 )

class EditExtendedProfileForm(forms.ModelForm):
    class Meta:
        fields = ('description','location','fav_genre','fav_book')
        model = Profile

    def __init__(self, *args, **kwargs):
        super().__init__(*args,**kwargs)
        self.fields['description'].label = 'Write a little bit about yourself'
        self.fields['location'].label = 'Where do you live?'
        self.fields['fav_genre'].label = 'What is your favorite genre?'
        self.fields['fav_book'].label = 'What is your favorite book?'

Любая помощь с благодарностью!