What is Yii?
A high-performance PHP framework.
Is it free?
Yes, under the BSD-3-Clause license.
Done
Profile saved.
Check your input.
```
### Avatar
```php
use yii2\extensions\bootstrap6\Avatar;
use yii2\extensions\bootstrap6\enum\{Size, Theme};
echo Avatar::widget(['initials' => 'WA', 'size' => Size::LG, 'theme' => Theme::PRIMARY, 'status' => 'online']);
echo Avatar::widget(['src' => '/img/user.png', 'alt' => 'Wilmer']);
```
```html
WA
```
### Badge
```php
use yii2\extensions\bootstrap6\Badge;
use yii2\extensions\bootstrap6\enum\Theme;
echo Badge::widget(['label' => 'New', 'theme' => Theme::SUCCESS, 'pill' => true]);
```
```html
New
```
### Breadcrumbs
```php
use yii2\extensions\bootstrap6\Breadcrumbs;
echo Breadcrumbs::widget(['links' => [['label' => 'Library', 'url' => ['/library/index']], 'Data']]);
```
```html
```
The same trail built with value objects renders the same markup:
```php
use yii2\extensions\bootstrap6\Breadcrumbs;
use yii2\extensions\bootstrap6\item\BreadcrumbLink;
echo Breadcrumbs::widget(
['links' => [BreadcrumbLink::to('Library', ['/library/index']), BreadcrumbLink::to('Data')]],
);
```
### Button
```php
use yii2\extensions\bootstrap6\Button;
use yii2\extensions\bootstrap6\enum\{ButtonVariant, Size, Theme};
echo Button::widget(['label' => 'Save', 'theme' => Theme::PRIMARY]);
echo Button::widget(['label' => 'Bold', 'variant' => ButtonVariant::OUTLINE, 'size' => Size::SM, 'toggle' => true]);
```
```html
```
### ButtonGroup
```php
use yii2\extensions\bootstrap6\ButtonGroup;
echo ButtonGroup::widget(
[
'buttons' => [['label' => 'Left'], ['label' => 'Middle'], ['label' => 'Right']],
'options' => ['aria-label' => 'Alignment'],
],
);
```
```html
',
['content' => '
'],
],
],
);
```
```html
'),
CarouselItem::to(''),
],
],
);
```
### Chips
```php
use yii2\extensions\bootstrap6\Chips;
echo Chips::widget(['name' => 'tags', 'value' => ['php', 'yii'], 'placeholder' => 'Add a tag']);
```
```html
php
yii
```
The widget keeps the hidden input in sync with the plugin:
```js
document.getElementById("w0-chips").addEventListener("change.bs.chips", (event) => { document.getElementById("w0-value").value = event.values.join(","); });
```
### Collapse
```php
use yii2\extensions\bootstrap6\Collapse;
Collapse::begin(['toggleButton' => ['label' => 'Details']]);
echo 'Hidden content.';
Collapse::end();
```
```html
Hidden content.
```
The fluent methods chain on the value returned by `begin()`. A toggler method enables the toggle button, and a class
added to it replaces the default `btn-solid theme-primary`:
```php
Collapse::begin()
->addClass('border-bottom')
->addCssStyle(['max-width' => '30rem'])
->addTogglerClass('btn-outline', 'theme-secondary');
echo 'Hidden content.';
Collapse::end();
```
```html
Hidden content.
```
### Combobox
```php
use yii2\extensions\bootstrap6\Combobox;
echo Combobox::widget(
[
'name' => 'fruit',
'items' => ['apple' => 'Apple', 'pear' => 'Pear'],
'placeholder' => 'Choose a fruit',
'value' => 'pear',
],
);
```
```html
```
`multiple`, `search`, and `check` add `data-bs-multiple="true"`, `data-bs-search="true"`, the `.combobox-search`
field, the `.combobox-no-results` element, and a `.menu-item-check` icon in every item.
:::note
Bootstrap `6.0.0-alpha.1` logs a harmless `Bootstrap doesn't allow more than one instance per element` console error
when a combobox opens. The message comes from the upstream bundle, not from the widget.
:::
### Datepicker
```php
use yii2\extensions\bootstrap6\Datepicker;
echo Datepicker::widget(['name' => 'date', 'locale' => 'en-US', 'dateMin' => '2026-01-01']);
```
```html
```
In input mode the field submits the locale-formatted text shown to the user, so parse it with the same locale on the
server. Inline mode keeps the `YYYY-MM-DD` values in a hidden input:
```php
echo Datepicker::widget(
[
'name' => 'range',
'inline' => true,
'selectionMode' => 'multiple-ranged',
'value' => '2026-10-01,2026-10-05',
],
);
```
```html
This action cannot be undone.
'; Dialog::end(); ``` ```html ``` The same dialog configured with the fluent methods, which chain on the value returned by `begin()`; the `dialog` class is still added while rendering: ```php Dialog::begin(['title' => 'Delete post', 'toggleButton' => ['label' => 'Delete']]) ->addClass('shadow-lg') ->addTogglerClass('btn-outline', 'theme-danger') ->addTogglerAttribute('aria-haspopup', 'dialog'); echo 'This action cannot be undone.
'; Dialog::end(); ``` ```html ``` Sizes, responsive fullscreen, and backdrop behavior: ```php use yii2\extensions\bootstrap6\enum\{Breakpoint, DialogSize}; Dialog::begin( [ 'title' => 'Terms of service', 'toggleButton' => ['label' => 'Read the terms'], 'size' => DialogSize::LG, 'fullscreenBelow' => Breakpoint::MD, 'backdrop' => 'static', 'scrollable' => true, ], ); echo 'A static backdrop keeps the dialog open on outside clicks; close it with the button.
'; echo 'The body scrolls inside the dialog when the content is taller than the viewport.
'; Dialog::end(); ``` ```html ``` ### Drawer ```php use yii2\extensions\bootstrap6\Drawer; use yii2\extensions\bootstrap6\enum\DrawerPlacement; Drawer::begin( ['title' => 'Filters', 'placement' => DrawerPlacement::END, 'toggleButton' => ['label' => 'Show filters']], ); echo 'Filter form'; Drawer::end(); ``` ```html ``` `'responsive' => Breakpoint::LG` renders `class="lg:drawer drawer-start"`: the content is a drawer below `lg` and inline from `lg` up. ### LinkPager ```php use yii\data\Pagination; use yii2\extensions\bootstrap6\LinkPager; use yii2\extensions\bootstrap6\enum\{Size, Theme}; echo LinkPager::widget( [ 'pagination' => new Pagination(['totalCount' => 30, 'pageSize' => 10, 'page' => 1, 'route' => 'post/index']), 'size' => Size::SM, 'theme' => Theme::PRIMARY, ], ); ``` ```html ``` Use it in every grid and list view through the DI container: add the definition to `container.definitions` in `config/web.php`, or set it at runtime: ```php use yii\data\ArrayDataProvider; use yii\widgets\ListView; // config/web.php: 'container' => ['definitions' => [\yii\widgets\LinkPager::class => LinkPager::class]] Yii::$container->set(\yii\widgets\LinkPager::class, LinkPager::class); echo ListView::widget( [ 'dataProvider' => new ArrayDataProvider( ['allModels' => range(1, 30), 'pagination' => ['pageSize' => 10, 'route' => 'post/index']], ), 'itemView' => static fn(int $number): string => "Post $number", 'layout' => '{pager}', ], ); ``` ### Menu `Menu` renders only the panel; place it after your own toggle: ```php use yii2\extensions\bootstrap6\{Html, Menu}; echo Html::button('Options', ['class' => 'btn-solid', 'data-bs-toggle' => 'menu', 'aria-expanded' => 'false']); echo Menu::widget( [ 'items' => [ ['header' => 'Account'], ['label' => 'Profile', 'url' => ['/user/profile'], 'active' => true], ['label' => 'More', 'items' => [['label' => 'Settings', 'url' => '#']]], '-', ['text' => 'Signed in as admin'], ], ], ); ``` ```html ``` The same panel built with value objects renders the same markup: ```php use yii2\extensions\bootstrap6\item\MenuItem; use yii2\extensions\bootstrap6\Menu; echo Menu::widget( [ 'items' => [ MenuItem::header('Account'), MenuItem::link('Profile', ['/user/profile'])->withActive(true), MenuItem::submenu('More', [MenuItem::link('Settings', '#')]), MenuItem::divider(), MenuItem::text('Signed in as admin'), ], ], ); ``` The Menu plugin binds to the toggle, so `clientOptions` and `clientEvents` set on a standalone `Menu` target the panel and have no effect on the toggle. Put the options on the toggle as `data-bs-*` attributes, or use `ButtonMenu`. ### Nav ```php use yii2\extensions\bootstrap6\Nav; use yii2\extensions\bootstrap6\enum\NavStyle; echo Nav::widget( [ 'style' => NavStyle::PILLS, 'items' => [ ['label' => 'Home', 'url' => ['/site/index'], 'active' => true], ['label' => 'Docs', 'items' => [['label' => 'Guide', 'url' => '#'], ['label' => 'API', 'url' => '#']]], ['label' => 'Disabled', 'disabled' => true], ], ], ); ``` ```html ``` The same nav built with value objects renders the same markup; leave `active` as `null` to detect it from the route: ```php use yii2\extensions\bootstrap6\enum\NavStyle; use yii2\extensions\bootstrap6\item\{MenuItem, NavItem}; use yii2\extensions\bootstrap6\Nav; echo Nav::widget( [ 'style' => NavStyle::PILLS, 'items' => [ NavItem::to('Home', ['/site/index'])->withActive(true), NavItem::menu('Docs', [MenuItem::link('Guide', '#'), MenuItem::link('API', '#')]), NavItem::to('Disabled')->withDisabled(true), ], ], ); ``` ### NavBar ```php use yii2\extensions\bootstrap6\{Nav, NavBar}; NavBar::begin(['brandLabel' => 'My App', 'brandUrl' => '/', 'options' => ['class' => 'bg-1']]); echo Nav::widget( [ 'options' => ['class' => 'navbar-nav'], 'items' => [['label' => 'Home', 'url' => '/', 'active' => true], ['label' => 'About', 'url' => '/about']], ], ); NavBar::end(); ``` ```html ``` `'drawerOptions' => false` renders the content inline without toggler and drawer, and `'expand' => null` renders `navbar-expand` for every width. ### NavOverflow ```php use yii2\extensions\bootstrap6\NavOverflow; use yii2\extensions\bootstrap6\enum\NavStyle; echo NavOverflow::widget( [ 'moreText' => 'More', 'nav' => [ 'style' => NavStyle::UNDERLINE, 'items' => [['label' => 'Overview', 'url' => '#', 'active' => true], ['label' => 'Reports', 'url' => '#']], ], ], ); ``` ```html ``` ### OtpInput ```php use yii2\extensions\bootstrap6\OtpInput; echo OtpInput::widget(['name' => 'code', 'length' => 6, 'groups' => [3, 3]]); ``` ```html``` ### Popover ```php use yii2\extensions\bootstrap6\Popover; use yii2\extensions\bootstrap6\enum\Placement; Popover::begin(['title' => 'Popover title', 'content' => 'And here is some content.', 'placement' => Placement::RIGHT]); echo ''; Popover::end(); ``` ```html ``` ### Progress ```php use yii2\extensions\bootstrap6\Progress; use yii2\extensions\bootstrap6\enum\Theme; echo Progress::widget( ['percent' => 60, 'label' => '60%', 'theme' => Theme::SUCCESS, 'striped' => true, 'ariaLabel' => 'Upload'], ); ``` ```html
Loading...
```
### Stepper
```php
use yii2\extensions\bootstrap6\Stepper;
use yii2\extensions\bootstrap6\enum\Breakpoint;
echo Stepper::widget(
[
'items' => [
['label' => 'Cart', 'active' => true],
['label' => 'Shipping', 'active' => true],
['label' => 'Payment'],
],
],
);
```
```html
- Cart
- Shipping
- Payment
Account
Create your login
Home pane.
Profile pane.
Bootstrap
Hello, world! This is a toast message.
Email is not a valid email address.
Email is not a valid email address.
${input}
'],
);
```
```html
$