Search code examples
htmlcarousel

why isn't there any space between my carousel buttons?


I cant figure out how to make the buttons go to opposite sides of the screen

I originally thought i may have a problem with my divs, but that doesn't seem to be the problem

its probably something simple that im just over looking, but all help is appreciated.

<!--################## review section ###############-->
<section id="reviews" class="py-5">
  <div id="slider" class="carousel slide " data-ride="carousel">
    <div class="carousel-inner">
        <!-- carousel item -->
        <div class="carousel-item active">
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto d-flex justify-content-between review-item py-3">
                <!-- image -->
                <div class="align-self-center ml-3">
                  <img src="img/customer1.jpg" alt="" class="rounded-circle review-img">
                </div>
                <!-- text -->
                <div class="review-text px-5">
                  <h2 class="text-capitalize mb-3 primary-color">customer name</h2>
                  <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, commodi?</p>
                </div>
              </div>
            </div>
          </div>
        </div>

    </div>  



      <!-- carousel control -->
      <a href="#slider" class="carousel-control prev" role="button" data-slide="prev">
         <span class="carousel-control-prev-icon"></span>
      </a>

      <a href="#slider" class="carousel-control next" role="button" data-slide="next">
         <span class="carousel-control-next-icon"></span>
      </a>

    </div>
</section>


<!--################## end of review section ###############-->

i just want the buttons to be on the opposite side of the page

Solution

  • just a typo, per the docs carousel-control-prev not carousel-control prev

      <a href="#slider" class="carousel-control-prev" role="button" data-slide="prev">
         <span class="carousel-control-prev-icon"></span>
      </a>
    
      <a href="#slider" class="carousel-control-next" role="button" data-slide="next">
         <span class="carousel-control-next-icon"></span>
      </a>