PHPackages                             grizzlylab/ui-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. grizzlylab/ui-bundle

ActiveSymfony-bundle[Templating & Views](/categories/templating)

grizzlylab/ui-bundle
====================

UI Twig helpers for Twitter Bootstrap 3

1.4.3(4y ago)216.1k↓50%MITPHPPHP ^7.4||^8.0

Since Nov 19Pushed 4y ago1 watchersCompare

[ Source](https://github.com/grizzlylab/ui-bundle)[ Packagist](https://packagist.org/packages/grizzlylab/ui-bundle)[ Docs](https://github.com/grizzlylab/UIBundle)[ RSS](/packages/grizzlylab-ui-bundle/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (2)Versions (33)Used By (0)

GrizzlylabUIBundle
==================

[](#grizzlylabuibundle)

UI Twig helpers (alert, modal,...) for Twitter Bootstrap 3 and others. Easy way to generate redundant HTML (HTML only, not JS or CSS).

### 1. Installation

[](#1-installation)

- `composer require 'grizzlylab/ui-bundle@dev-master'`
- in AppKernel.php: `new Grizzlylab\Bundle\UIBundle\GrizzlylabUIBundle()`
- optionnal : Install Boostrap 3 if you will use the default configuration

    ```

    ```

### 2. Configuration

[](#2-configuration)

#### Basic configuration (to use defaults)

[](#basic-configuration-to-use-defaults)

```
#app/config/config.yml
grizzlylab_ui:
    alert: ~ #enable "alert" helper
    modal: ~ #enable "modal" helper
    modal_trigger: ~ #enable "modal_trigger" helper
    truncate: ~ #enabled "trigger" helper (only available as a filter, not a function)

```

#### Complete default configuration

[](#complete-default-configuration)

```
# Default configuration for "GrizzlylabUIBundle"
grizzlylab_ui:
    alert:
        template:             'GrizzlylabUIBundle::alert.html.twig'
        translation_domain:   messages
        translation_parameters:
            %%strong_start%%: ''
            %%strong_end%%:   ''
        translate:            true
        escape_message:       true
        escape_prefix:        false
        dismissible:          false
        dismiss_button:       '×'
        display_prefix:       true
        context:              info # One of "info"; "success"; "warning"; "danger"
        prefixes:
            info:                 ' '
            success:              ' '
            warning:              ' '
            danger:               ' '
    modal:
        template:             'GrizzlylabUIBundle::modal.html.twig'
        backdrop:             'true' # One of "true"; "false"; "static"
        keyboard:             'true' # One of "true"; "false";
        id:                   modal
        fade:                 true
        size:                 medium # One of "small"; "medium"; "large"
        escape_title:         true
        escape_body:          true
        translate_title:      true
        translate_body:       true
        title_markup:         h1
        title_translation_domain:  messages
        title_translation_parameters:
            %%strong_start%%: ''
            %%strong_end%%:   ''
        body_translation_domain:  messages
        body_translation_parameters:
            %%strong_start%%: ''
            %%strong_end%%:   ''
        dismiss_button:       '×'
        keep_default_footer_buttons: true
        footer_raw_prepend: ''
        footer_raw_append: ''
        footer_buttons:
            -   #there is a close button in the footer by default
                link:                false
                escape:              true
                translate:           true
                dismiss:             true
                context:             default
                label:               grizzlylab_ui.modal.close
    modal_trigger:
        template:             'GrizzlylabUIBundle::modal_trigger.html.twig'
        context:              info # One of "info"; "success"; "warning"; "danger"
        escape:               true
        translate:            true
        translation_domain:   messages
        translation_parameters:
            %%strong_start%%: ''
            %%strong_end%%:   ''
        size:                 medium # One of "small"; "medium"; "large"
        is_link:              false
    truncate_to_tooltip:
        template:             'GrizzlylabUIBundle::truncate.html.twig'
        length:               30
        preserve:             false
        separator:            '...'
        tooltip_placement:    'top'  #use one of these: top, right, bottom, left

```

### 3. Use (in Twig)

[](#3-use-in-twig)

Tips:

- Almost each option defined in grizzlylab\_ui (config.yml) can be overridden.
- For all available options, please check [UIComponentExtension.php](https://github.com/grizzlylab/ui-bundle/blob/master/Twig/UIComponentExtension.php) (functions "alert", "modalTrigger" and "modal")

#### a) "Alert" Helper:

[](#a-alert-helper)

Examples:

Function:

```
{{ alert('Your form is not valid', {'context': 'danger'} }) }}
{{ alert('Your form is not valid', {'context': 'danger', 'display_prefix': false} }) }}
{{ alert('Your form is not valid', {'context': 'danger', 'prefix': ' '} }) }}
#You can even override default attributes:
{{ alert('Your form is not valid', {'attr': {'id': 'my-id', class': 'my-class'} }) }}

```

Filter:

```
{{ 'your form is not valid'|alert }}

```

#### b) "Modal" and "Modal Trigger" helpers:

[](#b-modal-and-modal-trigger-helpers)

Examples:

Function:

```
#trigger
{{ modal_trigger('my trigger label') }}
#modal
{{ modal('my modal body', {'title': my modal title'}) }}

```

Filter:

```
#trigger
{{ 'my trigger label'|modal_trigger }}
#modal
{{ 'my modal body'|modal({'title': my modal title'}) }}

```

#### c) "truncate\_to\_tooltip" filter

[](#c-truncate_to_tooltip-filter)

This filter depends on the "truncate" filter from the Twig "Text" extension () For performance reasons, you must enable Bootstrap tooltips () Then, you can simply use the filter like this:

```
#will truncate the text and show the entire text in a tooltip (when mouse is over the truncated text)
{{ 'my very long text'|truncate_to_tooltip }}
{{ 'my very long text'|truncate_to_tooltip(length, options) }}

```

If you use Bootstrap 3 (default), compliant HTML will be generated ([alert](http://getbootstrap.com/components/#alerts),[modal](http://getbootstrap.com/javascript/#modals)).

License
-------

[](#license)

This bundle is under the MIT license.

###  Health Score

38

—

LowBetter than 85% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity27

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity79

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~75 days

Recently: every ~127 days

Total

32

Last Release

1490d ago

PHP version history (4 changes)1.0.0PHP >=5.4

1.2.0PHP ^7.1

1.3.5PHP ^7.4

1.4.3PHP ^7.4||^8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/e3ade683eeb1b3ea698bb6a8712378758bdcd1a3f01ff35c343aa0821e831654?d=identicon)[grizzlylab](/maintainers/grizzlylab)

---

Top Contributors

[![grizzlylab](https://avatars.githubusercontent.com/u/2612537?v=4)](https://github.com/grizzlylab "grizzlylab (60 commits)")

---

Tags

uibootstrapuser-interface

### Embed Badge

![Health badge](/badges/grizzlylab-ui-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/grizzlylab-ui-bundle/health.svg)](https://phpackages.com/packages/grizzlylab-ui-bundle)
```

###  Alternatives

[mopa/bootstrap-bundle

Easy integration of twitters bootstrap into symfony2

7042.9M33](/packages/mopa-bootstrap-bundle)[braincrafted/bootstrap-bundle

BraincraftedBootstrapBundle integrates Bootstrap into Symfony2 by providing templates, Twig extensions, services and commands.

3932.0M33](/packages/braincrafted-bootstrap-bundle)[symfony/ux-toolkit

A tool to easily create a design system in your Symfony app with customizable, well-crafted Twig components

1432.0k](/packages/symfony-ux-toolkit)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)