Customizing

Customize PROFI with our built-in Sass variables for global style preferences for easy theming and component changes.

Introduction

In Bootstrap 3, theming was largely driven by variable overrides in LESS, custom CSS, and a separate theme stylesheet that we included in our dist files. With some effort, one could completely redesign the look of Bootstrap 3 without touching the core files. Bootstrap 4 provides a familiar, but slightly different approach.

Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There’s no more dedicated theme stylesheet; instead, you can enable the built-in theme to add gradients, shadows, and more.

Customizing color palette

You can change the color palette of any demo very easily by simply changing the few scss variables value.

In order to modify the colors in existing themes, open the _variables.scss file from /src/assets/scss and change any variable in it. Your changes would get reflected automatically in any bootstrap based components or elements. Note that, this requires you to setup and run flow provided in installation steps earlier.

Adding new page

We have provided a starter page (check src/pages_starter.html). It allows you to get started easily and helps you to add a new page. Please note following important points:

Make sure you have included assets/css/vendor.css, assets/css/style.css, assets/fonts/font-awesome/css/font-awesome.css, assets/js/vendor.js and assets/js/app.js in your html.