So I am definitely css challenged. I can handle a site with one or two but this site has many. I need to use bootstrap.min.css for this page to run my dealer locator and map, but it is overriding all of my css. As soon as I take the reference to this out of the page, the page returns to the correct appearance but then the dealer locator,map,request estimate doesn't work. I've tried putting bootstrap.min.css last, then first, then put all my other css in the footer, nothing seems to work outside of taking the reference to bootstrap.min.css out but that is not an option. Any help with this would be greatly appreciated. Here is the code example

<!DOCTYPE html>
<html lang="en-US">
   <head>
      <meta charset="UTF-8">
    <link rel="canonical" href="https://www.bluecascadepools.com/find-a-dealer.html">
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <TITLE>Find Above Ground Pool Installer |  Blue Cascade Pools |  Latham, NY 12110</TITLE>
<META NAME="description" CONTENT="Need To Find A Blue Cascade Above Ground Pool Installer Near You?  Need More Information? Use or Dealer Locator to FIND A BLUE CASCADE POOL DEALER near you. ">
<META NAME="keywords" CONTENT="Above Ground Pool Installer, Find a Dealer, Blue Cascade Pools, Imperial Pools Distribution, Latham, NY  12110">
<META NAME="robot" CONTENT="index,follow">
<META NAME="refresh" CONTENT="300">
<META NAME="copyright" CONTENT="Copyright © 2018 Imperial Pools Distribution. All Rights Reserved.">
 <META NAME="author" CONTENT="Tammy Smith, Website Project Specialist">
<META NAME="revisit-after" CONTENT="2 days">
  <!-- Geo Tags Start Here -->
 <meta name="geo.region" content="US-NY" />
<meta name="geo.placename" content="Latham" />
<meta name="geo.position" content="42.754097;-73.779741" />
<meta name="ICBM" content="42.754097, -73.779741" />

<link rel="stylesheet" href="css/template-style.css"> <!-- Geo Tags End Here -->
<link rel="stylesheet" href="css/responsee.css">
 

   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
       <link rel="stylesheet" href="css/components.css">
      <link rel="stylesheet" href="css/icons.css">
      
      <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
      <link rel="stylesheet" href="owl-carousel/owl.theme.css"> 
      <!-- CUSTOM STYLE -->
       
      <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

 
      <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui.min.js"></script>    
   <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-37164598-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
 <!-- START HERE -->

 <!-- Latest version of jQuery -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

 <!-- Latest compiled and minified Bootstrap CSS -->
 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

 <!-- Latest compiled and minified Bootstrap JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


 <style>
  p.storelocator-ContactDealer {
      display: inline-block !important;
  }
  div#storeLocatorModal {
   z-index: 9999;
            label {font-style: bold;}
   
  }
.navbar-inverse {
    background: transparent;
}
  
  
    </style>

 <script>
        $(document).ready(function() {
            $('body').on('click', '.storelocator-ContactDealer',function (event) {
          event.preventDefault();

          var dealerDiv = $(this).closest('.storelocator-store');

          var dealerName = $(dealerDiv).find('.storelocator-storename').first().text();
    $("#DealerName").val(dealerName);
          $("#DealerNameHeader").text(dealerName);

          var dealerEmail = $(dealerDiv).children('.storelocator-email').first().text();
    $("#DealerEmail").val(dealerEmail);

          var dealerAddress = $(dealerDiv).children('.storelocator-address').first().text();
    $("#DealerAddress").val(dealerAddress);


          $('.modal-confirmation').hide();
          $('#storeLocatorModal').modal('show');
          $('.modal-error').hide();
          $('.modal-form').show();
            });

      $('#DealerForm').submit( function() {
          event.preventDefault();
                $('.modal-form').hide();
                $('.modal-confirmation').show();

          $.ajax({
              url: 'https://www.bluecascadepools.com/formmail.php',
              type: 'post',
              data: $('form#DealerForm').serialize(),
              success: function(data) {
      if (response == "Message sent") {
                   $('.modal-form').hide();
       $('.modal-confirmation').show();
      }
               else {
                $("#sendingErrorMessage").text(response);
                $('.modal-error').show();
               }               
              },
              failure: function(errMsg) {
               $('.modal-error').show();
              }
          });
      });


        });
 </script>
 
<!-- END HERE -->
 
 
</head>
   <body class="size-1140">
      <!-- TOP NAV WITH LOGO -->  
      <header><!-- #BeginLibraryItem "/Library/bc-top-nav.lbi" -->
  <nav>
            <div class="line">
               <div class="top-nav">              
                  <div class="logo hide-l">
                     <a href="index.html"><img src="img/above-ground-pools-bluecascade-logo-on.png" alt="Above-Ground Pools by Blue Cascade"/></a>
                  </div>
                 <p class="nav-text">Select A Pool Type</p>
                  <div class="top-nav s-12 l-5">
                     <ul class="right top-ul chevron">
                      
           <li><a title="Steel Above-Ground Pools">Steel</a>
            
          
         <ul>
           <li><a href="steel-above-ground-pools/index.html" title="All Steel Models">All Steel Models</a></li>  <li><a href="steel-above-ground-pools/nevada-above-ground-pools.html" title="the Nevada">the Nevada</a></li>
           <li><a href="steel-above-ground-pools/geneva-above-ground-pools.html" title="the Geneva">the Geneva</a></li>
           <li><a href="steel-above-ground-pools/victoria-above-ground-pools.html" title="the Victoria">the Victoria</a></li>
           <li><a href="steel-above-ground-pools/inspiration-II-above-ground-pools.html" title="the Inspiration II">the Inspiration II</a></li>
           <li><a href="steel-above-ground-pools/serenity-above-ground-pools.html" title="the Serenity">the Serenity</a></li>
           <li><a href="steel-above-ground-pools/alexander-above-ground-pools.html" title="the Alexander">the Alexander</a></li>
      
           <li><a href="clearance-above-ground-pools.html"clearance-above-ground-pools.html"" title="Clearance Above-Ground Pools">Clearance Pools</a></li>     
         </ul>
       </li>
                
              <li><a title="Hybrid Above-Ground Pools">Hybrid</a>
         <ul>
            <li><a href="hybrid-above-ground-pools/index.html" title="All Hybrid Models">All Hybrid Models</a></li>
            <li><a href="hybrid-above-ground-pools/burgess-above-ground-pools.html" title="the Burgess">the Burgess</a></li>
            <li><a href="hybrid-above-ground-pools/pearl-above-ground-pools.html" title="the Pearl">the Pearl</a></li> 
          </ul>
                        </li>
          <li><a  title="Resin Above-Ground Pools">Resin</a>
       <ul>
            <li><a href="resin-above-ground-pools/index.html" title="All Resin Models">All Resin Models</a></li>
            <li><a href="resin-above-ground-pools/niagara-above-ground-pools.html" title="the Niagara Resin Above-Ground Pool">the Niagara</a></li>
         <li><a href="resin-above-ground-pools/canyon-resin-above-ground-pools.html" title="the Canyon Resin Above-Ground Pool">the Canyon</a></li>
        <li><a href="resin-above-ground-pools/harmony-above-ground-pools.html" title="the Harmony Resin Above-Ground Pool">the Harmony</a></li>
        <li><a href="clearance-above-ground-pools.html" title="Clearance Above-Ground Pools">Clearance Pools</a></li>
       </ul>
                        </li>
                     </ul>
                  </div>
                  <ul class="s-12 l-2">
                     <li class="logo hide-s hide-m">
                        <a href="index.html"><img src="img/above-ground-pools-bluecascade-logo-on.png" alt="Above Ground Pools by Blue Cascade"/></a>
                     </li>
                  </ul>
                  <div class="top-nav s-12 l-5">
                     <ul class="top-ul chevron">
                      
                        <li>
       <a title="Aluminum Above-Ground Pools">Aluminum</a>
                            <ul>
       <li><a href="aluminum-above-ground-pools/index.html" title="All Aluminum Models">All Aluminum Models</a>a>
                              </li>  
        <li><a href="aluminum-above-ground-pools/barron-above-ground-pools.html" title="the Barron Aluminum Above-Ground Pool">the Barron</a>a>
                              </li>
                              <li><a href="aluminum-above-ground-pools/angeline-above-ground-pools.html" title="the Angeline Aluminum Above-Ground Pool">the Angeline</a>
                              </li>
       <li><a href="clearance-above-ground-pools.html" title="Clearance Above-Ground Pools">Clearance Pools</a></li>
       </ul>
                        </li>
        
                        <li><a title="Semi-Ingtround Pools">OnGround</a>
        <ul>
        <li><a href="semi-inground-pools/sutherland-above-ground-pools.html" title="the Sutherland Semi-On-Ground Pool">the Sutherland</a></li>
      
        </ul>
       
                        </li>
       
                               
       
       <li><a title="Find A Dealer">Find Dealer</a>
        
       <ul>
        <li><a href="find-a-dealer.html" title="Find A Blue Cascade Above Ground Pool Installer">Find A Dealer / Request An Estimate</a></li>

       </ul>
       </li>
       
       </ul>
       </div>
       </div>
            </div>
         </nav><!-- #EndLibraryItem --></header>
      <section>
         <div id="head">
            <div class="line">
    <h1>Find Above Ground Pool Installers</h1>
</div>
         </div>
    <div id="first-block">
         
         <!-- MAP --> 
<div id="map-block" align="center"> 
 
    <div id="dealerEmail" style="display: none">
    <div class='form-group'>
      <label for='usr'>Dealer email:</label><input type='text' class='form-control' name='dealer_email' id='dealer_email' value=''>
    </div>
   </div>

<div id="storelocatorwidget" style="width:100%;><p>Loading <a href="https://www.storelocatorwidgets.com">Locator Software</a>...</p></div>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAdzzdqudT8Ou7tPHgzJSt_RiEtvI0xBqU&libraries=places"></script>
<script type="text/javascript" id="storelocatorscript" data-uid="69af044ab3897f7be8495b462ad7a5de" src="//cdn.storelocatorwidgets.com/widget/widget.js"></script>
         </div>
   </div>
         <div id="fourth-block">
            <div class="line">
               <div id="owl-demo2" class="owl-carousel owl-theme">
                  <div class="item">
                     <h2>We Have A Pool For You!</h2>
                     <p class="s-12 m-12 l-8 center">The Blue Cascade Pool Line offers a full gammit of choices. We have a pool in your price range, for your application and the perfect fit for any yard.
                     </p>
                  </div>
                  <div class="item">
                     <h2>The Perfect Interior Finish</h2>
                     <p class="s-12 m-12 l-8 center">Blue Cascade offers a comprehensive line of pool finishes for even the most discriminating homeowners.  A large selection of patterns means the perfect accent to your decor.  Plus our top of the line Blue Cascade Above-Ground Pool liners are proudly manufactured in the USA.
                  </div>
                  <div class="item">
                     <h2>Caution</h2>
                     <p class="s-12 m-12 l-8 center">No Diving or Jumping. Above-ground pools are designed for swimming only. At Blue Cascade Above Ground Pools, your family's security is our priority. Always ensure the proper supervision of children when around a swimming pool. 

                     </p>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!-- FOOTER --><!-- #BeginLibraryItem "/Library/footer.lbi" --><footer>
         <div class="line">
            <div class="s-12 l-6">
               <p>Copyright 2018,<img src="img/imperial-anniversary-badge-75.png" width="75" height="62" alt="Imperial Pools Celebrating our 60th Anniversary"/> Imperial Pools Distribution 
               </p>
               
    <p>33 Wade Road, Latham, NY  12110</p>
               <p><a href="contact.html" title="Contact Us - Blue Cascade Above Ground Pools - Latham, NY  12110">Contact Us</a></p>
    <p><a href="/sitemap.html" title="Above Ground Pools by Blue Cascade Pools - Site Map">Site Map</a></p>
            </div>
            <div class="s-12 l-6">
               <p class="right">
               <img src="img/socialmedia.png" alt="" usemap="#Map" class="right"/>
               <map name="Map">
                 <area shape="rect" coords="6,4,45,46" href="https://www.facebook.com/ImperialPoolsInc" target="_blank" alt="Visit Us On Facebook">
                 <area shape="rect" coords="53,4,102,45" href="http://www.youtube.com/user/ImpPools?feature=watch" target="_blank" alt="Visit us on You Tube">
               </map>
               </p>
            </div>
         </div>
      </footer><!-- #EndLibraryItem --><script type="text/javascript" src="js/responsee.js"></script> 
      <script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>   
      <script type="text/javascript">
         jQuery(document).ready(function($) {  
           $("#owl-demo2").owlCarousel({
            slideSpeed : 300,
            autoPlay : true,
            navigation : false,
            pagination : true,
            singleItem:true
           });
         }); 
          
      </script>  
   </body>
<div id="storeLocatorModal" class="modal fade" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">

        <form class="modal-form" id="DealerForm" action="" method="POST">
          <input name="DealerName" id="DealerName" type="hidden" value="">
          <input name="DealerEmail" id="DealerEmail" type="hidden" value="">
          <input name="DealerAddress" id="DealerAddress" type="hidden" value="">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title">Request Estimate from <span id="DealerNameHeader">Dealer</span></h3>
          </div>
          <div class="modal-body">
            
            <div class="alert alert-danger" style="display:none;"></div>

            <label>Your name:</label>
            <div class="form-group row">
                <div class="col-sm-9">
                    <div class="row">
                        <div class="col-xs-6"><input class="form-control" name="FirstName" type="text" placeholder="First Name" required></div>
                        <div class="col-xs-6"><input class="form-control" name="LastName" type="text" placeholder="Last Name" required></div>
                    </div>
                </div>
            </div>
     
     <label>Phone Number:</label>
            <div class="form-group row">
                <div class="col-sm-9">
                    <input class="form-control" name="Phone" type="text" placeholder="Phone Number (xxx-xxx-xxxx)" required>
                </div>
            </div>

            <label>Your email:</label>
            <div class="form-group row">
                <div class="col-sm-9">
                    <input class="form-control" name="Email" type="email" placeholder="Email Address" required>
                </div>
            </div>
     
   <label>Zip/Postal Code:</label>
            <div class="form-group row">
                <div class="col-sm-9">
                    <input class="form-control" name="Zip" type="text" placeholder="Zip or Postal Code" required>
                </div>
            </div>
     
   <label>Aboveground Pool Budget:</label>
   <div class="form-group row">
    <div class="col-sm-9">
     <div class="input-group">
      <select data-placeholder="Select Your Aboveground Pool Budget" name="Budget" class="form-control chosen-select" style="width:350px;" tabindex="2" required>
       <option value="">Please choose one</option>
       <option value="Not Applicable/Rather Not Say">Not Applicable/Rather Not Say</option>
       <option value="$1,000 - $2,000">$1-000 - $2,000</option>
       <option value="$2,001 - $5,000">$2,001 - $5,000</option>
       <option value="$5,000 +">$5,000 +</option>
      </select>
     </div>
    </div>
   </div>

            <label>Comments?</label>
            <div class="form-group"><textarea class="form-control" name="Message" placeholder="Write a message..." rows="5"></textarea></div>

          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
            <button type="submit" id="submitButton" class="btn btn-primary btn-lg">Send Request</button>
          </div>
        </form>

        <div class="modal-confirmation" style="display:none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 class="modal-title">Thank You</h3>
            </div>
            <div class="modal-body text-center text-success">
                <br>
                <p class="lead">
                    <i class="fa fa-fw fa-4x fa-check-circle"></i>
                    <br>
                    <br>
                    Your Blue Cascade Pool estimate request has been sent. We'll get back to you as soon as we can.
                </p>
                <br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

        <div class="modal-error" style="display:none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 class="modal-title">Sending Error</h3>
            </div>
            <div class="modal-body text-center text-danger">
                <br>
                <p class="lead">
                    <i class="fa fa-fw fa-4x fa-times"></i>
                    <br>
                    <br>
                    Sorry, there was a problem sending your information to this Dealer
                    <br>
                    <br>
                    <span id="sendingErrorMessage"></span>
                </p>
                <br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
  </div>
</div>
                      
</html>​

1 Answers

0
Andu Andrici On

Put the bootstrap.min.css link BEFORE the rest of your stylesheets.

As the cascade is a thing in Cascading Style Sheets, if you have defined your specificity as single-element (ex: p { something} ) or single-class (ex: .myThing { something} ), and boostrap comes later with the same specificity, it will override those styles.