How to remove bootstrap conflict with wordpress theme css

What is Bootstrap?

Bootstrap is an open-source toolkit which is used with HTML, CSS to design responsive web pages.

What is Wordpress?

Wordpress is an open-source tool for website creations that is written in PHP, It is easiest and powerful blogging tool and content management system(CMS) for websites.  






Wordpress provides a lot of themes. Some of them are freely available whereas some are paid. We have found that a less number of WordPress themes are available which support Bootstrap. Most of the time it happens that we buy themes and while customizing it we need to use Bootstrap. But when we use bootstrap theme's structure spoils completely. So, I am here with a solution that how to remove bootstrap conflict with WordPress theme CSS.

Step 1-
Add your custom code and rather than including bootstrap using link Make an empty CSS file style.css where we will store our updated bootstrap code.  

Step 2-
Open your WordPress dashboard and go to Appearence->Editor-

When you will click on the editor you will see a screen appearing with a text editor. Find the header.php file in the sidebar-

Click to open header.php file.

Step 3-
Open header.php file and include the css file you have created at the in step-1.
If you don't know how to include external CSS please copy the line given below and just update the path-

<link rel="stylesheet" href="style_custom.css">

Copy the link and paste it just below the tag.

Step 4-
Copy the link given below and paste into your browser-

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

You will see a lot of code on your screen. Copy the code and open the link given below-
 https://www.cleancss.com/css-beautify/

Pase your code in the first block and click on the CSS Formatter button.

After clicking you will see that a formatted code is appearing on your screen.Copy this code.

Step 5-
After copying the code open the link given below-
http://leafo.net/lessphp/

You will see two section one of them will edit me having some prewritten code. Remove that code and type

.bsnamespace{


}

In that section. Now paste the copied code inside the curly braces and click on the compile button.

Step-6

After compiling you will see that a code with added .bsnamespace class. Copy the code in the other section and paste it to the style_custom.css file that we have created initially.

 Save the style_custom.css file and now come to your custom code that you have written which have bootstrap included.
Cover the code inside a div tag and add a class name bsnamespace.

<div class="bsnamespace">

<!--You custom code-->
</div>

After doing this save all the files and refresh your WordPress page. You will see that Conflict has been disappeared.

Congratulations you have successfully removed the conflict.
If you still have problems. Please let me know via comments.