世界で一番人気のあるフロントエンドライブラリ Bootstrapモバイルファーストなレスポンシブウェブを素早くデザイン・カスタマイズできます。Sass変数と mixin、レスポンシブグリッドシステム、豊富なコンポーネント、強力な JavaScript プラグインを備えています。
だそうです。わかりましたか？(うん、横文字だらけで私はよくわからん)
Bootstrapが使えるCodePenの環境を用意したのでこれをいじいじしながら説明していきますhttps://codepen.io/kenchasonakai/pen/jOZyjbo
公式サイトによると
グリッドシステムは、12 カラムのシステムと 5 段階のレスポンシブ、Sass と mixin、いくつかの定義されたクラスですべての図形とサイズのレイアウトを作成可能です。
簡単にcontainerとrowとcolについて説明します
<div class="container">
<div class="row">
<div class="col">
カラム
</div>
<div class="col">
カラム
</div>
<div class="col">
カラム
</div>
</div>
</div>
これだとわかりにくいので色をつけてみましょう
<body>
<div class="container bg-white">
<div class="row">
<div class="col bg-primary">
カラム1
</div>
<div class="col bg-warning">
カラム2
</div>
<div class="col bg-danger">
カラム3
</div>
</div>
</div>
</body>
増やしてみましょう
<body>
<div class="container">
<div class="row">
<div class="col bg-primary">
カラム1
</div>
<div class="col bg-warning">
カラム2
</div>
<div class="col bg-danger">
カラム3
</div>
</div>
<div class="row">
<div class="col bg-primary">
カラム1
</div>
<div class="col bg-warning">
カラム2
</div>
<div class="col bg-danger">
カラム3
</div>
</div>
</div>
</body>
colに値を持たせてみましょう
<body>
<div class="container">
<div class="row">
<div class="col-8 bg-primary">
カラム1
</div>
<div class="col-2 bg-warning">
カラム2
</div>
<div class="col-2 bg-danger">
カラム3
</div>
</div>
<div class="row">
<div class="col-1 bg-primary">
カラム1
</div>
<div class="col-1 bg-warning">
カラム2
</div>
<div class="col-10 bg-danger">
カラム3
</div>
</div>
</div>
</body>
containerクラスの中にrowで横１列で表示したいものを配置してcolでどのくらいの幅を持たせたいのかを決定するみたいなイメージが持てればOKです