bootstrap

初期設定
https://netanswer.co.jp/blog/143/

スマホの時だけ中央寄せ
<p class="text-center text-md-left">

グリッドレイアウトサンプル
https://codepen.io/takeshi-du/pen/mzmemX

不具合チェック
・class名がありがちな名前になっていないか（bootstrapと競合する可能性あり）
・javaが動かない場合は、jqueryのバージョンにあわせて差し替える

●タグ

・p-3　パディング
・mb-2　マージン
・container→row→col-6
・col-auto　可変
・border rounded　角丸の枠
・text-center　中央寄せ
・（button）btn btn-lg btn-primary btn-block　ボタン
・offset-sm-3　左余白
・order-lg-2　並び順　order-lg-2の場合はlg画面で2番目に表示

●改行
・スマホの時だけ改行
<br class=”d-none d-lg-inline”>
< br class=”hidden-xs”>
<br class=”d-sm-none”>

●表示非表示の切り替え
.d-none .d-md-block→768以下で非表示（PC用）
.d-md-none→768以上で非表示（スマホ用）
https://bootstrap-guide.com/utilities/display

PC：d-none d-md-block
スマホ：d-md-none

http://clue-design.com/bootstrap4/bootstrap4-pc-sp-img-change

●画像右よせ
float-sm-right pl-sm-5
画像 class=”mb-5

colの画面サイズ切り替え
▼PCサイズではA,スマホサイズ（ではBを表示したい
———————————–
スマホ版を 960px 以下にした場合
col-lg-A col-B
col-lg-A col-B offset-lg-3

スマホ版を 540px 以下にした場合
col-sm-A col-B
https://bootstrap-guide.ape.jp/v4/layout/grid
———————————–

■ページネーション
https://bootstrap-guide.com/components/pagination

中央揃え、左揃えの調整
Flexユーティリティを使用してページ設定コンポーネントの配置を変更。

●ブラウザサイズごとの余白設定
mb-md-0 mb-4
スマホだけ下の余白4
https://bootstrap-guide.com/utilities/spacing