[Dúvida] Como Personalizar a Posição das Setas de Navegação no Carousel do Bootstrap

Oii Gustavo, tudo bem?

Pra personalizar a posição das setas de navegação no Carousel do Bootstrap e movê-las para o topo, você pode usar CSS para reposicionar os elementos. Vou te dá uma ideia de como fazer isso.

Imagine que você tem um código assim:

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Agora, adicione o seguinte CSS para mover as setas de navegação para o topo:

.carousel-control-prev,
.carousel-control-next {
  top: 10px; /* Ajuste este valor conforme necessário */
  bottom: auto;
  transform: translateY(-50%);
  width: 5%; /* Ajuste a largura conforme necessário */
}

.carousel-control-prev {
  left: 10px; /* Ajuste este valor conforme necessário */
}

.carousel-control-next {
  right: 10px; /* Ajuste este valor conforme necessário */
}

Esse CSS ajusta a posição das setas de navegação para o topo do Carousel. Você pode ajustar os valores de top, left e right conforme necessário para que as setas fiquem exatamente onde você deseja.

Espero ter ajudado.

Um abraço e bons estudos.