Click to share! ⬇️

How To Generate Twitter Bootstrap Markup With Yii 2

Another great feature of the Yii 2 Framework is that it supports Twitter Bootstrap right out of the box. You can use the familiar Yii syntax to generate this markup in your views using Widgets. Widgets in Yii are like little reusable chunks of code that output data in a nice formatted way. Like most things in Yii, they work by loading in a configuration in the form of an array. If you’re not using the short array syntax yet in PHP, you certainly will be once you start using Yii 2 since it makes liberal use of the short array syntax, as in everything is in this form [] instead of this $hi = array();. In any event, let’s look at some of the ways to use the built in Widgets for generating Twitter Bootstrap Markup in Yii2.

Carousel yiibootstrapCarousel


echo Carousel::widget ( [ 
    'items' => [ 
        
        [ 
            'content' => '<img style="height:350px" src="https://vegibit.com/wp-content/uploads/2014/11/Super-Easy-CRUD-With-Gii-And-The-Yii2-Framework.jpg"/>',
            'caption' => '<h2>Yii CRUD</h2><p>Super Easy CRUD With Gii And The Yii2 Framework</p>',
            'options' => [ ] 
        ],
        
        [ 
            'content' => '<img style="height:350px" src="https://vegibit.com/wp-content/uploads/2014/10/Yii-Active-Form-Tutorial.jpg"/>',
            'caption' => '<h2>Active Form</h2><p>Yii Active Form Tutorial</p>',
            'options' => [ ] 
        ],
        
        [ 
            'content' => '<img style="height:350px" src="https://vegibit.com/wp-content/uploads/2014/11/The-Database-First-Approach-of-Yii.jpg"/>',
            'caption' => '<h2>Database First</h2><p>The Database First Approach of Yii</p>',
            'options' => [ ] 
        ],
        [ 
            'content' => '<img style="height:350px" src="https://vegibit.com/wp-content/uploads/2014/10/Yii-Actions-and-Views-Tutorial.jpg"/>',
            'caption' => '<h2>Actions and Views</h2><p>Yii Actions and Views Tutorial</p>',
            'options' => [ ] 
        ],
        
        [ 
            'content' => '<img style="height:350px" src="https://vegibit.com/wp-content/uploads/2014/11/Connect-To-A-MySQL-Database-With-Yii.jpg"/>',
            'caption' => '<h2>Yii Database</h2><p>Connect To A MySQL Database With Yii</p>',
            'options' => [ ] 
        ],
        
        [ 
            'content' => '<img style="height:350px" src="https://vegibit.com/wp-content/uploads/2014/11/How-To-Install-The-Advanced-Template-In-Yii2.jpg"/>',
            'caption' => '<h2>Advanced Template</h2><p>How To Install The Advanced Template In Yii2</p>',
            'options' => [ ] 
        ] 
    ],
    'options' => [ 
        'style' => 'width:70%' // set the width of the container if you like
    ] 
] );

Tabs yiibootstrapTabs

The Yii 2 Framework is a Fast, Secure and Awesome PHP Framework you need to check out.

jQuery is the worlds most popular JavaScript Framework that lets you easily work with the DOM.

Twitter Bootstrap is a super HTML, CSS, and JavaScript Framework to make building your front end a snap.

You can add as many tabs as you like. Just populate the array as needed to add more tabs to the UI.

Time to Rock Out With Your Socks Out with Yii 2 and Twitter Bootstrap. All baked into one nice package.

One is the lonliest number, but two is company. Two is one plus one which equals two.

Three has been known to be a Crowd. Three is odd, not even. If you like three, the trifecta is yours.


echo Tabs::widget ( [ 
    'items' => [ 
        [ 
            'label' => 'Yii',
            'content' => '<h2>The Yii 2 Framework is a Fast, Secure and Awesome PHP Framework you need to check out.</h2>',
            'active' => true 
        ],
        [ 
            'label' => 'jQuery',
            'content' => '<h2>jQuery is the worlds most popular JavaScript Framework that lets you work with the DOM.</h2>' 
        ],
        [ 
            'label' => 'Bootstrap',
            'content' => '<h2>Twitter Bootstrap is a super HTML, CSS, and JavaScript Framework to make building your front end a snap.</h2>',
            'headerOptions' => [ 
                'id' => 'headerOptions' 
            ],
            'options' => [ 
                'id' => 'options' 
            ] 
        ],
        [ 
            'label' => 'More Tabs',
            'content' => '<h2>You can add as many tabs as you like.  Just populate the array as needed to add more tabs to the UI.</h2>' 
        ],
        [ 
            'label' => 'Dropdown',
            'items' => [ 
                [ 
                    'label' => 'This Is Dropdown One',
                    'content' => '<h2>Time to Rock Out With Your Socks Out with Yii 2 and Twitter Bootstrap.  All baked into one nice package.</h2>' 
                ],
                [ 
                    'label' => 'This Is Dropdown Two',
                    'content' => '<h2>One is the lonliest number, but two is company.  Two is one plus one which equals two.</h2>' 
                ],
                [ 
                    'label' => 'This Is The Third Dropdown',
                    'content' => '<h2>Three has been known to be a Crowd.  Three is odd, not even.  If you like three, the trifecta is yours.</h2>' 
                ] 
            ] 
        ] 
    ] 
] );

Alert yiibootstrapAlert

Hey Buddy, Check out this cool information.

You Win! Great work with your success.

Hold Up Friend, Read this important information before proceeding.

Stop! Something is about to break.


echo Alert::widget ( [ 
    'options' => [ 
        'class' => 'alert-info' 
    ],
    'body' => '<b>Hey Buddy</b>, Check out this cool information.' 
] );

echo Alert::widget ( [ 
    'options' => [ 
        'class' => 'alert-success' 
    ],
    'body' => '<b>You Win!</b> Great work with your success.' 
] );

echo Alert::widget ( [ 
    'options' => [ 
        'class' => 'alert-warning' 
    ],
    'body' => '<b>Hold Up Friend,</b> Read this important information before proceeding.' 
] );

echo Alert::widget ( [ 
    'options' => [ 
        'class' => 'alert-danger' 
    ],
    'body' => '<b>Stop!</b> Something is about to break.' 
] );


Buttons yiibootstrapButton


echo Button::widget ( [ 
    'label' => 'Default',
    'options' => [ 
        'class' => 'btn-lg btn-default',
        'style' => 'margin:5px' 
    ], // add a style to overide some default bootstrap css
    'tagName' => 'div' 
] ); // change the tag used to generate the button if you like

echo Button::widget ( [ 
    'label' => 'Primary',
    'options' => [ 
        'class' => 'btn-lg btn-primary',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Success',
    'options' => [ 
        'class' => 'btn-lg btn-success',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Info',
    'options' => [ 
        'class' => 'btn-lg btn-info',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Warning',
    'options' => [ 
        'class' => 'btn-lg btn-warning',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Danger',
    'options' => [ 
        'class' => 'btn-lg btn-danger',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Link',
    'options' => [ 
        'class' => 'btn-lg btn-link',
        'style' => 'margin:5px' 
    ] 
] );

// disabled
echo Button::widget ( [ 
    'label' => 'Default',
    'options' => [ 
        'class' => 'disabled btn-default',
        'style' => 'margin:5px' 
    ], // add a style to overide some default bootstrap css
    'tagName' => 'div' 
] ); // change the tag used to generate the button if you like

echo Button::widget ( [ 
    'label' => 'Primary',
    'options' => [ 
        'class' => 'disabled btn-primary',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Success',
    'options' => [ 
        'class' => 'disabled btn-success',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Info',
    'options' => [ 
        'class' => 'disabled btn-info',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Warning',
    'options' => [ 
        'class' => 'disabled btn-warning',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Danger',
    'options' => [ 
        'class' => 'disabled btn-danger',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Link',
    'options' => [ 
        'class' => 'disabled btn-link',
        'style' => 'margin:5px' 
    ] 
] );

// mixed size
echo Button::widget ( [ 
    'label' => 'Large',
    'options' => [ 
        'class' => 'btn-lg btn-default',
        'style' => 'margin:5px' 
    ], // add a style to overide some default bootstrap css
    'tagName' => 'div' 
] ); // change the tag used to generate the button if you like

echo Button::widget ( [ 
    'label' => 'Default',
    'options' => [ 
        'class' => 'btn-primary',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Small',
    'options' => [ 
        'class' => 'btn-sm btn-success',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Extra Small',
    'options' => [ 
        'class' => 'btn-xs btn-info',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Large',
    'options' => [ 
        'class' => 'btn-lg btn-warning',
        'style' => 'margin:5px' 
    ] 
] );

echo Button::widget ( [ 
    'label' => 'Default',
    'options' => [ 
        'class' => 'btn-danger',
        'style' => 'margin:5px' 
    ] 
] );


ButtonDropdown yiibootstrapButtonDropdown


echo ButtonDropdown::widget ( [ 
    'label' => 'Default',
    'options' => [ 
        'class' => 'btn-lg btn-default',
        'style' => 'margin:5px' 
    ],
    'dropdown' => [ 
        'items' => [ 
            [ 
                'label' => 'Action Two',
                'url' => '#' 
            ],
            [ 
                'label' => 'Action Three',
                'url' => '#' 
            ],
            [ 
                'label' => '',
                'options' => [ 
                    'role' => 'presentation',
                    'class' => 'divider' 
                ] 
            ],
            [ 
                'label' => 'Action Four',
                'url' => '#' 
            ] 
        ] 
    ] 
] );

echo ButtonDropdown::widget ( [ 
    'label' => 'Primary',
    'options' => [ 
        'class' => 'btn-lg btn-primary',
        'style' => 'margin:5px' 
    ],
    'dropdown' => [ 
        'items' => [ 
            [ 
                'label' => 'Action Two',
                'url' => '#' 
            ],
            [ 
                'label' => 'Action Three',
                'url' => '#' 
            ],
            [ 
                'label' => '',
                'options' => [ 
                    'role' => 'presentation',
                    'class' => 'divider' 
                ] 
            ],
            [ 
                'label' => 'Action Four',
                'url' => '#' 
            ] 
        ] 
    ] 
] );

echo ButtonDropdown::widget ( [ 
    'label' => 'Success',
    'options' => [ 
        'class' => 'btn-lg btn-success',
        'style' => 'margin:5px' 
    ],
    'dropdown' => [ 
        'items' => [ 
            [ 
                'label' => 'Action Two',
                'url' => '#' 
            ],
            [ 
                'label' => 'Action Three',
                'url' => '#' 
            ],
            [ 
                'label' => '',
                'options' => [ 
                    'role' => 'presentation',
                    'class' => 'divider' 
                ] 
            ],
            [ 
                'label' => 'Action Four',
                'url' => '#' 
            ] 
        ] 
    ] 
] );

echo ButtonDropdown::widget ( [ 
    'label' => 'Info',
    'options' => [ 
        'class' => 'btn-lg btn-info',
        'style' => 'margin:5px' 
    ],
    'dropdown' => [ 
        'items' => [ 
            [ 
                'label' => 'Action Two',
                'url' => '#' 
            ],
            [ 
                'label' => 'Action Three',
                'url' => '#' 
            ],
            [ 
                'label' => '',
                'options' => [ 
                    'role' => 'presentation',
                    'class' => 'divider' 
                ] 
            ],
            [ 
                'label' => 'Action Four',
                'url' => '#' 
            ] 
        ] 
    ] 
] );

echo ButtonDropdown::widget ( [ 
    'label' => 'Warning',
    'options' => [ 
        'class' => 'btn-lg btn-warning',
        'style' => 'margin:5px' 
    ],
    'dropdown' => [ 
        'items' => [ 
            [ 
                'label' => 'Action Two',
                'url' => '#' 
            ],
            [ 
                'label' => 'Action Three',
                'url' => '#' 
            ],
            [ 
                'label' => '',
                'options' => [ 
                    'role' => 'presentation',
                    'class' => 'divider' 
                ] 
            ],
            [ 
                'label' => 'Action Four',
                'url' => '#' 
            ] 
        ] 
    ] 
] );

echo ButtonDropdown::widget ( [ 
    'label' => 'Danger',
    'options' => [ 
        'class' => 'btn-lg btn-danger',
        'style' => 'margin:5px' 
    ],
    'dropdown' => [ 
        'items' => [ 
            [ 
                'label' => 'Action Two',
                'url' => '#' 
            ],
            [ 
                'label' => 'Action Three',
                'url' => '#' 
            ],
            [ 
                'label' => '',
                'options' => [ 
                    'role' => 'presentation',
                    'class' => 'divider' 
                ] 
            ],
            [ 
                'label' => 'Action Four',
                'url' => '#' 
            ] 
        ] 
    ] 
] );

echo ButtonDropdown::widget ( [ 
    'label' => 'Link',
    'options' => [ 
        'class' => 'btn-lg btn-link',
        'style' => 'margin:5px' 
    ],
    'dropdown' => [ 
        'items' => [ 
            [ 
                'label' => 'Action Two',
                'url' => '#' 
            ],
            [ 
                'label' => 'Action Three',
                'url' => '#' 
            ],
            [ 
                'label' => '',
                'options' => [ 
                    'role' => 'presentation',
                    'class' => 'divider' 
                ] 
            ],
            [ 
                'label' => 'Action Four',
                'url' => '#' 
            ] 
        ] 
    ] 
] );

Collapse yiibootstrapCollapse

This is the content area. Think of something cool to say.
Peek a boo, I see you. I was hiding in the content area.
I bet you didn’t know that was coming 🙂

echo Collapse::widget ( [ 
    'items' => [
        // equivalent to the above
        [ 
            'label' => 'This is open, but you can collapse it.',
            'content' => 'This is the content area.  Think of something cool to say.',
            
            // open its content by default
            'contentOptions' => [ 
                'class' => 'in' 
            ] 
        ],
        
        // another group item
        [ 
            'label' => 'This is collapsed, but you can open it.',
            'content' => 'Peek a boo, I see you.  I was hiding in the content area.',
            'contentOptions' => [ ],
            'options' => [ ] 
        ],
        [ 
            'label' => 'Click here to see what happens',
            'content' => 'I bet you didn't know that was coming :-)',
            'contentOptions' => [ ],
            'options' => [ ] 
        ] 
    ] 
] );

Modal yiibootstrapModal


Modal::begin ( [ 
    'header' => '<h2>Heyyyy Oh, Singing Heyyyy Oh</h2>',
    'toggleButton' => [ 
        'tag' => 'button', 
        'class' => 'btn btn-lg btn-block btn-info',
        'label' => 'Click Here, Its Dynomite!',
    ] 
] );

echo 'I throw my hands up in the air sometimes.';

Modal::end ();

Nav yiibootstrapNav

Navbar yiibootstrapNavbar


NavBar::begin ( [ 
    'brandLabel' => 'Yii Navbar',
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [ 
        'class' => 'navbar-default' 
    ] 
] );
echo Nav::widget ( [ 
    'options' => [ 
        'class' => 'navbar-nav navbar-right' 
    ],
    'items' => [ 
        [ 
            'label' => 'Home',
            'url' => [ 
                '#' 
            ] 
        ],
        [ 
            'label' => 'About',
            'url' => [ 
                '#' 
            ] 
        ],
        [ 
            'label' => 'Contact',
            'url' => [ 
                '#' 
            ] 
        ],
        Yii::$app->user->isGuest ? [ 
            'label' => 'Login',
            'url' => [ 
                '#' 
            ] 
        ] : [ 
            'label' => 'Logout (' . Yii::$app->user->identity->username . ')',
            'url' => [ 
                '#' 
            ],
            'linkOptions' => [ 
                'data-method' => 'post' 
            ] 
        ] 
    ] 
] );
NavBar::end ();

Progress yiibootstrapProgress

Awesome60% Complete
65% Complete
70% Complete
70% Complete
30% Complete
Super Awesome30% Complete
35% Complete

// default with label
echo Progress::widget ( [ 
    'percent' => 60,
    'label' => 'Awesome' 
] );

// styled
echo Progress::widget ( [ 
    'percent' => 65,
    'barOptions' => [ 
        'class' => 'progress-bar-danger' 
    ] 
] );

// striped
echo Progress::widget ( [ 
    'percent' => 70,
    'barOptions' => [ 
        'class' => 'progress-bar-warning' 
    ],
    'options' => [ 
        'class' => 'progress-striped' 
    ] 
] );

// striped animated
echo Progress::widget ( [ 
    'percent' => 70,
    'barOptions' => [ 
        'class' => 'progress-bar-success' 
    ],
    'options' => [ 
        'class' => 'active progress-striped' 
    ] 
] );

// stacked bars
echo Progress::widget ( [ 
    'bars' => [ 
        [ 
            'percent' => 30,
            'options' => [ 
                'class' => 'progress-bar-danger' 
            ] 
        ],
        [ 
            'percent' => 30,
            'label' => 'Super Awesome',
            'options' => [ 
                'class' => 'progress-bar-success' 
            ] 
        ],
        [ 
            'percent' => 35,
            'options' => [ 
                'class' => 'progress-bar-warning' 
            ] 
        ] 
    ] 
] );

ActiveForm yiibootstrapActiveForm




    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'brand')->textInput(['maxlength' => 64]) ?>

    <?= $form->field($model, 'model')->textInput(['maxlength' => 64]) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

Yii 2 Bootstrap Tips

Now that we’ve looked at many of the live examples that Yii 2 offers for Twitter Bootstrap right out of the box, let’s talk about a few tips that may help you.

1. Don’t Forget Your Use Statements

In your excitement to get rolling with creating awesome widgets in your views, don’t forget to add the proper use statements to the top of the file. To use everything covered in this episode, simply put this code at the top of the view file in question:


<?php
use yiibootstrapNavBar;
use yiibootstrapNav;
use yiibootstrapTabs;
use yiibootstrapAlert;
use yiibootstrapButton;
use yiibootstrapButtonDropdown;
use yiibootstrapButtonGroup;
use yiibootstrapCarousel;
use yiibootstrapCollapse;
use yiibootstrapModal;
use yiibootstrapProgress;
use yiibootstrapActiveForm;

Once this is in place, you’ll be able to make calls to the various widget methods successfully.

2. Use A Code Editor That Has Built In Code Formatting

There are plenty of different code editors that will auto format your code for you. Why is this helpful? This is helpful because you will go batty trying to keep track of what arrays go where. As you work more with Yii, you’ll begin to realize that most things are created with config files by way of an array. That array may contain other arrays which contain other arrays and so on. It can get a little tricky if you don’t have syntax formatting to help visualize how everything is contained within the main configuration array.

3. How To Enable The Bootstrap Theme

In Bootstrap 3, the base style is flat. It looks nice, but if you’d like to turn on the theme to have more gradients and shadow effects, you can update the AppAsset file like so.

assets/AppAsset.php source


class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yiiwebYiiAsset',
        'yiibootstrapBootstrapAsset',
        'yiibootstrapBootstrapThemeAsset',
    ];
}

Conclusion

In this episode, we learned all about creating Twitter Bootstrap UI Elements by programming them in Yii 2. It’s a neat way to generate your front end UI by way of creating the back end code in Yii to complete this for you.

Click to share! ⬇️