I am assuming that you are already familiar with WordPress and Bootstrap CSS framework. We all know and that’s why you came here. Also I guess you are also a WordPress plugin developer. If yes, then this article may save lots of your time to design your WP plugin administrative pages inside WP admin panel if you can use Bootstrap.

Let’s see how we can use Bootstrap CSS in WordPress plugin page.

Why Bootstrap CSS framework for WP Plugin?

Because most of the developer and frontend designers are already familiar with Bootstrap because it’s the most popular CSS framework currently available to use. You can easily design your frontend with it with less work and in less time. Ultimately using Bootstrap CSS will boost your productivity.

As a WordPress plugin developer you know that most of the plugin now has their own configuration and administrative page inside WP admin panel. I guess your plugin also has. So now you want to design it with your existing design knowledge. Am I correct?

Ok, so here it comes to use Bootstrap CSS framework.

What’s the problem? Conflict with WordPress core CSS?

Yes. When you just add any third party or extra CSS inside your plugin to design your plugin page, it will conflict with WordPress’s core CSS and ultimately it will messed up with everything inside WordPress admin panel. Because there are lots of CSS selector and classes that are same in the core WP css and Bootstrap. So what you can do?

Right way to use Bootstrap CSS in WP Plugin

• Prepare your bootstrap and make it like it won’t conflict with any of the core CSS of WordPress admin panel.
• You need to compile your bootstrap.css or bootstrap.min.css (which one you prefer to use, I prefer using bootstrap.min.css) with less and add prefix in every selector in bootstrap.min.css. Manually it will take a day to do that. But thanks to less compiler.
• Just install less in your machine by running the following command (I am using Ubuntu 16.04)
  sudo npm install -g less
  If you don’t have npm installed in your system. You can do by running sudo apt-get install npm.
• Verify if lessc command is available by running lessc -v. If it output the version. It means you have successfully installed less comiler and lessc command is now available
• Now create a file name with bootstrap-prefix.less with following content
  .your-prefix-class {
@import (less) 'bootstrap.css';
}
  Note: .your-prefix-class means you have to wrap your entire WP plugin page with something like –
  <div class="your-prefix-class">
<!--- rest of your HTML code will start from here -->
</div>

• Now run command lessc bootstrap-prefix.less bootstrap-custom.css and start adding this bootstrap-custom.css file. And you are done.
  

This way you can completely isolate your bootstrap design from WordPress core CSS. Bootstrap will only be applied inside your .your-prefix-class. It’s amazing.

Common problems & solutions

Write your comments below.