justify-content-end

bootstrap5.css

bootstrap5.css

.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

html bootstrap5 Sample

右寄せで配置：justify-content:flex-end

col-4

col-4

  <!-- 右寄せでスタート、12の残りは勝手に余白になる -->
  <div class="row justify-content-end">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>

flex横の均等配置/右詰めで整列：justify-content-end

flex文字01

flex文字02

flex文字03

  <div class="d-flex justify-content-end">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

ページネーションの配置右寄せ：justify-content-end

  <nav>
    <ul class="pagination justify-content-end">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a> </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

ナビゲーション右寄せ：justify-content-end

  <ul class="nav justify-content-end">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>