最初に来る短縮文字の候補
省略名 |
正式名(推測) |
説明 |
使用例 |
d- |
display |
|
d-flex |
g[ ]- |
gutter |
ガター(カラムの左右の空白) |
g-1 |
h- |
height |
高さ |
h-25 |
m[ ]- |
margin |
マージン |
m-1 |
p[ ]- |
padding |
パディング |
p-1 |
w- |
width |
幅 |
w-25 |
bg- |
back ground |
背景カラー |
bg-primary |
fs- |
font size |
フォントの大きさ |
fs-1 |
fst- |
font style type |
フォントのタイプ |
fts-italic |
fw- |
font weight |
フォントのウェイト |
fw-bold |
lh- |
line height |
行間 |
lh-1 |
g, m, pに関しては、以下のオプションを付け加えることができる
短縮名 |
正式名(推測) |
説明 |
使用例 |
(空白) |
|
全方位 |
m-1 |
s |
start |
左 |
ms-1 |
t |
top |
上 |
mt-1 |
e |
end |
右 |
md-1 |
b |
bottom |
下 |
mb-1 |
配置用語の説明
言葉 |
説明 |
none |
非表示 |
inline |
要素が平ぺったく横に並んでいく |
inline-block |
blockとinlineの中間 |
block |
要素が横までいっぱいに広がり、縦に並んでいく |
table |
|
table-cell |
|
table-row |
|
flex |
要素のサイズから、自動で並べる(引用参照) |
inline-flex |
|
bootStrap5 document : Display property
https://getbootstrap.jp/docs/4.4/utilities/display/
【CSS】displayの使い方を総まとめ!inlineやblockの違いは?
https://saruwakakun.com/html-css/basic/display
Bootstrap4に用意されているクラス【flex編】
https://webnetamemo.com/coding/bootstrap4/201906138320
Bootstrap Flexの使い方を紹介!
https://www.fenet.jp/dotnet/column/language/6541/