mbr/flask-bootstrap

Ready-to-use Twitter-bootstrap for use in Flask.

Flask-Bootstrap

Flask-Bootstrap packages Bootstrap into an extension that mostly consists of a blueprint named 'bootstrap'. It can also create links to serve Bootstrap from a CDN and works with no boilerplate code in your application.

Usage

Here is an example:

from flask_bootstrap import Bootstrap

[...]

Bootstrap(app)

This makes some new templates available, containing blank pages that include all bootstrap resources, and have predefined blocks where you can put your content.

As of version 3, Flask-Bootstrap has a proper documentation, which you can check for more details.

flask-bootstrap's Issues

Optional label

Add parameter for optional label in horizontal_field. This would very be useful when using SubmitField, since they usually don't have labels (as in official bootstrap doc for form-horizontal).

Thanks

The quick_form macro does not use the method parameter

The body of the macro has the form method hard coded as "post" instead of using the parameter.

jquery is not found when using BOOTSTRAP_SERVE_LOCAL = True setting

Hello,

if you use flask-bootstrap 3.0.2.1 with the option BOOTSTRAP_SERVE_LOCAL = True the file jquery.min.js is not found in the directory /static where the template base.html looks for. It is only avaible under /static/bootstrap/jquery.min.js over the webbrowser. So change the template or the place of jquery.min.js please.

Regards
pyfisch

Some glyphicons do not work with bootstrap 3.3.0

Hi,
I just noticed that some glyphicons do not work with bootstrap 3.3.0.

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-grain" aria-hidden="true"></span> Grain
</button>

Upgrading to bootstrap 3.3.2 solves the issue for me.

Add support for CDNs.

There should be a configuration switch that makes the templates use a CDN (like bootstrapcdn.com). Ideally:

• Configuration value BOOTSTRAP_USE_CDN: If true, use a CDN instead of serving static files from the server.
• Configuration value BOOTSTRAP_CDN_BASE: The base URL for the CDN. Files will be requested from this relative to the bootstrap folder in the bootstrap distribution zip. Defaults to: https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/

Add support for adding more javascripts and css-es ohter than bootstrap

It would be beneficially to specify extra jinja template blocks / hooks to provide extra CSS-es and JS.

My particular struggle: trying to add bootstrap-colorpicker and experiencing problems to specify extra CSS and JS files.

Unable to forward kwargs to SubmitField when using form_field macro

I've already opened this issue, but it was marked as closed although it is still not working
I just want to make sure it doesn't disappear.

The link to the bug is here:
#87

Thanks!

MultiFields Render

When I have a field that consist of multiple fields like MultiCheckboxField,QuerySelectMultipleField

class MultiCheckboxField(SelectMultipleField):
    widget = widgets.ListWidget(prefix_label=False)
    option_widget = widgets.CheckboxInput()

I get this problem:

I have 'fixed' this with:

{%- elif 'Multi' in field.type  -%}
  <div class="multiField">
    {% for item in field -%}
      {% call _hz_form_wrap(horizontal_columns, form_type, True, required=required) %}
        {{form_field(item,form_type,horizontal_columns,button_map)}}
      {% endcall %}
    {% endfor %}
  </div>

in wtf.html file.

Or other 'solution' line 116 in wtf.html file:

    {{field( class=  'multi' if 'Multi' in field.type else 'form-control', **kwargs)|safe}}

Is there some beter solution? Where I don't have to change 'flask-bootstrap' module?

ImportError: No module named flask.ext.wtf

I cloned the repo and tried setting up a project with the same import statements as your example,

from flask import Flask, render_template
from flask.ext.bootstrap import Bootstrap
from flask.ext.wtf import Form, TextField, HiddenField, ValidationError,
Required, RecaptchaField

I got the following error:

$python myproj.py
Traceback (most recent call last):
File "myproj.py", line 6, in
from flask.ext.wtf import Form, TextField, HiddenField, ValidationError, Required
File "/venv/local/lib/python2.7/site-packages/flask/exthook.py", line 86, in load_module
raise ImportError('No module named %s' % fullname)
ImportError: No module named flask.ext.wtf

Seems related to this issue in the flask-wtf integration?
wtforms/flask-wtf#46

Have they changed their package naming at WTF?

bootstrap-responsive.min.css not found using CDN

Hello,

When using the CDN option Flask-Bootstrap points at the following resource for bootstrap-responsive.min.css

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-responsive.min.css" rel="stylesheet">

however this does not seem to exist.

% curl -i https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-responsive.min.css
HTTP/1.1 404 Not Found
Date: Sun, 26 Aug 2012 15:31:57 GMT
Content-Type: text/html; charset=iso-8859-1
Content-Length: 373
Connection: keep-alive
Server: NetDNA-cache/2.2

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /twitter-bootstrap/2.1.0/css/bootstrap-responsive.min.css was not found on this server.</p>
<p>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.</p>
</body></html>

python 3 errors

in bootstrap_wtf.html, the method .iteritems() is used, which is incompatible with python 3.
.items() should be preferred, as it works both in py2 and py3

serve static non cnd content, in documentation

Improve docs, faq, how to serve the static contents from a proxy server in a for example, virtualenv installation

Thanks

wtf.quick_form: Support for multiple buttons

Previously there was support for buttons in addition to submit using quick_form (bootstrap 2.3.x). I haven't played with the latest version much, but looking at the macro it appears there's only support for the SubmitField type. I have some forms that use multiple buttons such as Cancel, any ideas on how I could make that still work?

Feedback

I really like the idea of flask-bootstrap but I don't like the versioning against bootstrap itself and the fact that static files are included.
Why not split the project in two?

• flask-bootstrap which is a collection of helpers/templates/macros to help building a bootstrap application with a small footprint
• flask-bootstrap-static that provides the static files just in case someone want them with just a pip call

Of course I could just use flask-bootstrap and override scripts/styles and other stuff to point to my custom setup but I'd still be bothered by flask-bootstrap updates just to update the static files and won't have a clear view of what changed.

Just sharing my point of view.

button.navbar-toggle.collapsed not visible.

The navbar toggle works, but is not visible. I can't seem to target it with custom css either. It happens in this sample index.html template:

Bootstrap 2.3.2 is Out

http://blog.getbootstrap.com/2013/05/17/bootstrap-2-3-2-released/

Cool project, thanks!

Suppress label in HiddenField

Hi,
I have the following issue. I have a HiddenField in my Form. It's OK with it's value, wtf.form_field does process is correctly however it still shows the label.
I think it's reasonable not to show label in case of HiddenField, what do you think?

Thanks,
Constantine

Unexpected escaped html

Fresh install. Creating hello world example:

#!/usr/bin/env python
# coding=utf-8

from flask import Flask, render_template
from flask.ext.bootstrap import Bootstrap

app = Flask(__name__)
Bootstrap(app)

app.config['BOOTSTRAP_USE_MINIFIED'] = True
app.config['BOOTSTRAP_USE_CDN'] = True
app.config['BOOTSTRAP_FONTAWESOME'] = True

@app.route('/', methods=('GET',))
def hello_world():
    return render_template('index.tpl', text='Hello World!')

if __name__ == '__main__':
    app.debug = True
    app.run()

Browsing http://127.0.0.1:5000/ I get this unexpected escaped html code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    &lt;link href=&#34;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css&#34; rel=&#34;stylesheet&#34;&gt;
    &lt;link href=&#34;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css&#34; rel=&#34;stylesheet&#34;&gt;
    &lt;!--[if IE 7]&gt;
    &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome-ie7.min.css&#34;&gt;
    &lt;![endif]--&gt;
    &lt;style&gt;
      body {
        padding-top: 60px;
      }
    &lt;/style&gt;
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">

index.tpl:

{% extends "bootstrap_responsive.html" %}
{% import "bootstrap_wtf.html" as wtf %}

{% block body_content %}
    <div class="container">
      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>{{ text }}</h1>
      </div>

    </div> <!-- /container -->
{% endblock %}

Fix for #39 did not make it into release 3.0.2.1

Sorry to be a pain, but the action = '.' is still present in the last official build on PyPI. Not sure how or why though, because the file on github is updated.

How to make a dropdown menu using flask-bootstrap?

This is my starting lines of layout.html

{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/fixes.html" as fixes %}
...

{% if current_user.is_authenticated() %}
              <li>                  
                <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">                    
                    <a class="dropdown-toggle" href="#">
                        <span></span>
                        {{ current_user.email }} <strong class="caret"></strong>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Your Bio Page</a></li>
                            <li><a href="#">Settings..</a></li>
                            <li class="divider"></li>
                            <li><a href=<li><a href='{{ url_for("logout") }}'>Выйти</a></li>
                        </ul>
                 </li>   
                </ul>

             </li>
 {% endif %}

I'm asking, because i can't explain why my dropdown doesn't work properly.
Why bootstrap.js don't loading?

Serve custom bootstrap from a subdirectory within static?

I'm trying to serve a custom version of bootstrap (basically a different theme) from the subdirectory custom_bootstrap within the application's static folder:

├── __init__.py
└── static
    └── custom_bootstrap
        ├── css
        ├── fonts
        └── js

The following config settings are used for flask-bootstrap:

BOOTSTRAP_SERVE_LOCAL = True

In the app, the StaticCDN is used:

# …
Bootstrap(app)
app.extensions['bootstrap']['cdns']['bootstrap'] = StaticCDN()
#…

The above serves the custom bootstrap from static/{css,js,fonts}. Setting the static_endpoint parameter of StaticCDN to something like 'static.custom_bootstrap' yields a routing error. Is there anything I'm missing here?

Addon

Hi!
Is there an "official" flask-bootstrap way to add an addon to fields?
If not: any suggestion on how to achieve this?

Thanks!

'required' field flag handling

Hi Marc,

Do you plan to extend the provided macros to support the 'required' form flag set by DataRequired and InputRequired validators?

If you don't consider it out of scope for the library's macros, I am happy to submit a PR.
The implementation that I have in mind would add another keyword attribute required to the quick_form and form_field macros that defaults to False and the result of

required and field.flags.required

would be passed on to the wtf's field macro which will add a required attribute to the input tag.

Where is bootstrap_base.html?

The documentation refers to a bootstrap_base.html file, and that file exists on the package on PyPI, but (seemingly) not in this repository. Is it generated somehow? Was it never actually commited to git? I'd like to be able to see the base template that I'm expected to have my other templates inherit from.

BOOTSTRAP_FONTAWESOME and .nav .dropdown-menu

Setting BOOTSTRAP_FONTAWESOME to True while make any .nav .dropdown-menu behave inappropriately.

script init come out escaped

Hi
I'm writting as a long shot but who knows
my script tags declared like this
block scripts
script(src=url_for('static', filename='js/jquery.min.js'), type="text/javascript", charset="utf-8")

come out totaly escaped like this
& lt;script src=& #34;/static/js/jquery.min.js& #34; type=& #34;text/javascript& #34; charset=& #34;utf-8& #34;& gt;& lt;/script& gt;
any idea ?

Is the "." default for a form action correct?

It seems to me that the best default for the action argument in wtf.quick_form() is None, which would cause the action attribute to be omitted from the form declaration.

The default is currently a dot, which I'm not sure is valid. I believe the HTML5 standard says that the action should be a valid URL or else it should be omitted. If it is omitted then the form is submitted to the current URL.

Unable to forward kwargs to SubmitField when using form_field macro

I use angular some of the times so I use wtf.form_field many times.
I want to forward ng-click=run() but for some reason kwargs are not forwarded when the field type is SubmitField in the form_field macro.

I tried to fork and fix it but my Jinja2 knowledge is not enough, thanks!

Add a custom_js block at the end for other scripts using JQuery

I was trying to use flask-bootstrap with datatables jquery plugin to display my data but this was not working because the JS gets loaded at the end and I need to put the datatables script after the jquery for it to work. I worked around this by adding a custom_js block after the body_content block where I have my initialization code. Do you have any better method or is this a valid workaround ?

Bootstrap Flash Error

I am using macro flashed_messages from utils.html
Flask module flask-admin/user use:

flash(u'Invalid password provided', 'error')

But there exist no error alert (css class) in Bootstrap only danger. And I get a white alert.

I 'solved' it by copying alert-danger of Bootstrap CSS to my css file and changed it to alert-error

/**** Bootstrap flash alert Error  ****/
/**** Copy from Bootstrap alert danger  ****/
.alert-error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert-error hr {
  border-top-color: #e4b9c0;
}
.alert-error .alert-link {
  color: #843534;
}

It can also be solve to add this in the utils.html file

{% if category=='error' %}
             {% set category='danger' %}
 {% endif %}

If other people have the same problem, could this be added to the file in next release?

Thanks

trying to use url_prefix with Bootstrap(app)

I'm not terribly familiar with Flask, so perhaps this question is in the wrong place, but I'm trying to allow my flask app to be loaded with a url_prefix i.e. http://domain.com/myapp. However, whenever I use redirect(url_for('index')), it redirects to /

I tried adding another blueprint, but perhaps it interferes with the Bootstrap blueprint(?)

(Is there a | what's the best) way to mount my Bootstrapped flask app in a subfolder?

Multiple values in button_map

Hi

button_map parameter of form_field and quick_form takes a map of names/classes used to generate the form. { 'submit': 'primary' }, for example.

Sometimes, we need to pass more than one class to the submit field. We can already do this : { 'submit': 'primary btn-lg' } but this is really ugly.

I think the value part should also accept iterables. Typically, we should be able to do { 'submit': ('primary', 'lg') }

Thanks.

Support RecaptchaField in quick_form

Currently if you use a RecaptchaField and quick_form, the field with be escaped.

It would be nice to have the field correctly displayed so one can continue using quick_form for this cases.

"No RECAPTCHA_PRIVATE_KEY config set" in sample_application

This is the last error line.
File "D:\Dev\Flask\project\venv\lib\site-packages\flask_wtf\recaptcha\validators.py", line 56, in _validate_recaptcha
raise RuntimeError("No RECAPTCHA_PRIVATE_KEY config set")

I think you need to add this key to the config in then sampla_application

No title block in base.html

HI Marc, going through your extension I got stuck as to why the title block in my template was not showing , but when I checked my base.html I found out that it does not have a title block while in the documentation and on github it's there

https://github.com/mbr/flask-bootstrap/blob/master/flask_bootstrap/templates/bootstrap/base.html#L7

http://pythonhosted.org/Flask-Bootstrap/basic-usage.html#available-blocks

So , either remove that from the docs or add it to next version of this extension , Thanks for the extension !!

checkbox on form_field does not display error message

I might be missing something here, but it looks like field.errors is not checked in form_field macro for checkbox type and the error message is not being displayed.

I was following the example at http://flask.pocoo.org/docs/0.10/patterns/wtforms/ for BooleanField with Required validation.

class ExampleForm(Form):
    ...
    checkbox_field = BooleanField('This is a checkbox',
                                  description='Checkboxes can be tricky.',
                                  validators=[Required()])

My quick fix still need some work:

{% if field.widget.input_type == 'checkbox' %}
  {% call _hz_form_wrap(horizontal_columns, form_type, True, required=required) %}

    {% if field.errors %}<div class="has-warning">{% endif %}

        <div class="checkbox">
          <label>
            {{field()|safe}} {{field.label.text|safe}}
          </label>
        </div>

        {%- if field.errors %}
          {%- for error in field.errors %}
                <p class="help-block">{{error}}</p>
          {%- endfor %}
        {% endif %}

    {% if field.errors %}</div><!-- /has-warning-->{% endif %}

  {% endcall %}

TypeError on using any wtf imported macros

Hello,

Just started using flask-bootstrap and I'm very happy on how easy it is to get things done quickly and cleanly.

But I'm trying to use the macros that included with the package and I'm getting this error whenever I'm trying to use the macros

unbound method hidden_tag() must be called with UserForm instance as first argument (got nothing instead)

This is what Userform looks like:

from flask_wtf import Form
from wtforms import TextField, PasswordField, BooleanField
from wtforms.validators import Required, EqualTo, Email, Length


class UserForm(Form):
    username = TextField('Username', [Required()])
    password = PasswordField('Password',
                             [Required(), Length(min=8, message="The password needs to be at least 8 characters long")])
    email = TextField('Email', [Required(), Email()])
    role = BooleanField('Administrator', [Required()])

And I'm using it in my template like this:

{% extends "base_admin.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block admin_rightcolumn %}
  {{ wtf.quick_form(form, button_map={'submit_button': 'primary'}) }}
{% endblock %}

Thanks!

Bootstrap 3 support

Not sure if you support RC releases but it'd be nice. :)

Load html5shim locally if not explicitly set otherwise

Unlike all other Flask-Bootstrap resources, html5shim is loaded from http://html5shim.googlecode.com/svn/trunk/html5.js by default. This breaks SSL and defers trust to googlecode.com.

Readd FontAwesome

Hello,

can you please readd Fontawesome, which was removed in Version 3? Font Awesome is more free than Glyphicons and has more icons.

Regards
Pyfisch

Multicheckbox Specialty Form Trick

I'm using the muli-checkbox trick that is on the WTForms documentation (http://wtforms.readthedocs.org/en/2.0/specific_problems.html).

When the form renders using the {{ wtf.quick_form(form) }} jinja2 method my field renders correctly except it will have a border around where the SelectMultipleField would be (see attached image).

Pagination with others params

Hi,
I encountered some problems with routes like:

@recipes.route('/categories/<title>', defaults={'page': 1})
@recipes.route('/categories/<title>/page/<int:page>')

There is no way currently to pass title to render_pagination helper for url_for.
I handle it like that in a project, but I don't think it's a clean way to do that.

I need LICENCE file

Hello,

I'm Fedora packager, I'm packaging flask-bootstrap [0], but, I need the LICENCE file in the repo. Please, add the file for terminate the package and push to official Fedora repo.

Regards!

[0] https://bugzilla.redhat.com/show_bug.cgi?id=983843

Include jquery.min.map with jQuery

Using included static jquery results in a 404 for jquery.min.map .
Since for now you're shipping jQuery please include jquery.min.map as well.

UndefinedError: there is no parent block called 'scripts'

Hi, sorry I didn't go through the source code but was having issues using the scripts block per the documentation page and got an undefined error. I'm using Flask 0.9 and Python 3.

Thanks for the help and let me know if you need more details!

Don't limit media to screen when importing bootstrap.css

The base template limits the css stylesheet to screen media, but bootstrap also defines styles for print media and users could override the default styles if they wish to. Keeping out printed media means the user needs to do a new stylesheet declaration with the right media (duplicating the already downloaded contents), or changing the package (flask-bootstrap) provided base.html templante, which are both suboptimal solutions.

Could the media="screen" attribute in the base.html template could be changed to media="all"?

Validation in sample application missing

Currently, the /sample-application/init.py file has definied

field2 = TextField('Second Field', description='This is field two.',
                       validators=[Required()])

But when running, no validation errors (e.g. "Missing entry in Second Field") are print out to browser.

Update to bootstrap 2.2.1

2.2.0 contains some additional components, 2.2.1 is a hotfix. See https://github.com/twitter/bootstrap/wiki/Changelog

using flask-bootstrap with jQeury 1.x

I'm trying to use flask-bootstrap to support IE 8 (I know, I know...). However, it seems like the default version of jQuery is 2.x. Is there a way to set the version manually or do I need to overwrite the templates?

init_app() should not assign "app" to "self"

The init_app() function contains self.app = app, but this should only be done in the constructor (and only if app is not None), as noted in the extension development guide at http://flask.pocoo.org/docs/extensiondev/#the-extension-code :

As you noticed, init_app does not assign app to self. This is intentional! Class based Flask extensions must only store the application on the object when the application was passed to the constructor. This tells the extension: I am not interested in using multiple applications.