Using CakePHP with Bootstrap 5

This guide walks through a quick setup for using Bootstrap 5 with SCSS in a CakePHP project. The use of SCSS allows you to easily customize the Bootstrap 3 framework to match your project's design.

Install Bootstrap 5 and SASS

Start by installing Bootstrap 5 using npm and sass.

npm install bootstrap
npm install sass --save-dev

Now add this line to your package.json file so your css file can be compiled. Oh and while you are at it, why not launch CakePHP's server through npm as well.

  "scripts": {
    "dev": "./bin/cake server",
    "sass-dev": "sass --watch --update --no-source-map --style=compressed resources:webroot/css",
    "sass-prod": "sass --no-source-map --style=compressed resources:webroot/css"
  }

This will take and compile the SCSS files in the resources folder and output them to the webroot/css folder.

Include Bootstrap 5 in your SCSS file

Create a new file in the resources folder called main.scss and include the following code. In this example we override the primary color to a blue color and also showing you how to include some custom styles at the end. The primary color override needs to be done before importing the bootstrap file.

$primary: #337AB7;

// import bootstrap
@import '../node_modules/bootstrap/scss/bootstrap';

body {
	color: #757575;
	font-family: 'helvetica', sans-serif;
}

Using your css file

Now that you have your SCSS file setup, compile it by running the following command. This will monitor the SCSS file for changes and compile it to CSS.

npm run sass-dev

This will compile the SCSS file and output it to the webroot/css folder. Now you can include the css file in the header section of your layout file.

<?= $this->Html->css(['main.css']) ?>

That's it! You now have a CakePHP project setup with Bootstrap 5 and SCSS. You can now customize the Bootstrap framework to match your project's design.