最初に来る短縮文字の候補
| 省略名 | 正式名(推測) | 説明 | 使用例 |
|---|---|---|---|
| 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/