How to customize the Bootstrap admin panel CSS?
PHP CRUD Tutorial

The Admin Panel is built with Bootstrap 4 and TWIG Templates.
The design can be customized as desired using Bootstrap CSS.
Depending on what you want to customize, you have several possibilities.


Customizing the Bootstrap Admin CSS theme with the General Settings form

More than 20 dashboard tempates are provided.
Each tempate is of premium quality and features a modern responsive design.
All the themes are provided for free by Bootswatch

  1. Open generator/generator.php in your browser
  2. Click the General Settings button

    PHP CRUD General Settings button
  3. Choose your favorite Bootstrap theme from the drop-down list among the 20+ available themes.
    The template is applied to the Bootstrap admin dashboard in real time as soon as you validate the form. Feel free to test different templates for your project.
  4. [optional] Edit the ADMIN SKIN part

    The themes included in the package are all conceived in responsive design and premium quality, but you are free to make your own modifications. The main elements of the dashboard can easily be customized to match the design of your project (see illustration below).

    Bootstrap template design customization with CSS
    Bootstrap template design customization with CSS

The main Bootstrap CSS is built with Color Variants (Codepen).

You can use CSS classes with colors variants from 100 to 900 and custom colors like Teal, Purple, Cyan, ...

For instance: bg-blue-600bg-yellow-200bg-info-800

Below are some examples of themes with custom CSS elements

  • Bootstrap Admin Panel Skin
  • Bootstrap Admin Panel Skin
  • Bootstrap Admin Panel Skin
  • Bootstrap Admin Panel Skin
  • Bootstrap Admin Panel Skin

Bootstrap Themes Preview

  • PHP CRUD Bootstrap 4 Dashboard default
  • PHP CRUD Bootstrap 4 Dashboard cosmo
  • PHP CRUD Bootstrap 4 Dashboard cyborg
  • PHP CRUD Bootstrap 4 Dashboard darkly
  • PHP CRUD Bootstrap 4 Dashboard flatly
  • PHP CRUD Bootstrap 4 Dashboard journal
  • PHP CRUD Bootstrap 4 Dashboard litera
  • PHP CRUD Bootstrap 4 Dashboard lumen
  • PHP CRUD Bootstrap 4 Dashboard lux
  • PHP CRUD Bootstrap 4 Dashboard materia
  • PHP CRUD Bootstrap 4 Dashboard minty
  • PHP CRUD Bootstrap 4 Dashboard pulse
  • PHP CRUD Bootstrap 4 Dashboard sandstone
  • PHP CRUD Bootstrap 4 Dashboard simplex
  • PHP CRUD Bootstrap 4 Dashboard sketchy
  • PHP CRUD Bootstrap 4 Dashboard slate
  • PHP CRUD Bootstrap 4 Dashboard solar
  • PHP CRUD Bootstrap 4 Dashboard spacelab
  • PHP CRUD Bootstrap 4 Dashboard superhero
  • PHP CRUD Bootstrap 4 Dashboard united
  • PHP CRUD Bootstrap 4 Dashboard yeti

Changing the main Header image, the Sidebar user's image
or any other CSS

  1. Create a new CSS file in admin/assets/stylesheets/
  2. Open admin/inc/css-includes.php and add a link to your CSS file:
    <link rel="stylesheet" href="<?php echo ADMIN_URL; ?>assets/stylesheets/custom.css" type="text/css" media="screen">
  3. Add any CSS in your file to overwrite the initial template CSS:
    body {
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .page-header.has-cover {
        background: url(../images/backgrounds/custom-header-bg.jpg);
    }
    
    .sidebar .sidebar-user .category-content {
        background: url(../images/backgrounds/custom-user-bg.jpg) 50% no-repeat;
    }

Customizing the Bootstrap Admin dashboard theme with SASS & Gulp

PHP CRUD Generator is built with SASS & Gulp.

A ready-to-use package to minify and compile SASS and Javascripts is available for download on Github here: https://github.com/migliori/php-crud-generator-gulp
These sources files allow to edit the Bootstrap Admin theme CSS and / or Javascript.

To compile SASS and/or Javascript:

Download or clone the Github repository at the root of your project and follow the README instructions.

The SASS files

All SASS files including Bootstrap 4 are located in admin/assets/sass/ and compiled in admin/assets/stylesheets/

The CSS files are loaded with admin/inc/css-includes.php.

The Javascript files

All the Javascript files are organized in admin/assets/javascripts/ and minified in the same folder.

The main Javascript is admin/assets/javascripts/project.js.
It loads all the project dependencies with the help of LoadJs.

Prerequisites

To customize your Bootstrap admin dashboard CSS you must beforehand:

PHP CRUD tutorial main page

subscribe