More than 3 years have passed since last update.

Bootstrapの画面分割

Posted at 2020-03-28

Bootstrapの基本

html.


<html>
<div class="container">
  <div class="row">
    <div class="col-サイズ-割合">
  </div>
</div>
</html>

containerの中にrow、rowの中にcolを入れていく。
div class="col-サイズ-割合"
サイズ表：

xs	sm	md	lg
~767px	768~911px	912~1119px	1120px~
スマホ	タブレット	PC	PC大画面

割合：
画面を12分割し、割合を決めることで画面を分けることが簡単にできる。

例1：
col-lg-4
col-lg-4
col-lg-4
これらは横並びに３列均等に分割できる。