Advanced Usage — Bootstrap-Flask 2.5.x documentation

# Advanced Usage

## Form Button Customization

### Button Style

When you use form related macros, you have a couple ways to style buttons. Before we start to dive into the solutions, let’s review some Bootstrap basics: In Bootstrap 4, you have 9 normal button style and 8 outline button style, so you have 17 button style classes below:

- btn-primary

- btn-secondary

- btn-success

- btn-danger

- btn-warning

- btn-info

- btn-light

- btn-dark

- btn-link

- btn-outline-primary

- btn-outline-secondary

- btn-outline-success

- btn-outline-danger

- btn-outline-warning

- btn-outline-info

- btn-outline-light

- btn-outline-dark

Remove the `btn-` prefix, you will get what we (actually, I) called “Bootstrap button style name”:

- primary

- secondary

- success

- danger

- warning

- info

- light

- dark

- link

- outline-primary

- outline-secondary

- outline-success

- outline-danger

- outline-warning

- outline-info

- outline-light

- outline-dark

You will use these names in Bootstrap-Flask. First, you configuration variables `BOOTSTRAP_BTN_STYLE` to set a global form button style:

    from flask import Flask
    from flask_bootstrap import Bootstrap

    app = Flask(__name__)
    bootstrap = Bootstrap(app)

    app.config['BOOTSTRAP_BTN_STYLE'] = 'primary'  # default to 'secondary'

Or you can use `button_style` parameter when using `render_form`, `render_field` and `render_form_row`, this parameter will overwrite `BOOTSTRAP_BTN_STYLE`:

    {% from 'bootstrap4/form.html' import render_form %}

    {{ render_form(form, button_style='success') }}

Similarly, you can use this way to control the button size. In Bootstrap 4, buttons can have 4 sizes:

- btn-sm

- btn-md (the default size)

- btn-lg

- btn-block

So, the size names used in Bootstrap-Flask will be:

- sm

- md (the default size)

- lg

- block

Now you can use a configuration variable called `BOOTSTRAP_BTN_STYLE` to set global form button size:

    from flask import Flask
    from flask_bootstrap import Bootstrap4

    app = Flask(__name__)
    bootstrap = Bootstrap4(app)

    app.config['BOOTSTRAP_BTN_SIZE'] = 'sm'  # default to 'md'

there also a parameter called `button_size` in form related macros (it will overwrite `BOOTSTRAP_BTN_SIZE`):

    {% from 'bootstrap4/form.html' import render_form %}

    {{ render_form(form, button_size='lg') }}

if you need a block level small button (`btn btn-sm btn-block`), you can just do something hacky like this:

    app.config['BOOTSTRAP_BTN_SIZE'] = 'sm btn-block'

What if I have three buttons in one form, and I want they have different styles and sizes? The answer is `button_map` parameter in form related macros. `button_map` is a dictionary that mapping button field name to Bootstrap button style names. For example, `{'submit': 'success'}`. Here is a more complicate example:

    {% from 'bootstrap4/form.html' import render_form %}

    {{ render_form(form, button_map={'submit': 'success', 'cancel': 'secondary', 'delete': 'danger'}) }}

It will overwrite `button_style` and `BOOTSTRAP_BTN_STYLE`.

## Form Checkbox Customization

### Rendering Switch

Bootstrap offers the rendering of a checkbox (or check) as a switch. In Bootstrap-Flask, simply use the built-in class `SwitchField()` instead of `BooleanField()`. See also the example application.

## Form Input Customization

### Rendering Label

Bootstrap offers control for rendering text. This is supported for inputs of a form by adding `render_kw={'label_class': '... ...'}` to the field constructor. In order to control the rendering of the label of a field, use `render_kw={'label_class': '... ...'}`. See also the example application.

### Rendering Radio Label

Similar support exists for the rendering of the labels of options of a `RadioField()` with ``render_kw={'radio_class': '... ...'}`. See also the example application.

### Rendering Description

Use `render_kw={'description_class': '... ...'}` for controlling the rendering of a field’s description. See also the example application.

## Bootswatch Themes

Bootswatch is a collection of free and open source themes for Bootstrap. If you are using `bootstrap.load_css()` to include Bootstrap resources. Then you can set Bootswatch theme with configuration variable `BOOTSTRAP_BOOTSWATCH_THEME`.

The available theme names are: ‘cerulean’, ‘cosmo’, ‘cyborg’, ‘darkly’, ‘flatly’, ‘journal’, ‘litera’, ‘lumen’, ‘lux’, ‘materia’, ‘minty’, ‘pulse’, ‘sandstone’, ‘simplex’, ‘sketchy’, ‘slate’, ‘solar’, ‘spacelab’, ‘superhero’, ‘united’, ‘yeti’.

For Bootstrap 5, besides these, you can also use: ‘morph’, ‘quartz’, ‘vapor’, ‘zephyr’.

Here is an example to use `lumen` theme:

    app.config['BOOTSTRAP_BOOTSWATCH_THEME'] = 'lumen'

You can find these themes on https://bootswatch.com.