BoootStrap のGridシステムについて

この記事はAizu Advent Calender 2021の１日目の記事です。

##はじめに
最近、Webページを作成しています。レスポンシブなWebサイト作成にBootStrap使ってみました。皆さんにも紹介をしたいと思って今回の記事を書きました。

##BootStraptって？
ナビゲーションバーや、入力フォームなどのクラスが用意されており、クラス名を組み込むだけで、簡単にサイトを作成できる。
また、レスポンシブなサイトを簡単に作れる。

##導入方法

• みんな大好きCDN(下に例があります!!)
• npm,yarnなどのパッケージ
• 他は公式ページ見てね

BootStrapダウンロードはここから

##Gridシステムとは

• #####12カラムのシステム
  下図のように、ウィンドウは12個のカラムで、分割されています。

自分の好みに応じて、カラムの大きさを変えれます。(数字はカラムの数を表している)

• #####6段階のレスポンシブ
  6つのデフォルトのブレークポイントが用意されている。
  ブレークポイントに応じて、グリッドのレイアウトを変更できる。
  

ブレークポイントを**sm(576px)**にした、コードはこのようになります

See the Pen Untitled by suzu144 (@mattya144) on CodePen.

#####ブレークポイント576px

#####ブレークポイント768px

##終わりに
BootStrapのグリッドシステムについて、少しは理解できたでしょうか？？
今回初めての記事なので、分かりづらい部分があると思いますが、ご了承ください🙇‍♀️🙇‍♀️

##参考資料
BootStrap公式ページ