Twitter Bootstrap Form

Download

Install

settings.py

Add the application geelweb.django.twitter_bootstrap_form to your INSTALLED_APPS

INSTALLED_APPS = (
    ...
    'geelweb.django.twitter_bootstrap_form'
)
Html template

You obly have to load the filters and use them

{% load twitter_bootstrap %}

Default styles

Legend

Example block-level help text here.

# forms.py
class DefaultForm(forms.Form):
    label_name = forms.CharField(max_length=100,
                                 help_text="Example block-level help text here.",
                                 widget=forms.TextInput(attrs={'placeholder': 'Type something...'}))
    check_me_out = forms.BooleanField(required=False)

# template.html
{% load twitter_bootstrap %}

<form>
    <fieldset>
        <legend>Legend</legend>
        {{ form|twitter_bootstrap }}
        <button type="submit" class="btn">Submit</button>
    </fieldset>
</form>

Search Form

# forms.py
class SearchForm(forms.Form):
    query = forms.CharField(max_length=100,
                            widget=forms.TextInput(attrs={'class': 'input-medium search-query'}))

# template.html
{% load twitter_bootstrap %}

<form class="form-search">
    {{ form|twitter_bootstrap:"search" }}
    <button type="submit" class="btn">Search</button>
</form>

Inline Form

# forms.py
class LoginForm(forms.Form):
    email = forms.EmailField(max_length=100,
                             widget=forms.TextInput(attrs={'placeholder': 'Email'}))
    password = forms.CharField(max_length=100,
                               widget=forms.PasswordInput(attrs={'placeholder': 'Password'}))
    remember_me = forms.BooleanField(required=False)

# template.html
{% load twitter_bootstrap %}

<form class="form-inline">
    {{ form|twitter_bootstrap:"inline" }}
    <button type="submit" class="btn">Sign in</button>
</form>

Horizontal Form

# forms.py
class LoginForm(forms.Form):
    email = forms.EmailField(max_length=100,
                             widget=forms.TextInput(attrs={'placeholder': 'Email'}))
    password = forms.CharField(max_length=100,
                               widget=forms.PasswordInput(attrs={'placeholder': 'Password'}))
    remember_me = forms.BooleanField(required=False)

# template.html
{% load twitter_bootstrap %}

<form class="form-horizontal">
    {{ form|twitter_bootstrap:"horizontal" }}
    <div class="control-group">
        <div class="controls">
            <button type="submit" class="btn">Sign in</button>
        </div>
    </div>
</form>

Checkboxes and radios

Default (stacked)

# forms.py
CHOICES = (
        ('option1', "Option one is this and that—be sure to include why it's great"),
        ('option2', "Option two can be something else and selecting it will deselect option one"),
        )

class MyForm(forms.Form):
    opt1 = forms.BooleanField(label="Option one is this and that—be sure to include why it's great")
    radio = forms.ChoiceField(widget=forms.RadioSelect, choices=CHOICES)

# template.html
{% load twitter_bootstrap %}

<form>
    {{ form|twitter_bootstrap }}
</form>

Inline checkboxes

# forms.py
class MyForm(forms.Form):
    opt1 = forms.BooleanField(label="1")
    opt2 = forms.BooleanField(label="2")
    opt3 = forms.BooleanField(label="3")

# template.html
{% load twitter_bootstrap %}

<form>
    {{ form|twitter_bootstrap:"inline" }}
</form>

Selects

# forms.py
SELECT_CHOICES = (
        ('1', '1'),
        ('2', '2'),
        ('3', '3'),
        ('4', '4'),
        ('5', '5'),
        )

class MyForm(forms.Form):
    select1 = forms.ChoiceField(choices=SELECT_CHOICES, label="")
    select2 = forms.ChoiceField(widget=forms.SelectMultiple, choices=SELECT_CHOICES, label="")

# template.html
{% load twitter_bootstrap %}

<form>
    {{ form|twitter_bootstrap }}
</form>

Fork me on GitHub