Bootstrap Carousel Indicators Not Changing from Transparent to Solid - html

Question

The carousel indicators on this Bootstrap photo carousel work in that they change the photo appropriately when clicked on; however, they don't work in that if I have clicked on the third carousel indicator, the first carousel indicator remains solid while the third remains transparent. Any ideas on why this might be happening?
<div id="photos_overlay">
<div class="container-fluid">
<div class="row">
<div class="cta-overlay col-lg-4 col-md-5 col-sm-6">
<h1>Freshwater Ranch</h1>
<h4>Freshwater Ranch is located deep within the heart of the Rocky Mountains. The luxury accommodations and equine facilities on this 450-acre ranch were designed to support personal and professional getaways alike, and the awe-inspiring views of the Sawatch and Sangre de Cristo mountain ranges allow for a unique mountain experience. Join us and prepare to be inspired!</h4>
</div>
<ol class="carousel-indicators">
<li data-target="#rotating_photos" data-slide-to="0" class="active"></li>
<li data-target="#rotating_photos" data-slide-to="1"></li>
<li data-target="#rotating_photos" data-slide-to="2"></li>
<li data-target="#rotating_photos" data-slide-to="3"></li>
</ol>
</div>
</div>
<div class="photo_body carousel slide" data-ride="carousel" id="rotating_photos">
<div class="carousel-inner">
<div class="item active">
<img src="images/ranchhouseview1.jpg" alt="Indoor Arena Photo">
</div>
<div class="item">
<img src="images/view4.jpg" alt="Indoor Arena Photo">
</div>
<div class="item">
<img src="images/horse.jpg" alt="Horse Photo">
</div>
<div class="item">
<img src="images/view5.jpg" alt="Mountain Photo">
</div>
</div><!--carousel inner-->
</div><!--carousel outer-->
</div>

Answer 1

Your carousel-indicators have to be inside carousel div like this:
<div class="photo_body carousel slide" data-ride="carousel" id="rotating_photos">
<ol class="carousel-indicators">
<li data-target="#rotating_photos" data-slide-to="0" class="active"></li>
<li data-target="#rotating_photos" data-slide-to="1"></li>
<li data-target="#rotating_photos" data-slide-to="2"></li>
<li data-target="#rotating_photos" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/ranchhouseview1.jpg" alt="Indoor Arena Photo">
</div>
<div class="item">
<img src="images/view4.jpg" alt="Indoor Arena Photo">
</div>
<div class="item">
<img src="images/horse.jpg" alt="Horse Photo">
</div>
<div class="item">
<img src="images/view5.jpg" alt="Mountain Photo">
</div>
</div>
<!--carousel inner-->
</div>
<!--carousel outer-->
</div>