Bootstrap in Python File .py

Question

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

Again demo site is: toolshare-daraghmeh.herokuapp.com

TheAce
– TheAce

2015-03-29 18:35:23 +00:00
Commented Mar 29, 2015 at 18:35 — TheAce
– TheAce, Commented Mar 29, 2015 at 18:35

Selcuk · Accepted Answer · 2015-03-29 18:41:40Z

1

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.

edited Mar 29, 2015 at 18:41

answered Mar 29, 2015 at 18:39

Selcuk

60.1k12 gold badges114 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

TheAce Over a year ago

Hey Selcuk! We meet again let me test this out :D

TheAce Over a year ago

I am just confused if I am already using Bootstrap in my website why do I have to add a django library to use bootstrap again?

TheAce Over a year ago

New Issue sadly ;( I have editted my question to reflect the new issue. It would be great to get your help again @Selcuk

Selcuk Over a year ago

Please leave your question as it is and ask a new one so that future visitors to this question can make use of the answer. I rolled back your edits so that you can ask another question. But to shortly answer your new question; you need to apply method (2) if you want to enter the exact HTML to format your input fields.

TheAce Over a year ago

To @Selcuk created new question @ stackoverflow.com/questions/29335382/…

Collectives™ on Stack Overflow

Bootstrap in Python File .py

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related