Bootstrapのモーダルウィンドウは
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal1">モーダルウィンドウ1</button>
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-content">
モーダルウィンドウ最小セット
</div>
</div>
でとりあえず起動します。
自分で好きなウィンドウにすることもできます
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
<div style="width:300px; height:300px; background: white; border:10px solid red;">
aaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaa<br>
</div>
</div>
Bootstrapらしいモーダルウィンドウにする場合は
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">ウィンドウタイトル</h4>
</div>
<div class="modal-body">
<p>テキスト</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
とします。
Bootstrapの画面サイズ
xs : Phones (<768px)
sm : Tablets (≥768px)
md : Desktops (≥992px)
lg : Desktops (≥1200px)
この画面サイズ画面サイズによって要素を【表示・非表示】させるには以下のようにクラス指定します
例：スマホにだけ表示させる場合
<div class="visible-xs">これはスマホの画面サイズの時のみ表示されます</div>
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
Bootstrapはいちいちダウンロードしなくてもサーバ上のファイルを直接指定するだけで使用できます。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
です。
これをhtmlファイルの`
〜` 内に埋め込みます。
Font AwesomeのWEBフォントをフォームのボタンに使用するには以下のようにします。
http://fortawesome.github.io/Font-Awesome/ からダウンロードしてきてサーバにアップロードします。
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
で読み込ませます（ディレクトリは適宜書き換えてください。）
<input type="button" class="fontawesome_submit" value=" ボタンのテスト">
.fontawesome_submit{
font-family: FontAwesome;
}
以上でOKです。簡単ですね。

のところがfont Awesomeのフォントです。 これを下記の表を元に好きなコードに書き換えるといいでしょう。
ブラウザごとの表示の差をなくすために下記のようなリセットをするCSSを最初に読み込ませるといいです。
2025年版はこちらがおすすめです。
https://github.com/mayank99/reset.css/blob/main/package/index.css
リポジトリはこちら
https://github.com/mayank99/reset.css