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).

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

.bootstrap-wrapper {

@import (less) url( 'bootstrap.css' );

}

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.

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

.bootstrap-wrapper {

// Paste Bootstrap CSS here

}

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

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

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

Enjoy!

2 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

herahadi

2 months ago

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

please help, less compiler you mentioned is not available anymore

Author

Alex

Reply to herahadi

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

WordPress Admin + Plugin Development + Less + Bootstrap = Awesome

Alexander