Fix Bootstrap and CSS Conflict

• Status: Closed
• Prize: $50
• Entries Received: 1
• Winner: codexter

Winner

Contest Brief

This is a contest for a solution to a CSS layout problem.

The goal is to fix or add styles to prevent the Bootstrap CSS from disrupting the container layout.

Here is the shell page (no Bootstrap) with the important sections marked in colours:

http://fabexchange.azurewebsites.net/withoutbootstrap.htm

Here is the desired result once the Bootstrap styles have been merged inside the sections:

http://fabexchange.azurewebsites.net/desiredresult.htm

Here is the page that needs to be corrected by adding or changing styles. Notice that the inclusion of the Bootstrap content destroys the layout:

http://fabexchange.azurewebsites.net/withbootstrap.htm

Ideally, you will create a Reset stylesheet that will not touch the Bootstrap markup and leave the page responsive.

Tip: The sample responsive Bootstrap page is here:

http://www.rainworx.com/awedemo/Listing/Details/332781/Canon-PowerShot-ELPH-110-HS-161-MP

Recommended Skills

• Bootstrap
• CSS
• HTML5
• WordPress