Integrating Bootstrap in Yii2

Introduction

Bootstrap is a popular front-end framework that helps in designing responsive and visually appealing web applications. Yii2 provides built-in support for Bootstrap, making it easy to integrate and use Bootstrap components in Yii2 applications.

This tutorial covers:

• Installing Bootstrap in Yii2
• Using Bootstrap CSS and JavaScript
• Bootstrap Widgets in Yii2
• Customizing Bootstrap in Yii2
• Using Bootstrap in Modules

Installing Bootstrap in Yii2

1. Using Yii2 Bootstrap Extension (Recommended)

Yii2 provides an official extension for Bootstrap. To install it, run the following command in your project:

composer require yiisoft/yii2-bootstrap5

After installation, update your config/web.php to ensure Bootstrap is loaded properly:

'components' => [
    'assetManager' => [
        'bundles' => [
            'yii\bootstrap5\BootstrapAsset' => [
                'css' => [],
            ],
        ],
    ],
],

2. Using CDN (Alternative Method)

If you prefer to use Bootstrap via a CDN, include the following links in your layout file (views/layouts/main.php):

<?php
$this->registerCssFile('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
$this->registerJsFile('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', ['depends' => [yii\web\JqueryAsset::class]]);
?>

Using Bootstrap CSS and JavaScript

Once Bootstrap is installed, you can directly use Bootstrap classes in your views. Example:

<div class="container">
    <h1 class="text-primary">Welcome to Yii2 with Bootstrap</h1>
    <button class="btn btn-success">Click Me</button>
</div>

Bootstrap Widgets in Yii2

Yii2 provides built-in Bootstrap widgets that make it easy to use Bootstrap components. Here are some commonly used widgets:

1. Bootstrap Buttons

use yii\bootstrap5\Button;

echo Button::widget([
    'label' => 'Click Me',
    'options' => ['class' => 'btn btn-primary']
]);

2. Bootstrap Modal

use yii\bootstrap5\Modal;

Modal::begin([
    'title' => 'My Modal',
    'toggleButton' => ['label' => 'Open Modal', 'class' => 'btn btn-info'],
]);

echo "Hello, this is modal content!";

Modal::end();

3. Bootstrap Alert

use yii\bootstrap5\Alert;

echo Alert::widget([
    'options' => ['class' => 'alert alert-warning'],
    'body' => 'This is a warning message!'
]);

Customizing Bootstrap in Yii2

If you need to override Bootstrap styles, you can create a custom CSS file and include it in your asset bundle.

Create a file web/css/custom.css and add your styles:

body {
    background-color: #f8f9fa;
}

Modify AppAsset.php to include the custom CSS file:

namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $css = [
        'css/custom.css',
    ];
}

Using Bootstrap in Modules

If you are using Yii2 modules, you can create a separate asset bundle for each module.

Example: Creating a module-specific Bootstrap asset:

namespace app\modules\admin\assets;

use yii\web\AssetBundle;

class AdminAsset extends AssetBundle
{
    public $sourcePath = '@app/modules/admin/assets';
    public $css = ['admin.css'];
    public $js = ['admin.js'];
    public $depends = ['yii\bootstrap5\BootstrapAsset'];
}

Then, register it in your module layout:

use app\modules\admin\assets\AdminAsset;
AdminAsset::register($this);

Conclusion

Integrating Bootstrap in Yii2 is simple and enhances the UI/UX of applications. Whether using the Yii2 Bootstrap extension or a CDN, you can easily include Bootstrap components, customize styles, and manage Bootstrap assets efficiently.