Include Bootstrap

Include bootstrap css and js to HTML:



Init tooltips:


Then use hasTooltip in element class to enable tooltip.

<a class="hasTooltip" title"Tooltip Text">...</a>

Custom tooltip class:



Use Awesome Bootstrap Checkboxes:


// Or use font-awesome icons



See Awesome Bootstrap Checkbox

Iframe Modal

Add iframe modal to links:


Now add hasModal to <a> as class:

<a class="hasModal" href="">Open Link in Modal</a>

Then this link will open a modal with target page in iframe after clicked.



Convert an input to bootstrap calendar:



<input class="hasCalendar" name="date">


You can add some options to configure your calendar:

\Phoenix\Script\BootstrapScript::calendar('.selector', 'YYYY-MM-DD', [
    'sideBySide' => true,
    'calendarWeeks' => true

See Bootstrap Datepicker

Tab State

Use tab-state.js to remember last used tab panel when you back to same page:



Button Radio

Convert HTML radio to Bootstrap radio:


Add btn-group to radio field to enable this feature:

class EditDefinition extends AbstractFieldDefinition
    public function doDefine()
            ->option('Published', 1)
            ->option('Unpublished', 0);

        // ...


You can change the color class and selector options to fit different templates:

    'selector' => '.btn-group .radio',
    'buttonClass' => 'btn',
    'activeClass' => 'actice',
    'color' => [
        'default' => 'btn-default',
        'green'   => 'btn-success',
        'red'     => 'btn-danger',
        'blue'    => 'btn-primary',

If you found a typo or error, please help us improve this document.