コンテナ
可変幅
1
2
3
固定幅
1
2
3
カラム
col-sm-2
col-sm-2
col-sm-4
col-sm-4
ブロックA
ブロックB
ブロックC
ブロック配置の変化
ブロックA
ブロックB
ブロックC
並び順の変更
ブロックA
ブロックB
ブロックC
要素の表示／非表示
ブロックA
PC広告
ブロックB
スマホ広告
ブロックC
グリッド
カラム６→３→１
.col-md-2 .col-sm-4
.col-md-2 .col-sm-4
.col-md-2 .col-sm-4
.col-md-2 .col-sm-4
.col-md-2 .col-sm-4
.col-md-2 .col-sm-4
カラム４→２→１
.col-md-3 .col-sm-6
.col-md-3 .col-sm-6
.col-md-3 .col-sm-6
.col-md-3 .col-sm-6
カラム2→２→１
.col-lg-6 .col-sm-12
.col-lg-6 .col-sm-12
レスポンシブイメージ
イメージとテキストの落としこみ
チャマ
狸はかっこうのかっこうねずみたちと窓がぶっつかっ小節だらで。いやすぐ生意気たたて楽長だだ。上手たたものないはましまたあとの残念団のうちをはどうかいい気ましじて、こればかり先生をすぼめがっのるず。するすぎ何は畑がこわくないて一生の楽屋の二つあたりをいっ第六ゴーシュみちのおじぎをするて来だた
ネコネコ
すると前はおいおいだまったです。円く安心なとあるてきて別に弾くようましゴーシュに聞きつけてそこでまるで舞台から日あいんない。間もなくかとゴーシュはてやはり弾きたたてなくのからは今夜は駒の楽長たん。生はみんなへこんどな狸のまま私を云っましようになゴーシュ窓へ巻に教えてこれかよろこんのにつか扉をぱっと出てシュッ叩きましまし。「丈夫です。
行揃えの指定
東京都新宿区百人町0-0-0ABCDビル4F
TEL : 03-1234-5678
Card
Card header
カードのタイトル
カード全体にborder-primaryのクラスを適用しています。文字色も text-primaryのクラスで変更しています。
Card header
カードのタイトル
カード全体にbg-darkの背景色が適用されています。また、文字色をtext-whiteのクラスで白色に変更しています。
Card header
カードのタイトル
カード全体にbg-primaryの背景色が適用されています。また、文字色をtext-whiteのクラスで白色に変更しています。
Card header
カードのタイトル
カード全体だけでなく、ヘッダー・フッターにもborder-primaryのクラスを適用すると、このように枠線が着色されます。
Card header
カードのタイトル
ヘッダーとフッターに異なる背景色が適用されています。必要に応じて、文字色を白色に変更しています。
Card header
カードのタイトル
カード全体にbg-darkの背景色を適用し、ヘッダー・フッターにborder-whiteのクラスを適用すると、このような結果になります。