Skip to main content

Minimalistic fork of Flask-Bootstrap with jQuery UI Bootstrap replacing normal Bootsrap

Project description

Flask jQuery Ui Bootstrap

Flask-JqueryUiBootstrap is minimalistic fork of Flask-Bootstrap project. This project packages Twitter’s Bootstrap with jQuery UI and is based on jQuery UI Bootstrap project.

If you don’t need jQuery UI Bootstrap is strongly recommended to use better original plugin Flask-Bootstrap.


Here is an example:

from flask.ext.jqueryuibootstrap import Bootstrap



This makes base layout templates available: jqueryuibootstrap_base.html. This layout file have predefined blocks where you can put your content. The core block to alter is body_content, otherwise see the source of the template for more possibilities.


A few macros are available to make your life easier. These need to be imported (I recommend create your own base.html template that extends one of the bootstrap base templates first and including the the macros there).

An example base.html:

{% extends "jqueryuibootstrap_base.html" %}
{% import "jqueryuibootstrap_wtf.html" as wtf %}


The jqueryuibootstrap_wtf template contains macros to help you output forms quickly. The most basic way is using them as an aid to create a form by hand:

<form class="form form-horizontal" method="post">
  {{ form.hidden_tag() }}
  {{ wtf.form_errors(form, "only") }}

  {{ wtf.horizontal_field(form.field1) }}
  {{ wtf.horizontal_field(form.field2) }}

  <div class="form-actions">
     <button name="action_save" type="submit" class="btn btn-primary">Save changes</button>

However, often you just want to get a form done quickly and have no need for intense fine-tuning:

{{ wtf.quick_form(form) }}

Configuration options

There are a few configuration options used by the templates:





Include the default IE-fixes that are usually included when using bootstrap.



If set, include Google Analytics boilerplate using this account.


Either install from github using pip or from PyPI.

A note on versifying

Flask-JqueryUiBootstrap tries to keep some track of jQuery UI Bootstrap releases. Versifying is usually in the form of x.y.z of jQuery UI Bootstrap version with .z micro version of Flask extension Package. For example, a version of bundles version 0.5.0 of jQuery UI Bootstrap version and is initial release of Flask-JqueryUiBootstrap containing that version.


  1. How can I add custom javascript to the template?

    Use Jinja2’s super() in conjunction with the bootstrap_js_bottom block. The super-function adds the contents of a block from the parent template, that way you can even decide if you want to include it before or after jQuery/bootstrap. Example:

    {% block bootstrap_js_bottom %}
      <script src="my_app_code.js">
    {% endblock %}


  1. We are open for help.

History (2013-08-26)

  • Initial version

Project details

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page