Modal doesn't open with django

I'm having a little problem with a modal in django.

I have a link which calls an id and the id is a modal. However, the modal isn't opening. I'm pretty sure that this is happening because the link is inside a "automatic" form, but I'm new in django and python so I have no idea.

The code is:

{% block body %}
    <div class="col-lg-12 page-content">
        <h1 class="content-title">Meus Dados</h1>
        <hr class="star-light">
        <div class="form-content">
            <form class="form-horizontal" method = 'POST' action="/user/edituser/">
                {% csrf_token %}
                {% for field in form_user %}
                    {% bootstrap_field field exclude="password,repeat_password" %}
                {% endfor %}
                <div class="button-div">
                    <a class="btn btn-info btn-block btn-password" href="#change-password"
                        data-toggle="modal">Alterar senha</a>
                    {% buttons %}
                        <button class="btn btn-success btn-block btn-edit" type = 'submit'>Salvar Dados</button>
                    {% endbuttons %}
                </div>
            </form>
            <a class="btn btn-danger btn-block btn-delete" href="/user/delete" name="delete">Excluir minha conta</a>
        </div>
    </div>
    <div class="modal hide" id="change-password">
        <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
            <p class="modal-title" id="myModalLabel">Change Password</p>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="modal-col col-sm-12">
                    <div class="well">
                        <form method="post" id="passwordForm">
                            <input type="password" class="input-lg form-control" name="password1"
                                id="password1" placeholder="New Password">
                            <input type="password" class="input-lg form-control" name="password2"
                                id="password2" placeholder="Repeat Password">
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-success btn-bloc">Alterar Senha</a>
        </div>
    </div>
{% endblock %}

Any doubts, please ask. Thanks.

Change your <a> tag to the following:

<a class="btn btn-info btn-block btn-password" href="#"
    data-toggle="modal" data-target="#change-password">Alterar senha</a>

At least this is how I do it in my Django templates. As I think @souldeux was trying to say, you need to use the data-target attribute to specify the modal itself, rather than the href; I usually just use # for that in cases like this.

Also, make sure that you are not only loading the bootstrap css code, but also the bootstrap js libraries. In other words, make sure you have the following (or some equivalent) in your template:

<!-- Latest compiled and minified JavaScript (at the time of this post) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

In addition to your css:

<!-- Latest compiled and minified CSS (at the time of this post) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Which I assume you already have, because otherwise things would look weird.