W3.CSS Containers Conflicting with Bootstrap

[SteveL714]

I've been doing a redesign of my church website using a lot of the functionality contained in the W3.CSS libraries. I'm using them so as to easily convert the pages over to a responsive display.

<link rel="stylesheet" href="[URL unfurl="true"]http://www.w3schools.com/lib/w3.css">[/URL]

Everything looks great on all the pages as far as positioning, alignment, size, etc. UNTIL I put a reference in to the Bootstrap libraries.

<link rel="stylesheet" href="[URL unfurl="true"]http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">[/URL]

Here is how the "clean" image looks:

Once I add the link to bootstrap, all the text and buttons shift to the left, as shown here:

Since I only plan on using the Bootstrap Carousel control on the home page I'd like to avoid having the header on that page show differently than on all the other pages.

Has anyone ever encountered a conflict between the W3.CSS elements and the Bootstrap elements? Does anyone have any suggestions as to how to solve this?

Steve

 

[ChrisHirst]

Has anyone ever encountered a conflict between the W3.CSS elements and the Bootstrap elements?

There is ALWAYS the likely hood of 'conflicts' when using boilerplate CSS from another site that may of course change at any time without any consultation with you.

Does anyone have any suggestions as to how to solve this?

Download the style sheets to YOUR server space and change whatever the problem properties are.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum