Add Bootstrap CSS in Wordpress Plugin

To add css to wordpress is simple.. just use wp_enqueue_style 

example :

wp_enqueue_style( 'wp-astti-style-bootstrap', plugins_url('lib/bootstrap-4/css/bootstrap.min.css', __FILE__));

but the problem when use enqueue to boostrap css like that is the css will effect other element and make wordpress admin page look ugly.
Solution :
solution for this problem is wrapper.




1. Download boostrap source
2. Inside bootstrap-3.3.7/less/ folder, create bootstrap-wrapper.less, and add the following code:

.bootstrap-wrapper {
    @import "bootstrap.less";
}

3. Install less http://lesscss.org/ or you can use $ npm install -g less
4. From terminal, compile less files to get the css file:

cd bootstrap-3.3.7/less/
lessc bootstrap-wrapper.less bootstrap-wrapper.css

5. now we have bootstrap style that wrapped with class .bootstrap-wrapper we can enqueue it to our plugin.

wp_enqueue_style( 'wp-astti-style-bootstrap', plugins_url('css/bootstrap-wrapper.css', __FILE__));

6. now how to use the code

<div class="bootstrap-wrapper">
    <button class="btn btn-primary">Click me</button>
</div>

7. or you can just download the css here We will talk more about how to use Conver Less to Css and Scss to Css. Bootstrap 4 use scss not less.

Hope it will help some one other than me.