Badges

Twitter bootstrap Documentation

Examples

Twitter bootstrap Documentation

Headings

Twitter bootstrap Documentation

Result

Source

<?php

// H1
echo '<h1>Example heading ' . $this->badge('New') . '</h1>';
// H2
echo '<h2>Example heading ' . $this->badge('New') . '</h2>';
// H3
echo '<h3>Example heading ' . $this->badge('New') . '</h3>';
// H4
echo '<h4>Example heading ' . $this->badge('New') . '</h4>';
// H5
echo '<h5>Example heading ' . $this->badge('New') . '</h5>';
// H6
echo '<h6>Example heading ' . $this->badge('New') . '</h6>';

Buttons

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Notifications',
        'badge' => ['4', 'secondary'],
        'variant' => 'primary',
    ],
]);

Positioned

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Inbox',
        'badge' => [
            '99+',
            [
                'variant' => 'danger',
                'positioned' => true,
                'type' => 'pill',
                'hidden_content' => 'unread messages',
            ],
        ],
        'variant' => 'primary',
    ],
]);

echo PHP_EOL . '<br />';

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Profile',
        'badge' => [
            '',
            [
                'variant' => 'danger',
                'positioned' => true,
                'type' => 'pill',
                'hidden_content' => 'New alerts',
            ],
        ],
        'variant' => 'primary',
    ],
]);

Background colors

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->badge('Primary', 'primary');
echo $this->badge('Secondary', 'secondary');
echo $this->badge('Success', 'success');
echo $this->badge('Danger', 'danger');
echo $this->badge('Warning', ['variant' => 'warning', 'text_variant' => 'dark']);
echo $this->badge('Info', ['variant' => 'info', 'text_variant' => 'dark']);
echo $this->badge('Light', ['variant' => 'light', 'text_variant' => 'dark']);
echo $this->badge('Dark', 'dark');

Pill badges

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->badge('Primary', ['variant' => 'primary', 'type' => 'pill']);
echo $this->badge('Secondary', ['variant' => 'secondary', 'type' => 'pill']);
echo $this->badge('Success', ['variant' => 'success', 'type' => 'pill']);
echo $this->badge('Danger', ['variant' => 'danger', 'type' => 'pill']);
echo $this->badge(
    'Warning',
    ['variant' => 'warning', 'type' => 'pill', 'text_variant' => 'dark']
);
echo $this->badge(
    'Info',
    ['variant' => 'info', 'type' => 'pill', 'text_variant' => 'dark']
);
echo $this->badge(
    'Light',
    ['variant' => 'light', 'type' => 'pill', 'text_variant' => 'dark']
);
echo $this->badge('Dark', ['variant' => 'dark', 'type' => 'pill']);