YuHo のブログ

Laravel, PHP, JavaScript

Bootstrap 4 : Layout

Overview

.container

Bootstrap の Grid システムを利用するための基本的なクラス。ブレークポイントごとに幅の広さが決まっている。

.container-fluid

Bootstrap の Grid システムを利用するための基本的なクラス。幅の広さは常に画面いっぱい。

Grid

.row

.container や .container-fluid の中に行を作るためのクラス。

.col{-BR}{-N}

.row クラスで作った行の中に列を作るためのクラス。
col-md-5 などとするとブレークポイント md より大きいブレークポイントに列を適用する。
.col-md-auto などでコンテンツの表示に必要な最低限の幅を得る。

.order-N

.order-N のクラスがついている物同士の並び順を N が小さい順に並べ替える。.order-first と .order-last もある。

.offset-N

カラムに付けて、そのカラムの左側に空白のカラムを作成する。

.ml-auto

.mr-auto

.no-gutters

.row に適用することでガッターをなくすことができる。

Media object

.media

画像と文章を組み合わせて簡単なプロフィールなどを作る際の外枠。

.media-body

画像と文章を組み合わせて簡単なプロフィールなどを作る際の文章の部分。
getbootstrap.com