Generates a bootstrap glyphicon based on the icon\'s name suffix. The following parameters are supported by this method:

• $icon: string, the bootstrap icon name without prefix (e.g. plus, pencil, trash).

• $options: array, the HTML attributes / options for the icon container.

• $prefix: string, the CSS class prefix - defaults to fas fa-.

• $tag: string, the HTML tag for rendering the icon container (usually span or i) - defaults to span.

echo Html::icon('pencil');
echo Html::icon('plus', ['class' => 'text-success']);
echo Html::icon('trash', ['style' => 'color: red; font-size: 2em']);

/* FontAwesome */
echo Html::icon('github', [], 'fa fa-');

/* JQueryUI */
function juiIcon($icon) {
    return Html::icon($icon, [], 'ui-icon ui-icon-');
}

/* Fontello */
function fonIcon($icon) {
    return Html::icon($icon, [], 'fontello fontello-');
}

Generates a bootstrap label. The following parameters are supported by this method:

• $content: string, the label content.

• $type: string, the bootstrap label type - defaults to default. Should be one of bootstrap contextual colors i.e. default, primary, success, info, danger, warning.

• $options: array, the HTML attributes / options for the label container.

• $prefix: string, the CSS class prefix - defaults to badge badge-.

• $tag: string, the HTML tag for rendering the label. Defaults to span.

echo Html::bsLabel('Default');
echo Html::bsLabel('Primary', Html::TYPE_PRIMARY);
echo Html::bsLabel('Success', Html::TYPE_SUCCESS);
echo Html::bsLabel('Danger', Html::TYPE_DANGER);
echo Html::bsLabel('Info', Html::TYPE_INFO);
echo Html::bsLabel('Warning', Html::TYPE_WARNING);
echo '<h3>Heading ' . Html::bsLabel('New') . '</h3>';

Easily highlight new or unread items by adding a <span class="badge">{content}</span> to links, Bootstrap navs, and more. The following parameters are supported by this method:

• $content: string, the badge content.

• $options: array, the HTML attributes / options for the label container.

• $tag: string,the HTML tag for rendering the badge. Defaults to span.

echo Html::badge('15', ['class' => 'badge-secondary']) ;
echo Html::badge('<i class="fas fa-flag"></i>', ['class' => 'badge-success']);

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).

. The following parameters are supported by this method:

• $title: string, the title heading to be shown.

• $subTitle: string, the sub heading to be shown within the title heading.

• $options: array, the HTML attributes / options for the page header container.

/**
 * @param string $title the title to be shown
 * @param string $subTitle the subtitle to be shown as subtext within the title
 * @param array $options html options for the page header
 */
echo Html::pageHeader('Heading', 'Sub Heading');

Generates a well container to give an element an inset effect. The following parameters are supported by this method:

• $content: string, the content to be shown within the well container.

• $size: string, the well container size. Should be one of the size modifier constants:

  • Html::SIZE_SMALL or sm

  • Html::SIZE_MEDIUM or md

• $options: array, the HTML attributes / options for the well container.

echo Html::well("Look, I'm in a normal well!") . '<br>' .
    Html::well("Look, I'm in a small well!", Html::SIZE_SMALL, ['class' => 'bg-light']) . '<br>' .
    Html::well("Look, I'm in a large well!", Html::SIZE_LARGE, ['class' => 'bg-light']);

Generates a generic close icon button for dismissing content like modals and alerts. The following parameters are supported by this method:

• $label: string, the close icon label - defaults to ×.

• $options: array, the HTML attributes / options for the close button.

• $tag: string, the HTML tag for rendering the close button container. Defaults to button.

echo Html::closeButton();
echo Html::closeButton(Html::icon('remove-sign'));

Generates a bootstrap caret. The following parameters are supported by this method:

• $direction: string, whether to display as up or down direction. Defaults to down.

• $disabled: string, if the caret is to be displayed as disabled. Defaults to false.

• $options: array, the HTML attributes / options for the caret container.

• $tag: string, the HTML tag for rendering the caret container. Defaults to button.

echo 'Down Caret ' . Html::caret();
echo 'Up Caret ' . Html::caret('up');
echo 'Disabled Caret ' . Html::caret('down', true);

Generates a jumbotron - a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. The following parameters are supported by this method:

• $content: string|array, the jumbotron content. If passed as a string, it will display the content directly as a raw content. If passed as an array, it accepts these keys:

  • heading: string, the jumbotron content title.

  • body: string, the jumbotron content body.

  • buttons: array, the configuration of buttons to be shown in the jumbotron. The following keys can be set:

    • label: string, the button label

    • icon: string, the icon to place before the label

    • url: string|array, the button url

    • type: string, one of the color modifier constants - defaults to self::TYPE_DEFAULT

    • size: string, one of the size modifier constants:

      • Html::SIZE_TINY or xs

      • Html::SIZE_SMALL or sm

      • Html::SIZE_MEDIUM or md

      • Html::SIZE_LARGE or lg

    • options: array, the button html options

• $fullWidth: boolean, whether this is a full width jumbotron without any corners. Defaults to false.

• $options: array, HTML attributes / options for the jumbotron

/* Raw content passed */
echo Html::jumbotron(
    '<h1>Hello, world</h1>' .
    '<p>This is a simple jumbotron-style component for calling extra attention to featured content.</p>'
);
/* Configurable content passed */
echo Html::jumbotron([
    'heading' => 'Hello, world!', 
    'body' => 'This is a simple jumbotron-style component for calling extra attention to featured content.',
    'buttons' => [
        [
            'label' => 'Learn More',
            'icon' => 'book',
            'url' => '#',
            'type' => Html::TYPE_PRIMARY,
            'size' => Html::SIZE_LARGE
        ],
        [
             'label' => 'Contact Us',
             'icon' => 'phone',
             'url' => '#',
             'type' => Html::TYPE_DANGER,
             'size' => Html::SIZE_LARGE
        ]
    ]
]);

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover. The following parameters are supported by this method:

• $content: string, the abbreviation content.

• $title: string, the abbreviation title displayed on hover.

• $initialism: boolean, if set to the true, will display a slightly smaller font-size. Defaults to false.

• $options: array, the HTML attributes / options for the abbreviation container.

echo Html::abbr('HTML', 'HyperText Markup Language')  . ' is the best thing since sliced bread';
echo Html::abbr('HTML', 'HyperText Markup Language', true);

Wrap <blockquote> around any HTML as the quote. For straight quotes, use a <p>. The following parameters are supported by this method:

• $content: string, the blockquote content.

• $citeContent: string, the content of the citation (optional) - this should typically include the wildtag {source} to embed the cite source.

• $citeTitle: string, the cite source title (optional).

• $citeSource: string, the cite source content (optional).

• $options: array, the HTML attributes / options for the blockquote container.

• $contentOptions: array, HTML attributes for the blockquote content container. For Bootstrap 5.x / 4.x, the CSS class mb-0 will be set if the class attribute is not set. The following special option is recognized:

  • tag: string, the list group container tag. Defaults to 'div'. (optional).

• $footerOptions: array, HTML attributes for the lockquote footer container. Applicable only for Bootstrap 5.x / 4.x releases.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in IPL

echo Html::blockquote(
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.',
     'Someone famous in {source}',
     'International Premier League',
     'IPL'
);

Present contact information for the nearest ancestor or the entire body of work. The following parameters are supported by this method:

• $name: string, the addressee name.

• $lines: string, the lines of address information.

• $phone: array, the the list of phone numbers - passed as $type => $value, where:

  • $type: string, is the phone type. For example: Res, Off, Cell, or Fax.

  • $value: string, is the phone number for the selected phone type.

• $email: array, the list of email addresses - passed as $type => $value, where:

  • $type: string, is the email type. For example: Res or Off.

  • $value: string, is the email number for the selected email type.

• $options: array, the HTML attributes / options for the address container (optional).

• $phoneLabel: string, the prefix label for each phone - defaults to (P).

• $emailLabel: string, the prefix label for each email - defaults to (E).

echo Html::well(Html::address(
     'Twitter, Inc.',
     ['795 Folsom Ave, Suite 600', 'San Francisco, CA 94107'],
     ['Res' => '(123) 456-7890', 'Off'=> '(456) 789-0123'],
     ['Res' => 'first.last@example.com', 'Off' => 'last.first@example.com']
));

Flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. The following parameters are supported by this method:

• $items: array, the list group items. Each element in the array must contain these keys:

  • $content: string|array, the list group content. If passed as a string, it will display the content directly as a raw content. If passed as an array, it accepts these keys:

    • heading: string, the list group item heading.

    • body: string, the list group item body.

    • headingOptions: array, the HTML attributes for the list group item heading container.

    • bodyOptions: array, the HTML attributes for the list group body container.

  • url: string|array, he url for linking the list item content (optional).

  • badge: string, a badge component to be displayed for this list item (optional).

  • active: boolean, to highlight the item as active (applicable only if $url is passed). Defaults to false.

• $options: array, the HTML attributes for the list group container (optional). The following special option is recognized:

  • tag: string, the list group container tag. Defaults to 'div'. (optional).

• $itemOptions: array, the HTML attributes for the list group item options (will be overridden by options at the item level). The following special option is recognized:

  • tag: string, the list group container tag. Defaults to 'div'. (optional).

• $badgeOptions: array, the HTML attributes for the the list group item badge options (will be overridden by badgeOptions at the item level).

//
// Example 1
//
echo  Html::listGroup([
    [
        'content' => ['heading' => 'Heading 1', 'body' => 'Cras justo odio'],
        'active' => true
    ],
    [
        'content' => ['heading' => 'Heading 2', 'body' => 'Dapibus ac facilisis in'],
    ],
    [
        'content' => ['heading' => 'Heading 2', 'body' => 'Morbi leo risus'],
    ],
]);
//
// Example 2
//
echo Html::listGroup([
    [
        'content' => 'Cras justo odio',
        'url' => '#',
        'badge' => '14',
        'active' => true
    ],
    [
        'content' => 'Dapibus ac facilisis in',
        'url' => '#',
        'badge' => '2'
    ],
    [
        'content' => 'Morbi leo risus',
        'url' => '#',
        'badge' => '1'
    ],
], [], ['class' => 'd-flex justify-content-between align-items-center'], ['class' => 'badge-info']);
//
// Example 3
//
$content = <<< HTML
<div class="d-flex w-100 justify-content-between">
  <h5 class="mb-1">List group item heading</h5>
  <small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
HTML;
echo Html::listGroup([
        ['content' => $content, 'url' => '#', 'active' => true],
        ['content' => $content, 'url' => '#'],
        ['content' => $content, 'url' => '#'],
    ], [], ['class' => 'flex-column align-items-start'])

Generates a panel for boxing content. The following parameters are supported by this method:

• $content: array, the configuration of the panel content sections. The following properties are supported:

  • preHeading: string, the raw content that will be placed before heading (optional).

  • heading: string, the panel box heading (optional).

  • preBody: string, the raw content that will be placed before body (optional).

  • body: string, the panel body content - this will be wrapped in a container containing CSS class card-body (optional).

  • postBody: string, the raw content that will be placed after body (optional).

  • footer: string, the panel box footer (optional).

  • postFooter: string, the raw content that will be placed after footer (optional).

  • headingTitle: boolean, whether to pre-style heading content with a panel-title CSS class. Defaults to true.

  • footerTitle: boolean, whether to pre-style footer content with a panel-title CSS class. Defaults to true.

• $type: string, the panel type. One of the bootstrap color modifier constants listed below. Defaults to default.

  • Html::TYPE_DEFAULT or default

  • Html::TYPE_PRIMARY or primary

  • Html::TYPE_SUCCESS or success

  • Html::TYPE_INFO or info

  • Html::TYPE_WARNING or warning

  • Html::TYPE_DANGER or danger

• $options: array, the HTML attributes / options for the panel container (optional).

$opts = [
    'heading' => 'Panel Heading',
    'body' => '<div class="card-body"><h6 class="card-title">Before</h6> Lorem ipsum dolor sit amet, consectetur adipisicing elit, ' .
        'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>' .
        Html::listGroup(
            [
                [
                    'content' => 'Cras justo odio',
                    'url' => '#',
                    'badge' => '14'
                ],
                [
                    'content' => 'Dapibus ac facilisis in',
                    'url' => '#',
                    'badge' => '2'
                ],
                [
                    'content' => 'Morbi leo risus',
                    'url' => '#',
                    'badge' => '1'
                ],
            ], 
            ['class' => 'list-group-flush'], 
            ['class' => 'd-flex justify-content-between align-items-center'], 
            ['class' => 'badge-info']
        ),
    'postBody' => '<div class="card-body"><h6 class="card-title">After</h6> Lorem ipsum dolor sit amet, consectetur adipisicing elit, ' .
        'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>',
    'footer' => 'Panel Footer',
    'headingTitle' => true,
    'footerTitle' => true,
];
echo Html::panel($opts) . '<hr>' .
    Html::panel($opts, Html::TYPE_PRIMARY) . '<hr>' .
    Html::panel($opts, Html::TYPE_SUCCESS)  . '<hr>' .
    Html::panel($opts, Html::TYPE_INFO)  . '<hr>' .
    Html::panel($opts, Html::TYPE_WARNING)  . '<hr>' .
    Html::panel($opts, Html::TYPE_DANGER);

Generates a media object. Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left-aligned or right-aligned image alongside textual content. The following parameters are supported by this method:

• $heading: string, the media heading text.

• $body: string, the media heading text.

• $src: string|array, URL for the media article source.

• $img: string|array, URL for the media image source.

• $srcOptions: array, the HTML attributes / options for the media article link (optional).

• $imgOptions: array, the HTML attributes / options for the media image (optional).

• $headingOptions: array, the HTML attributes / options for the media heading (optional).

• $bodyOptions: array, the HTML attributes / options for the media body (optional).

• $options: array, the HTML attributes / options for the media object container (optional).

• $tag: string, the HTML tag for rendering the media container. Defaults to div.

echo Html::media(
    'Media heading 1', 
    'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.',
    '#',
    'https://placehold.it/64x64',
    [],
    ['class' => 'mr-3'],
    ['class' => 'mt-0']
);

Generates list of media (useful for comment threads or articles lists). The following parameters are supported by this method:

• $items: array, the media items configuration. The following properties can be set:

  • items: array, the media list sub items configuration. Similar in configuration to items.

  • heading: string, the media heading text.

  • body: string, the media heading text.

  • src: string|array, URL for the media article source.

  • img: string|array, URL for the media image source.

  • srcOptions: array, the HTML attributes / options for the media article link (optional).

  • imgOptions: array, the HTML attributes / options for the media image (optional).

  • $headingOptions: array, the HTML attributes / options for the media heading (optional).

  • $bodyOptions: array, the HTML attributes / options for the media body (optional).

  • options: array, the HTML attributes / options for the media item container (optional).

• $options: array, the HTML attributes / options for the media list container (optional).

$body = 'Cras sit amet nibh libero, in gravida nulla. '.
    'Nulla vel metus scelerisque ante sollicitudin commodo. '.
    'Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.';
echo Html::mediaList([
    [
        'heading' => 'Media heading 1',
        'body' => $body,
        'src' => '#',
        'img' => 'https://placehold.it/64x64',
        'srcOptions' => ['class' => 'pr-3'],
        'headingOptions' => ['class' => 'mt-0'],
        'items' => [
            [
                'heading' => 'Media heading 1.1',
                'body' => $body,
                'src' => '#',
                'img' => 'https://placehold.it/64x64',
                'options' => ['class' => 'mt-3']
            ],
            [
                'heading' => 'Media heading 1.2',
                'body' => $body,
                'src' => '#',
                'img' => 'https://placehold.it/64x64',
                'options' => ['class' => 'mt-3']
            ],
        ]
    ],
    [
        'heading' => 'Media heading 2',
        'body' => 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. ' .
            'Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.',
        'src' => '#',
        'img' => 'https://placehold.it/64x64',
        'srcOptions' => ['class' => 'pr-3'],
        'headingOptions' => ['class' => 'mt-0'],
        'options' => ['class' => 'mt-3']
    ],
]);

\yii\bootstrap\BootstrapPluginAsset::register($this);
echo Html::checkboxButtonGroup('categories', [1, 3], [1=>'Category 1', 2=>'Category 2', 3=>'Category 3', 4=>'Category 4']);

\yii\bootstrap\BootstrapPluginAsset::register($this);
echo Html::radioButtonGroup('severity', 2, [1=>'Low', 2=>'Medium', 3=>'High']);

\yii\bootstrap\BootstrapPluginAsset::register($this);
$model->status = [1, 2];    
echo Html::activeCheckboxButtonGroup($model, 'status', [1=>'Category 1', 2=>'Category 2', 3=>'Category 3', 4=>'Category 4']);

\yii\bootstrap\BootstrapPluginAsset::register($this);
$model->status_1 = 3;
echo Html::activeCheckboxButtonGroup($model, 'status_1', [1=>'Low', 2=>'Medium', 3=>'High']);