bootstrap4レイアウトcol

HOME > bootstrap4レイアウトcol

最終更新:2021/04/06

参考サイト

参考サイト2

参考サイト3

 

 

colブレイクポイント

「-n」の「n」は数字が入ります。
今まで通り「1~12」でグリッド数を指定。

今までと大体同じところでレイアウトの切り替えをするとしたら、
col-xs-n=col-n
col-sm-n=col-md-n
col-md-n=col-lg-n

で使うのが今までの感覚と一番近いかと思います。

h3見出しにpxサイズとそのサイズが当てはまる端末を書いていますが、端末はスマホでもタブレットでもAndroidやiOS等、種類が多岐にわたるため断定は難しいです。
参考程度に思ってください。

 

全幅適用(スマホ~PC)

col-n

col-6

col-6


<div class="row">
	<div class="col-6"><p class="gray-box">col-6</p></div>
	<div class="col-6"><p class="Blue-box">col-6</p></div>
</div>

 

576px以上適用(スマホ横にしたときの幅~PC)

col-sm-n

col-sm-6

col-sm-6

<div class="row">
	<div class="col-sm-6"><p class="gray-box">col-sm-6</p></div>
	<div class="col-sm-6"><p class="Blue-box">col-sm-6</p></div>
</div>

 

768px以上適用(タブレット~PC)

col-md-n

col-md-6

col-md-6

<div class="row">
	<div class="col-md-6"><p class="gray-box">col-md-6</p></div>
	<div class="col-md-6"><p class="Blue-box">col-md-6</p></div>
</div>

 

992px以上適用(タブレット横にしたときの幅~PC)

col-lg-n

col-lg-6

col-lg-6

<div class="row">
	<div class="col-lg-6"><p class="gray-box">col-lg-6</p></div>
	<div class="col-lg-6"><p class="Blue-box">col-lg-6</p></div>
</div>

 

1200px以上適用(~PC)

col-xl-n

col-xl-6

col-xl-6

<div class="row">
	<div class="col-xl-6"><p class="gray-box">col-xl-6</p></div>
	<div class="col-xl-6"><p class="Blue-box">col-xl-6</p></div>
</div>

 

1~12

col-1

col-2

col-3

col-4

col-5

col-6

col-7

col-8

col-9

col-10

col-11

col-12

<div class="row">
	<div class="col-1"><p class="gray-box">col-1</p></div>
</div>
<div class="row">
	<div class="col-2"><p class="Blue-box">col-2</p></div>
</div>
<div class="row">
	<div class="col-3"><p class="gray-box">col-3</p></div>
</div>
<div class="row">
	<div class="col-4"><p class="Blue-box">col-4</p></div>
</div>
<div class="row">
	<div class="col-5"><p class="gray-box">col-5</p></div>
</div>
<div class="row">
	<div class="col-6"><p class="Blue-box">col-6</p></div>
</div>
<div class="row">
	<div class="col-7"><p class="gray-box">col-7</p></div>
</div>
<div class="row">
	<div class="col-8"><p class="Blue-box">col-8</p></div>
</div>
<div class="row">
	<div class="col-9"><p class="gray-box">col-9</p></div>
</div>
<div class="row">
	<div class="col-10"><p class="Blue-box">col-10</p></div>
</div>
<div class="row">
	<div class="col-11"><p class="gray-box">col-11</p></div>
</div>
<div class="row">
	<div class="col-12"><p class="Blue-box">col-12</p></div>
</div>

 

 

自動レイアウト

中の要素の幅、padding等によっては意図しないところでカラム落ちする場合がありますのでご注意ください。

 

等幅

「col」「col-sm」など、「-n」部分を書かない場合、全ての列が同じ幅になるようにできます。

col

col

col

col

col

<div class="row">
	<div class="col"><p class="gray-box">col</p></div>
	<div class="col"><p class="Blue-box">col</p></div>
	<div class="col"><p class="gray-box">col</p></div>
	<div class="col"><p class="Blue-box">col</p></div>
	<div class="col"><p class="gray-box">col</p></div>
</div>

 

1つの列に幅指定

1つの列に幅を指定する場合、幅を指定していない要素は等幅になります。

col

col-4

col

col

col

<div class="row">
	<div class="col"><p class="gray-box">col</p></div>
	<div class="col-4"><p class="Blue-box">col-4</p></div>
	<div class="col"><p class="gray-box">col</p></div>
	<div class="col"><p class="Blue-box">col</p></div>
	<div class="col"><p class="gray-box">col</p></div>
</div>

 

複数の列に幅指定

複数の列に幅を指定しても、幅を指定していない要素は等幅になります。

col

col-4

col

col-3

col

<div class="row">
	<div class="col"><p class="gray-box">col</p></div>
	<div class="col-4"><p class="Blue-box">col-4</p></div>
	<div class="col"><p class="gray-box">col</p></div>
	<div class="col-3"><p class="Blue-box">col-3</p></div>
	<div class="col"><p class="gray-box">col</p></div>
</div>

 

 

row、colの左右のmargin、paddingを無くしたいとき

「row」に「no-gutters」を追加します。
両サイドの隙間・col間の隙間が無くなります。
今まで「cs_row」で作っていたようなレイアウトが作成できると思います。

col-sm-4
左右の間隔がなくなり横の要素とくっつきます。

col-sm-4
左右の間隔がなくなり横の要素とくっつきます。

col-sm-4
左右の間隔がなくなり横の要素とくっつきます。

<div class="row no-gutters">
	<div class="col-sm-4">
		<p class="gray-box">col-sm-4<br>左右の間隔がなくなり横の要素とくっつきます。</p>
	</div>
	<div class="col-sm-4">
		<p class="Blue-box">col-sm-4<br>左右の間隔がなくなり横の要素とくっつきます。</p>
	</div>
	<div class="col-sm-4">
		<p class="gray-box">col-sm-4<br>左右の間隔がなくなり横の要素とくっつきます。</p>
	</div>
</div>

 

 

offset

今まで
col-○○-n col-○○-offset-n

新しいoffset
col-○○-n offset-○○-n

offsetの方から「col」が無くなって、「offset」を始めに書くようになりました。
「-n」の「n」は数字が入ります。offsetの場合「1~11」で指定します。
「○○」の部分にはどの幅まで適用させるかのブレイクポイントの指定をしてください。
ブレイクポイントはこちらをご参照ください。

offsetで指定したところを打ち消したい場合は「offset-○○-0」で余白が消えます。

 

よく使う基本offset

要素を中央寄せにします。

col-10 offset-1

<div class="row">
	<div class="col-md-10 offset-md-1">
		<p class="gray-box">col-10 offset-1</p>
	</div>
</div>

 

応用offset

要素を中央寄せにするのによく使っていましたが、他にも応用できます。

要素を交互に

col-7

col-7 offset-5

<div class="row">
	<div class="col-7">
		<p class="gray-box">col-7</p>
	</div>
	<div class="col-7 offset-5">
		<p class="Blue-box">col-7 offset-5</p>
	</div>
</div>

 

真ん中に余白

col-4

col-4 offset-4

<div class="row">
	<div class="col-4"><p class="gray-box">col-4</p></div>
	<div class="col-4 offset-4"><p class="Blue-box">col-4 offset-4</p></div>
</div>

 

カラムをとばす

col-3 offset-3

col-3 offset-3

<div class="row">
  <div class="col-3 offset-3"><p class="gray-box">col-3 offset-3</p></div>
  <div class="col-3 offset-3"><p class="Blue-box">col-3 offset-3</p></div>
</div>

 

考え方としては、
rowを12分割して、使いたい幅を「col-○○-n」で指定
12から使いたい幅を引いた分を「offset-○○-n」で指定
という感じです。

よく使う要素を中央寄せにする「offset」のヤツの場合、
rowを12分割して、使いたい幅を「col-○○-n」で指定
12から使いたい幅を引いた分を2で割って「offset-○○-n」で指定
という感じです。

 

 

表示順変更

今まで
.col-○○-n.col-○○-push-m .col-○○-m col-○○-pull-n

新しい表示順変更
.col-○○-n.order-○○-2 .col-○○-m.order-○○-1

※「n」「m」には数字が入ります。
「order」は「0~12」までの数で指定。
「0」が初期値、数が少ないほど優先度が高く前に表示され、数が多いほど優先度が低く後に表示されます。
ブレイクポイントも指定できます。

基本order

以下の例では768px以上は背景色青が前、背景色灰色が後になります。

1/col-md-8 order-md-2

2/col-md-4 order-md-1

<div class="row">
	<div class="col-md-8 order-md-2"><p class="gray-box">1/col-md-8 order-md-2</p></div>
	<div class="col-md-4 order-md-1"><p class="Blue-box">2/col-md-4 order-md-1</p></div>
</div>

 

「.order-first」「.order-last」について

数字で指定するのとは別に、「.order-first」「.order-last」というクラスでも指定できます。
「.order-first」は指定した要素を一番前に、「.order-last」は指定した要素を一番後ろに動かします。
ブレイクポイントも指定できます。

1/col-md-3 order-lg-last

2/col-md-3

3/col-md-3

4/col-md-3 order-lg-first

<div class="row">
	<div class="col-md-3 order-lg-last"><p class="yellow-box">1/col-md-3 order-lg-last</p></div>
	<div class="col-md-3"><p class="Blue-box">2/col-md-3</p></div>
	<div class="col-md-3"><p class="green-box">3/col-md-3</p></div>
	<div class="col-md-3 order-lg-first"><p class="gray-box">4/col-md-3 order-lg-first</p></div>
</div>

 

 

高さを揃える

下のような状態のときに要素の高さを揃えます。

col-6
テキストの量が違うので高さが揃いません。
テキストの量が違うので高さが揃いません。

col-6

例1 高さを合わせたい要素を高さ100%にする

高さを合わせたい要素に「.h-100」とつけます。
「.h-100」はbootstrap4に搭載されている高さを100%にするクラスです。
このとき、col直下の子要素は1つだけである必要があります。

col-6
テキストの量が違うので高さが揃いません。
テキストの量が違うので高さが揃いません。
col-6
<div class="row m10-bottom">
	<div class="col-6">
		<div style="background-color: #eee;">col-6<br>テキストの量が違うので高さが揃いません。<br>テキストの量が違うので高さが揃いません。</div>
	</div>
	<div class="col-6">
		<div class="h-100" style="background-color: #8ED6F9;">col-6</div>
	</div>
</div>

この方法を使うとき、pタグなど、上か下にmarginを指定しているタグ・クラスだとmarginの分うまくいきません。

col-6
テキストの量が違うので高さが揃いません。
pタグを使った失敗例。

col-6

<div class="row m10-bottom">
	<div class="col-6">
		<p class="gray-box">col-6<br>テキストの量が違うので高さが揃いません。<br>pタグを使った失敗例。</p>
	</div>
	<div class="col-6">
		<p class="Blue-box h-100">col-6</p>
	</div>
</div>

col直下の子要素が複数あると失敗します。
高さ100%は親要素の高さを基準にするためです。

col-6
テキストの量が違うので高さが揃いません。
col直下の子要素が複数あります。
失敗します。
col-6
col-6
<div class="row m10-bottom">
	<div class="col-6">
		<div style="background-color: #eee;">col-6<br>テキストの量が違うので高さが揃いません。<br>col直下の子要素が複数あります。<br>失敗します。</div>
	</div>
	<div class="col-6">
		<div class="h-100" style="background-color: #8ED6F9;">col-6</div>
		<div style="background-color: #eee;">col-6</div>
	</div>
</div>

 

例2 高さを合わせたい方のcolをflex-boxにしてdirectionをcolumn

col-6
テキストの量が違うので高さが揃いません。
テキストの量が違うので高さが揃いません。

col-6