SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...

Bootstrap5でフォームを横並びにしたい

問題

Bootstrap4では .form-inline というのでフォームの要素を横並びにできたのですが、

Bootstrap5では .form-inline, .form-row, .form-group が廃止されていて横に並びません。

どうしましょう?

答え

Bootstrap5に移行するときに問題になる、互換性のない変更ですね。

.form-inline は廃止されているので、そのままだと縦に並びます。

親要素に class=”row” を付与、子要素に class=”col-auto” を付与するのが、対応方法の一つ。

<div class="row">
    <div class="col-auto">...</div>
    <div class="col-auto">...</div>
    <div class="col-auto">...</div>
    <div class="col-auto">...</div>
</div>

もうちょっとお互い寄ってほしいな~というときは、Gutterを狭くするため .g-1 などを指定。

<div class="row g-1">
    <div class="col-auto">...</div>
    <div class="col-auto">...</div>
    <div class="col-auto">...</div>
    <div class="col-auto">...</div>
</div>

上の図だと中央の「~」が、何もしないと上に寄るので、以下のようにすると上下の位置が揃う。

<span class="form-control-plaintext">~</span>

関連するメモ

コメント