All rights are reserved by Niteesh Kumar.. Theme images by Storman. Powered by Blogger.

Followers

Total Pageviews

Blog Archive

Follow by Email

Translate

Friday, 16 February 2018

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.



10 on: "How to remove bootstrap conflict with wordpress theme css"
  1. For the excellent company Begin with the internet site, the customer service over the cell phone, to the detailed care they deliver in your presence
    leather jacket

    ReplyDelete
  2. You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. hire freelance web designer

    ReplyDelete
  3. The flexibility and iterative process enabled by their culture made the whole project enjoyable from start to finish.
    UX consulting

    ReplyDelete
  4. Nice blog
    https://www.24xhtml.com/2012/09/how-to-create-your-first-theme-in.html

    ReplyDelete
  5. Web indexes, for example, Google love WordPress in light of the fact that it utilizes elegantly composed code. Best Elementor Themes

    ReplyDelete
  6. For each recommendation all of us help to make, from alterations in spending in order to platform expansions to website landing page testing
    product designer San Francisco

    ReplyDelete
  7. Thanks for another wonderful post. Where else could anybody get that type of info in such an ideal way of writing? https://zetamatic.com/downloads/wp-paint-pro/

    ReplyDelete
  8. Great piece of information. I was looking for this for many days. You saved my time, Thanks: https://zonewp.com/

    ReplyDelete