0

I have researched how to move the position of the Bootstrap Carousel indicator "dots" and tried inputting suggested code into my .css file; however, nothing seems to lower the "dots" so they don't overlap my text. I have tried all the code suggested in other posts about the same issue. Any suggestions?

My code below is for a movie website for a class. I have 12 movies on my carousel which is the reason for the multiple data targets. Below that, I have included the block of code I am using to display each movie. My code is below with the .css code included.

EDIT: The underlying issue was with my browser cache. Once I cleared my cache, changes were reflected on the webpage.

<!-- Carousel -->
<div id="portfolio" class="container-fluid text-center bg-grey">  
    <h2>Click a Movie to Read More</h2>  
    <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">    
        <!-- Indicators -->    
        <ol class="carousel-indicators">      
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>      
        <li data-target="#myCarousel" data-slide-to="1"></li>     
        <li data-target="#myCarousel" data-slide-to="2"></li>  
        <li data-target="#myCarousel" data-slide-to="3"></li>  
        <li data-target="#myCarousel" data-slide-to="4"></li>
        <li data-target="#myCarousel" data-slide-to="5"></li>
        <li data-target="#myCarousel" data-slide-to="6"></li>
        <li data-target="#myCarousel" data-slide-to="7"></li>
        <li data-target="#myCarousel" data-slide-to="8"></li>
        <li data-target="#myCarousel" data-slide-to="9"></li>
        <li data-target="#myCarousel" data-slide-to="10"></li>
        <li data-target="#myCarousel" data-slide-to="11"></li>
        </ol>    
        <!-- Wrapper for slides -->    
            <div class="carousel-inner" role="listbox">      
                <div class="item active">        
                    <span><a href = "movie-details.html"><img src = "../Pictures/jumanji.jpg" alt = "Jumanji" width = "300" height = "400"></a>
                    </span>
                    <br>
                    <h2>Jumanji</h2>    
                </div>

.CSS FILE CODE:

.carousel-indicators li {
  border-color: #f4511e;
}
.carousel-indicators li.active {
  background-color: #f4511e;
}
Rob
  • 14,746
  • 28
  • 47
  • 65
Ethan Webster
  • 1
  • 1
  • did you try with position:absolute; top:10px; ? – Jordi Vicens Jan 24 '18 at 17:43
  • The similar question and answer here https://stackoverflow.com/questions/20207487/bootstrap-3-default-carousel-how-to-move-indicators-down-and-outside-of-slide-c Demo: https://www.bootply.com/96715 – ild flue Jan 24 '18 at 17:46
  • Yes, I tried both of those but the reason nothing was working because my browser was caching the styling, so nothing was changing. Once I cleared the cache, everything worked. Thanks for the suggestions. – Ethan Webster Jan 25 '18 at 01:25

0 Answers0