Whats the best way to integrate bootstrap into existing HTML/CSS?

So I have a wordpress site that has its own custom theme. I have been building forms and tables with bootstrap separately and I want to integrate them into the site, but when I do it, the bootstrap CSS causes conflicts with my existing HTML. Is there an easy way I can integrate bootstrap without these conflicts? I thought about wrapping the forms and tables in a special div with a custom ID… but not sure how to connect that to the bootstrap CSS… any thoughts?

I don’t think you’re going to find it as simple as integrating Bootstrap into your existing HTML and CSS. Since you’re talking about Wordpress, you are most likely going to need to redevelop the WP theme using Bootstrap as your base.

1 Like

I’d have to agree with @Gandalf. I think you’re going to have to re-think your theme, and build it around Bootstrap.

Well if that’s the case then I guess i will just rethink using bootstrap all together. Because I don’t have time to recode the entire theme. :frowning:

Thanks guys.

You might be able to accomplish this by making your form specific css targeted only at your form. Use a class or Put your form in a div and only apply the css to the div or apply your css to that form. ex if your form has id of checkout:

#checkout form#confirm {...}

This should apply the style to the confirm id element inside the form with id checkout

The easier way to resolve your problem would be to load your css after loading bootstrap’s css. That’s what I generally try first

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.