CODEWITHSUNDEEP
pythonhtmlcssdjangotwitter-bootstrap
TheAce
TheAce

Reputation: 122

Bootstrap in Python File .py

I have a quick question, how can I make this boring/ordinary fields have some life with bootstrap? My site has bootstrap already which is in my .html files via base.html (template file) but I am not sure how do make these fields to have bootstrap. It would be great to get the help of the community. Please let me know if I should included anything. Demo Site: http://toolshare-daraghmeh.herokuapp.com/

Python File:

class LogInForm(forms.Form):

    username = forms.CharField(label='Username', max_length=10)
    password = forms.CharField(label='Password', max_length=20, widget=forms.PasswordInput())

HTML File:

{% extends 'base.html' %}


{% block content %}
<div class="jumbotron">
<h1><font size="275">Log In</font></h1>
</div>
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}

{% if not isUserLoggedIn %}
<div class="alert alert-success alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Wanting to Test?!</strong><br>
  Username: king<br>
  Password: test123
  </div>
{% if loggedIn %}

<div class="alert alert-info" role="alert">

Congratulations, you've logged in! Now redirecting you to the homepage...
</div>
<meta http-equiv="refresh" content="3;url=http://localhost:8000/">
{% else %}

<form class="form-horizontal" name="LoginForm" method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <div class="col-md-6 column">
    <button class="btn btn-primary btn-xlarge" type="submit">Sign In</button>
    </div>
</form>
<div class="col-md-6 column">
<form action="../../"><button class="btn btn-danger btn-xlarge" type="submit">Cancel</button>
</div>
{% endif %}
{% else %}
<div class="alert alert-warning" role="alert">
You're already logged in!
</div>

{% endif %}
{% endblock %}</form>

Photo: enter image description here Thank you in advance

Hoping to have the basic fields become Bootstrap input groups in order to style my site more. 

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

enter image description here

Upvotes: 0

Views: 1576

Answers (1)

Selcuk
Selcuk

Reputation: 59174

There are two ways to accomplish this:

1) Use a third party library, for example django-bootstrap3:

{% load bootstrap3 %}
...
<form class="form-horizontal" name="LoginForm" method="post">
    {% csrf_token %}
    {% bootstrap_form form %}
    {% buttons %}
        <button type="submit" class="btn btn-primary">
            {% bootstrap_icon "star" %} Sign In
        </button>
    {% endbuttons %}
</form>

PS: Don't forget to add the application bootstrap3 to your INSTALLED_APPS in settings.py otherwise it won't work.

2) Render your form fields manually:

<form class="form-horizontal" name="LoginForm" method="post">
    {% csrf_token %}
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">@</span>
        <input name="{{ form.username.html_name}}" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    </div>
    ...
</form>

Please note that in method (2) you will also need to deal with form and field errors manually. See docs for details.

Upvotes: 1

Related Questions