Yii Framework Twitter Bootstrap 5 Extension

This Yii Framework extension encapsulates Twitter Bootstrap 5 components and plugins in terms of Yii widgets, and thus makes using Bootstrap components/plugins in Yii applications extremely easy.

For example, to use the Bootstrap 5 Carousel component, you can do the following:

<?php

declare(strict_types=1);

use Yiisoft\Bootstrap5\Carousel;
use Yiisoft\Bootstrap5\CarouselItem;
use Yiisoft\Html\Tag\Div;
use Yiisoft\Html\Tag\H2;
use Yiisoft\Html\Tag\P;

?>

<?= Carousel::widget()
    ->id('carouselExampleOnlyText')
    ->items(
        CarouselItem::to(
            Div::tag()
                ->addClass('bg-primary text-white p-5 text-center')
                ->addContent(
                    H2::tag()->content('Title 1'),
                    P::tag()->content('This is the first slide with text.'),
                ),
        ),
        CarouselItem::to(
            Div::tag()
                ->addClass('bg-success text-white p-5 text-center')
                ->addContent(
                    H2::tag()->content('Title 2'),
                    P::tag()->content('This is the second slide with text.'),
                ),
        ),
        CarouselItem::to(
            Div::tag()
                ->addClass('bg-danger text-white p-5 text-center')
                ->addContent(
                    H2::tag()->content('Title 3'),
                    P::tag()->content('This is the third slide with text.'),
                ),
        ),
    );

Requirements

• PHP 8.1 or higher.

Installation

The package could be installed with Composer:

composer require yiisoft/bootstrap5

Install assets

There are several ways to install the assets, they are:

1. Using the AssetPackagist package manager.

   Add to composer.json the following:

   {
       "require": {
           "npm-asset/bootstrap": "^5.3",
           "oomphinc/composer-installers-extender": "^2.0"
       },
       "extra": {
           "installer-types": [
               "npm-asset"
           ],
           "installer-paths": {
               "./node_modules/{$name}": [
                   "type:npm-asset"
               ]
           }
       },
       "repositories": [
           {
               "type": "composer",
               "url": "https://asset-packagist.org"
           }
       ]
   }

   Once the changes are made, you can install the assets using the following command:

   composer update

2. Using the npm-asset package manager.

   Run the following command at the root directory of your application.

   npm i [email protected]

Using the yiisoft/assets package

To use the asset classes in the src/Assets directory (such as BootstrapAsset and BootstrapCdnAsset), you need to install additional packages:

composer require yiisoft/assets yiisoft/files

Documentation

• Twitter Bootstrap 5.3
• Guide:
  • English
• Internals

If you need help or have a question, the Yii Forum is a good place for that. You may also check out other Yii Community Resources.

License

The Yii Framework Twitter Bootstrap 5 Extension is free software. It is released under the terms of the BSD License. Please see LICENSE for more information.

Maintained by Yii Software.

Support the project

Follow updates