CODEWITHSUNDEEP
htmlcss
Aaron
Aaron

Reputation: 33

How to make bootstrap carousel buttons always adjacent to each other

I'm trying to make these bootstrap buttons immediately adjacent to each other, so they're always touching (no matter the screen size.) But I just can't seem to manage it. Any ideas?

  <div class="buttons">
        <a class="carousel-control-prev" href="#testimonials" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#testimonials" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>

a {
  background-color: white;
  height: 50px;
  z-index: 2;
  box-shadow: 5px 5px 30px 0px hsl(240, 18%, 79%);
}

.carousel-control-next {
  width: 50px;
  top: 75vh;
  right: 45%;
  border-radius: 0 50px 50px 0;
}

.carousel-control-prev {
  top: 75vh;;
  width: 50px;
  left: 49%;
  border-radius: 50px 0 0 50px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 60px;
  width: 50px;
  bottom: 10px;
  background-size: 100%, 100%;
  border-radius: 50%;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 35px;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 35px;
  color: gray;
}

Thanks ahead of time for any assistance!

Upvotes: 0

Views: 520

Answers (1)

beatnik
beatnik

Reputation: 236

There's a few options here. I'd suggest using flexbox if possible. Its best to control top from the .button class. You dont need absolute positioning on either carousel-control-next or carousel-control-prev classes. dont forget to close the buttons div too

.buttons{
  display: flex;
  justify-content: center;
  align-items: center
}

.carousel-control-next {
  width: 50px;
  top: 75vh; //control top from .buttons not here
  right: 45%; // this is not needed. to override. set right: inherit
  border-radius: 0 50px 50px 0;
}

.carousel-control-prev {
  width: 50px;
  top: 75vh; //control top from .buttons not here
  right: 45%; // this is not needed. to override. set right: inherit
  border-radius: 0 50px 50px 0;
}

Upvotes: 1

Related Questions