my-3

bootstrap5.css

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

bootstrap5.css

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

html bootstrap5 Sample

コントローラー付きカルーセルJS：carousel

  <div class="container">
    <div id="carousel" class="carousel slide">
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active">
          <img class="d-block w-100" alt="First slide"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
        </div>
        <!-- Second slide -->
        <div class="carousel-item">
          <img class="d-block w-100" alt="Second slide"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
        </div>
        <!-- Third slide -->
        <div class="carousel-item">
          <img class="d-block w-100" alt="Third slide"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
    <!-- コントロールボタン -->
    <div class="control-buttons my-3">
      <input type="button" class="btn btn-primary start-slide" value="開始">
      <input type="button" class="btn btn-primary pause-slide" value="停止">
      <input type="button" class="btn btn-primary prev-slide" value="前へ">
      <input type="button" class="btn btn-primary next-slide" value="次へ">
      <input type="button" class="btn btn-primary slide-first" value="第1スライドに">
      <input type="button" class="btn btn-primary slide-second" value="第2スライドに">
      <input type="button" class="btn btn-primary slide-third" value="第3スライドに">
    </div>
  </div>
  <script>
    $(function () {
      // 循環開始
      $(".start-slide").on('click', function () {
        $("#carousel").carousel('cycle');
      });
      // 一時停止
      $(".pause-slide").on('click', function () {
        $("#carousel").carousel('pause');
      });
      // 前へ循環
      $(".prev-slide").on('click', function () {
        $("#carousel").carousel('prev');
      });
      // 次へ循環
      $(".next-slide").on('click', function () {
        $("#carousel").carousel('next');
      });
      // 特定のフレームに循環
      $(".slide-first").on('click', function () {
        $("#carousel").carousel(0);
      });
      $(".slide-second").on('click', function () {
        $("#carousel").carousel(1);
      });
      $(".slide-third").on('click', function () {
        $("#carousel").carousel(2);
      });
    });
  </script>