ms-auto

bootstrap5.css

bootstrap5.css
.ms-auto {
  margin-left: auto !important;
}

html bootstrap5 Sample

flexコンテナを左と右側でそれぞれ真ん中空ける形式:ms-auto


flex文字1
flex文字2
flex文字3
  <div class="d-flex">
    <!-- mr-autoが右寄せ マージンユーティリティ-->
    <!-- 同階層のカラムを強制的にオフセットするということと同じ -->
    <div>flex文字1</div>
    <div>flex文字2</div>
    <div class="ms-auto p-2">flex文字3</div>
  </div>

js ナビゲーションバー内テキスト:navbar-text


    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">ブランド</a>
      <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarText"
        aria-controls="navbarText" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" href="#">ホーム </a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        </ul>
        <!-- ナビバー内にテキストを表示したい場合 -->
        <span class="navbar-text ms-auto">ナビゲーションバーテキスト</span>
      </div>
    </nav>

js グリッドレイアウトを使用したモーダル:rowとcol


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal4">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal4"-->
    <div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">
            <!-- container-fluidは画面いっぱい -->
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-4">col-md-4</div>
                <div class="col-md-4 ms-auto">col-md-4、ms-auto</div>
              </div>
              <div class="row">
                <div class="col-md-3 ms-auto">col-md-3、ms-auto</div>
                <div class="col-md-2 ms-auto">col-md-2、ms-auto</div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>