Testing Bootstrap 4 on Yii2

Bootstrap 4 Yii2

For a Yii2 project I had taken up recently, we decided to go with bootstrap 4 although it was still in alpha development stage. Because, we reasoned, by the time the project was completed and released, Bootstrap 4 would have hit stable and we would find ourselves with an outdated library even before the release. In this post, I will take a look at how you can test your app using the latest bootstrap version.

Yii2 Bootstrap Library

Yii2 includes a crore bootstrap extension called yii2-bootstrap which can be found here: https://github.com/yiisoft/yii2-bootstrap. This is currently providing Bootstrap 3 and is at version 2.0.x. As per discussions there, version 2.1.x is expected to provide Bootstrap 4. A branch for this already exists and adding the following line to your composer.json file will allow you to try it out in your project.

After you run composer update, you should have bootstrap 4 CSS files now included in your source. But at the time of this article, the extension only provides the alpha 4 version of bootstrap.

Compile from Bootstrap 4 source

In order to test with the latest bootstrap release, we can either download the latest release and use that or we can download the latest source and compile the library using SASS. I will go for the second option here, so that we can also explore how to customize the bootstrap library for our needs in the process.

After downloading the source (use the “download source” button to get the source from this page: https://v4-alpha.getbootstrap.com/getting-started/download), you should make sure that node.js is installed in your system. Navigate to the source folder and run

This will pull in all the packages required to compile bootstrap including grunt. Grunt is a javascript task runner and we will use the grunt wrappers to easily generate the final CSS and JS script files. Once the npm update is complete, you can find the SASS source files in the scss folder.

The file you want to edit is _variables.scss. This file has a lot of variables that you can customize to get the design right. Once you have modified the variables to your liking, you can run the following grunt command to compile the source into the distribute-ables:

For more grunt commands and build options, take a look at this page. Now, you should have the bootstrap css and js files in the dist directory. Copy those files to a non public folder in your Yii2 directory. Then, modify your config.php file as follows in order to load our newly compiled css and js files.

Now, if you check your source you will see that the bootstrap 4 scripts are loaded.

Leave a Reply

Your email address will not be published. Required fields are marked *