How to add Bootstrap in Yii Framework

As bootstrap the most famous CSS framework in web designing and in the parallel side i-e web development the king of frameworks is Yii framework as it is fast and most secure one amongst others, anyone with the knowledge of both would surly like to combine the power of both in many projects but there are others which want to experiment or some are just the beginners in both, well you have came to right place. Enough talk lets roll it.

Requirements:

• Yii Framework (Download Now)
• Bootstrap Extension (Download Now)

i will be assuming that you have installed and configured the Yii framework, if not then let me know i will write a post on how to install/configure Yii and get started with it.

Step 1:

 Extract all the files from the Bootstrap compressed file into your applications protected/extensions/bootstrap directory.

Step 2:

Open main.php from protected/config directory in any text editor like notepad++. in the very beginning of the file you will find this:

// uncomment the following to define a path alias
// Yii::setPathOfAlias('local','path/to/local-folder');

Type this under these lines:

Yii::setPathOfAlias('bootstrap', dirname(__FILE__).'/../extensions/bootstrap');

now scroll down and you will find

        // application components
	'components'=>array(
		'user'=>array(
			// enable cookie-based authentication
			'allowAutoLogin'=>true,
		),
.........

and in the components array add this:

'bootstrap'=>array(
			'class'=>'bootstrap.components.Bootstrap',
		   ),

like this:

        // application components
	'components'=>array(
		'user'=>array(
			// enable cookie-based authentication
			'allowAutoLogin'=>true,
		),
		'bootstrap'=>array(
			'class'=>'bootstrap.components.Bootstrap',
		   ),

Step 3:

Now the final Step, open the main.php located at protected/view/layouts and add the following line right before the closing head tag (</head>).

<?php Yii::app()->bootstrap->register(); ?>

Now you are good to go...

Example:

To use the Bootstrap fixed navbar in your project, open the main.php located at protected/view/layouts and find the main menu div which has id of "mainmenu" and replace its inner code with the following code. Voila! you have the Bootstrap fixed navigation menu now installed in your project.

        <?php $this->widget('bootstrap.widgets.TbNavbar',array(
            'type'=>'inverse',
            'items'=>array(
                array(
                    'class'=>'bootstrap.widgets.TbMenu',
                    'items'=>array(
                        array('label'=>'Home', 'url'=>array('/site/index')),
                        array('label'=>'Test', 'url'=>array('test/test')),
                        array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
                        array('label'=>'Contact', 'url'=>array('/site/contact')),
                    ),
                ),
                array(
                    'class'=>'bootstrap.widgets.TbMenu',
                    'htmlOptions'=>array('class'=>'pull-right'),    //  Bottons appears at the right side of the Navigation Bar.
                    'items'=>array(
                        array('label'=>'login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
                        array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
                    ),
                ),
            ),
            )); ?>

You can customize most of the elements in your Yii project with this extension. To get more into the Yii Bootstrap visit Yii-Bootstrap site to get the codes of more components and how to use them. You can use the Yii-Bootstrap discussion forum at Yii to get to know more and discuss any issues you might have with Yii-Bootstrap.

If you liked this post or this was helpful to you subscribe my blog to get more interesting topics.