だいそんさんから紹介されました！

前も貼ったかもしれませんがflexboxの勉強ならこれゲーム性あっておもろいです

https://flexboxfroggy.com/#ja

あと、カードを高さや幅などを統一したい場合、card-deckという機能があります！

Bootstrapのドキュメント

ただ、２列に並べたい場合、うまくいかなかったのですが、このあたりを参考にしたらうまくできました。

StackOverFlow

StackOverFlowで紹介されていたコード

日本語で参考になりそうなブログ（ただ、列を複数にする方法について直接説明しているわけではない）

色々と残念なところもありますが、実践例がこちらです！

みけたの実践例

あと、TechEssentialsはカードを使いまくっているので、

だいそんさんのコードを検証ツールで見てみると勉強になります！

例えば、https://tech-essentials.work/movies では全部のcardをcard-deck
に入れて、

動画の高さあたりを均等に整えています！（おそらく）

いろいろなパターンがあって、面白いですね！

動画ではcard-deck知らないと言ってましたが知らず知らずのうちに使ってましたね笑

いろいろと共有ありがとうございます！

card-deck知らなかったです今度使ってみます！

すごく勉強になりました！！

見直し用

• bootstrapについて 5:00~

• <div class="container"></div> 5:28~

• コンテナほぼ横幅いっぱいにできる 6:00~
  <div class="container-fluid"></div>

• 画面幅に対する横幅(グリッドシステム) 6:37~

  <div class="row">
  <div class="col-12">横幅12分の12の領域</div>
  <div class="col-3">12分の3の領域</div><div class="col-3">12分の3の領域</div><div class="col-3">12分の3の領域</div><div class="col-3">12分の3の領域</div>
  <div class="col-9">12分の９の領域</div><div class="col-3">12分の3の領域</div>
  </div>
  

  

• 画面が小さくなった時（携帯の画面）の対応 8:30~
  例
  <div class="col-sm3 col-12">画面が小さくなるまで12分の3で表示</div>
  画面が大きい場合の変更
  <div class="col-md-4 col-sm-3 col-12">画面が大きくなると12分の4で表示</div>

• ここまでのまとめ 13:00~

• 画面の分割の中でさらに分割 13:48~

• row について 15:15~

• サイドメニューの作り方 18:35~

• bootstrapのホームページからメニューバー(Navber)を作る 20:00~
  https://getbootstrap.jp/docs/5.0/components/navbar/

• ボタンについて 23:35~

• bootstrapのホームページからメニューバー(Navber)を作る つづき 28:51~

• フラッシュメッセージ 29:13~

• バッジ、ラベル 30:00~
  タグ付けの時とかに使える

• パンくずリスト(Breadcrumb) 30:50~
  現在のページの位置を示す方法

• ボタンの大きさ 31:08~

• Card について 34:06~

• 中央配置 45:38~

• タブの作り方 48:00~

• form画面見栄え 49:40~
  <div class="offset-3 col-6">ちょうど良い感じの真ん中にできる
  ※ offset-3 は左から３空ける

• Media object について　58:56~
  https://getbootstrap.jp/docs/5.0/utilities/flex/#media-object

• Modal 1:02:30~
  https://getbootstrap.jp/docs/5.0/components/modal/

• ポップオーバー(補足付け) 1:08:30~

• スピナーズ(ローリングのやつ) 1:10:40~

• bootstrap のままだとサンプルアプリ感があるのでそういう時の対処法 1:13:20~

• ビューポートについて 1:15:30~