bootstrap 3 navbar alignment issues with login? - css

Question

I am having couple of problems with implementing login form in bootstrap 3 in navbar.
I have attached the image below:
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.
The color on "forgot password" is blue which I want it to be white (or red).
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.