infoクラスの色がこっそり変わっててかわいい

flex対応してかわいい

d-flexクラスでdisplay: flexのスタイルを付与できるようになった。均等配置や各要素のスペーシング決めなら、従来のグリッドシステムで事足りるのに、ちゃんと流行りのFlexboxが追加されててかわいい。なのでクラス指定だけでかなり柔軟にレイアウトは凝れる。

左から積む場合。

d-flex flex-rowクラスを含むdivに、子要素として各コンテンツのdivをつらつら記載するだけ。

子要素3つの場合。

←ペンギン

右から積む場合。

親要素のクラスをd-flex flex-row-reverseにするだけ。

やっとカードコンポーネントができてかわいい

一昨年くらいから盛り上がってたカードデザインのテンプレができた。マジで今更感はあるけど、まあキレイで無難で良い。

Card image cap
わんこです

筆者は犬が苦手です。

REAL MOFUMOFU

公式のリファレンスにそこそこ応用例が載っててカスタムも楽。

この犬はまぁかわいい許す。

Card image cap
これもよくあるやつね
HEADER

中央揃えとかのalign系は従来のクラスでOK。

リンクとかね
Card image
OVERLAY

画像をかぶせてフォトジェニ感アップ。

Last updated 3 mins ago

カルーセルも簡単にできてかわいい

これもここ数年でよくみるやつ。ファッション系のポータルサイトとかフォトジェニサブカルパーソナルサイトならマスト。

(画像左右クリックで切り替え)

クラス指定で細かいCSSが制御できて痒いところに手が届いちゃうかわいい

margin、paddingを指定するクラス("m-{数値}"、"p-{数値}")がすげー便利。

他にも、display属性、widthやれheightやれの制御もクラス指定でできる。

パディング




マージン




おかげさまでこのページもHTMLとBootstrap4のクラス指定だけでできています。

※style記載、個別のCSSなし

Qiitaにもまとめたよ
🐔作った人だよ

(c) suguruguruguru, 2018