【Bootstrap 5】基本の検索フォームとボタンの作り方(コピペで簡単!すぐに使えるテンプレートあり!)

目次

Bootstrap 5系 基本の検索フォーム

Webサイトでよく見る、入力フォームと検索ボタンがくっついた「検索フォーム」
「Bootstrap 5」で簡単に作れちゃいます。4.5系の時もまとめてみましたが、その時と比べて、かなり分かりやすく簡単になった感じです。

<div class="input-group">
  <input type="text" class="form-control" placeholder="キーワードを入力">
  <button class="btn btn-outline-success" type="button" id="button-addon2"><i class="fas fa-search"></i> 検索</button>
</div>

「Font Awsome」を設定してあげた上で、設定すると、より「検索フォーム」っぽく仕上がります。
(※「 <i class=”fas fa-search”></i> 」の部分は、「Font Awesome」の読み込みが必要です。設定の方法については、こちらを参照してください。)

ちなみに…

Bootstrap 4.5系の場合はこちら。
少しだけコードが変わってきますね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次