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

目次

Bootstrap4.5系用 基本の検索フォーム

Webサイトでよく見る、入力フォームと検索ボタンがくっついた「検索フォーム」
Bootstrapで簡単に作れちゃいます。

<div class="input-group">
  <input type="text" id="txt-search" class="form-control input-group-prepend" placeholder="キーワードを入力"></input>
  <span class="input-group-btn input-group-append">
    <submit type="submit" id="btn-search" class="btn btn-primary"><i class="fas fa-search"></i> 検索</submit>
  </span>
</div>

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

ちなみに…

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

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

この記事を書いた人

目次
閉じる