bootstrap 3 navbar alignment issues with login?

Question

I am having couple of problems with implementing login form in bootstrap 3 in navbar. I have attached the image below:

1. I want "Remember me" and "Forgot password" to align with input boxes for username and password right below it. but they are not well-aligned.

2. The color on "forgot password" is blue which I want it to be white (or red).

3. The font of the "Remember me" and "forgot password" are inconsistent with placeholders I placed in form.

how can I fix these issues?

    <div class="navbar-collapse collapse">
              <form class="navbar-form navbar-right" role="form" action="" method="post">
              {% csrf_token %}
                <div class="form-group {% if login_failed %} has-error {% endif %}">
                {{ form.username.label_tag }}
                  <input type="text" placeholder="Uname or Email" class="form-control input-sm" {% if login_failed %}
                         id = "inputError" {% endif %} name="username">
                </div>
                <div class="form-group {% if login_failed %} has-error {% endif %}">
                  <input type="password" placeholder="Password" class="form-control input-sm" name="password"
                  {% if login_failed %} id = "inputError" {% endif %}>
                </div>
                <button type="submit" class="btn btn-success">Sign in</button><br>
                <div class="form-group">
                  <div class="col-xs-12">
                    <label><input type="checkbox" value="remember-me">Remember me</label>
                    <label><a class="help-inline" href="{% url 'django.contrib.auth.views.password_reset' %}">Forgot password?</a></label>
              </div>
            </div>

Answer 1

Replace the class "navbar-form" by "form-inline" in tag .

Like said, apply a class directly to the tag "Forgot password", or more generally :

.navbar-collapse a{color:red}

http://jsfiddle.net/u2pNA/

Answer 2

I'm not familar with django, but i'll try to see if I can help with your bootstrap issues. To seperate the remember me and the forgot password you can do something like this. Seperating into two columns( 2x col-xs-6) instead of using one(col-xs-12)

<div class="form-group">
              <div class="col-xs-6">
                <label><input type="checkbox" value="remember-me">Remember me</label</div><div class="col-xs-6"><label><a class="help-inline" href="{% url'django.contrib.auth.views.password_reset' %}">Forgot password?</a></label>
          </div>

To change the color of the Forgot password to white, you would need to set a class on that link.

so perhaps something like

 .navbar .form-group a{color:#FFF}

Hope that helps a bit. Good luck.