WordPress Admin + Plugin Development + Less + Bootstrap = Awesome

Bootstrap can not be added directly to the admin of a plugin, but you can wrap your plugin in a container and compile the Bootstrap CSS to use it as a wrapper.

I do my compiling using SimpLess

In the past you could do this using SimpLess directly (my-own-bootstrap.less).

  1. .bootstrap-wrapper {
  2.         @import (less) url( 'bootstrap.css' );
  3. }

This fails with the latest version of Bootstrap. But you can just paste the Bootstrap CSS into the LESS file and compile it that way.

  1. .bootstrap-wrapper {
  2.         // Paste Bootstrap CSS here
  3. }

Run it through SimpLess and after that the new CSS can be enqueued in WordPress ! This also works nicely with themes from Bootswatch.

  1. wp_enqueue_style( $this->plugin_slug .'-my-bootstrapstyle', plugins_url( 'css/my-bootstrapstyle.css', __FILE__ ), array(), $this->version );

Enjoy!

Alex

I am a full-stack developer. I love programming,  design and know my way around server architecture as well.  I would never feel complete, with one of these missing. I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest. Apart from that, I am a peace loving guy who tries to have people around him that think the same.  I truly believe in the principle: “If you help someone, someone will help you, when you need it."

View Comments

  • i got an error when compiling this code using Online Less Compilers less2css.org

    .bootstrap-wrapper {
    // Paste Bootstrap CSS here
    }

    please help, less compiler you mentioned is not available anymore

    • Hi,
      these days its far easier to use the core Sass files.
      https://getbootstrap.com/docs/4.1/getting-started/theming/#sass

      Just import all

      @import "../bootstrap/scss/bootstrap";

      or just what you need

      // Required
      @import "../bootstrap/scss/functions";
      @import "../bootstrap/scss/variables";
      @import "../bootstrap/scss/mixins";

      // Optional
      @import "../bootstrap/scss/reboot";
      @import "../bootstrap/scss/type";
      @import "../bootstrap/scss/images";
      @import "../bootstrap/scss/code";
      @import "../bootstrap/scss/grid";

      Far more flexible than the old less wrapper tweak :)

      Cheers
      Alex

Recent Posts

B&B / Hotel Booking Solutions for WordPress | 2024

BOOKING SOLUTIONS 202x This is my take on a subset of booking, appointment, PMS or… Read More

4 weeks ago

WordPress Cron + WP-CLI + Ntfy

THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More

2 months ago

2024 is here and now :)

2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More

4 months ago

2023 ends and whats next !

Short look back at 2023 This has been a busy and interesting year. I am… Read More

4 months ago

cubicFUSION Grid Tweaker – Elementor Grid made easy.

Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More

5 months ago

Archaeology Travel Booth – Travel Innovation Summit 2023

Archaeology Travel is an online travel guide for people who enjoy exploring the world’s pasts.… Read More

6 months ago