目次
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」の読み込みが必要です。設定の方法については、こちらを参照してください。)
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://nllllll.com/wp-content/uploads/2022/04/Users_yusei_okuyama_Desktop_nippou_design_index_sample.htmliPhone-XR-1-300x163.png)
【Bootstrap】「Bootstrap 4.5」と「Font Awesome 6」を使ってシンプルかつおしゃれなアイコンメニュー…
日報管理アプリの作成にあたって、ヘッダーのデザインを出来るだけシンプルにしたいと思い「Font Awesome 5」のアイコンを使ったメニューバーを作成してみました。 完成…
ちなみに…
Bootstrap 4.5系の場合はこちら。
少しだけコードが変わってきますね。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://nllllll.com/wp-content/uploads/2022/01/スクリーンショット-2022-01-18-9.57.59-300x77.png)
【Bootstrap4.5】基本の検索フォームとボタンの作り方(コピペで簡単!すぐに使えるテンプレートあり!)
Bootstrap4.5系用 基本の検索フォーム Webサイトでよく見る、入力フォームと検索ボタンがくっついた「検索フォーム」Bootstrapで簡単に作れちゃいます。 <div class=…