bootstrap4.css
.d-flex {
display: -ms-flexbox !important;
display: flex !important;
}
bootstrap4.css
@media (min-width: 768px) {
.d-md-none {
display: none !important;
}
.d-md-inline {
display: inline !important;
}
.d-md-inline-block {
display: inline-block !important;
}
.d-md-block {
display: block !important;
}
.d-md-table {
display: table !important;
}
.d-md-table-row {
display: table-row !important;
}
.d-md-table-cell {
display: table-cell !important;
}
.d-md-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.d-md-inline-flex {
display: -ms-inline-flexbox !important;
display: inline-flex !important;
}
}
■レイアウト:Flex d-flex:ユーティリティ:flexの折り返し flex-nowrap 折り返しなし
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex flex-nowrap">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの折り返し flex-wrap いい感じで自動で折り返す
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex flex-wrap">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの折り返し flex-wrap-reverse いい感じで自動で折り返す、ボトムを合わせる
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex flex-wrap-reverse">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの自動整列 align-content-start 高さ固定
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-start flex-wrap" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの自動整列 align-content-end 高さ固定
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-end flex-wrap" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの自動整列 align-content-center 高さ固定
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-center flex-wrap" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの自動整列 align-content-between 高さ固定
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-between flex-wrap" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの自動整列 align-content-around 高さ固定
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-around flex-wrap" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの自動整列 align-content-stretch 縦の高さも勝手に合わせてくる
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-stretch flex-wrap" style="height: 400px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flex交差軸方向の整列 align-items-stretch
flex文字01
flex文字02
flex文字03
<div class="d-flex align-items-stretch" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flex交差軸方向の整列 align-items-start
flex文字01
flex文字02
flex文字03
<div class="d-flex align-items-start" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flex交差軸方向の整列 align-items-end
flex文字01
flex文字02
flex文字03
<div class="d-flex align-items-end" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flex交差軸方向の整列 align-items-center
flex文字01
flex文字02
flex文字03
<div class="d-flex align-items-center" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flex交差軸方向の整列 align-items-baseline
flex文字01
(padding: 2rem)
(padding: 2rem)
flex文字02
(padding: 4rem)
(padding: 4rem)
flex文字03
(padding: 1rem)
(padding: 1rem)
<div class="d-flex align-items-baseline" style="height: 200px">
<div style="padding: 2rem">flex文字01 <br>(padding: 2rem)</div>
<div style="padding: 4rem">flex文字02 <br>(padding: 4rem)</div>
<div style="padding: 1rem">flex文字03 <br>(padding: 1rem)</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexを交差軸上で個別に整列 align-self-stretch
flex文字01
flex文字02(align-self-stretch)
flex文字03
<div class="d-flex" style="height: 100px">
<div>flex文字01</div>
<div class="align-self-stretch">flex文字02(align-self-stretch)</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexを交差軸上で個別に整列 align-self-start
flex文字01
flex文字02(align-self-start)
flex文字03
<div class="d-flex" style="height: 100px">
<div>flex文字01</div>
<div class="align-self-start">flex文字02(align-self-start)</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexを交差軸上で個別に整列 align-self-end
flex文字01
flex文字02(align-self-end)
flex文字03
<div class="d-flex" style="height: 100px">
<div>flex文字01</div>
<div class="align-self-end">flex文字02(align-self-end)</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexを交差軸上で個別に整列 align-self-center
flex文字01
flex文字02(align-self-center)
flex文字03
<div class="d-flex" style="height: 100px">
<div>flex文字01</div>
<div class="align-self-center">flex文字02(align-self-center)</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexを交差軸上で個別に整列 align-self-baseline
flex文字01
flex文字02(align-self-baseline)
flex文字03
<div class="d-flex" style="height: 100px">
<div>flex文字01</div>
<div class="align-self-baseline">flex文字02(align-self-baseline)</div>
<div>flex文字03 </div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナ全幅等幅整列 デフォルト 左から並ぶ 改行はしない
flex文字01
flex文字02
flex文字03
<div class="d-flex">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナ全幅等幅整列 flex-fill 横幅で等幅
flex文字01
flex文字02
flex文字03
<div class="d-flex">
<div class="flex-fill">flex文字01</div>
<div class="flex-fill">flex文字02</div>
<div class="flex-fill">flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向 左から右(flex-row)
flex文字01
flex文字02
flex文字03
<div class="d-flex flex-row">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向右から左(flex-row-reverse)
flex文字01
flex文字02
flex文字03
<div class="d-flex flex-row-reverse">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向上から下(flex-column)縦並びも横並びと同じ発想
flex文字01
flex文字02
flex文字03
<div class="d-flex flex-column">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向下から上(flex-column-reverse)
flex文字01
flex文字02
flex文字03
<div class="d-flex flex-column-reverse">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flex文字の伸縮 デフォルト
flex文字01
flex文字02
flex文字03
<div class="d-flex" style="height: 100px">
<div class="p-2">flex文字01</div>
<div class="p-2">flex文字02</div>
<div class="p-2">flex文字03</div>
</div>
<!-- flex文字の幅を伸長する -->
■レイアウト:Flex d-flex:ユーティリティ:flex文字の伸縮 flex-grow 余白を埋める機能
flex文字01(flex-grow-1)
flex文字02
flex文字03
<div class="d-flex" style="height: 100px">
<div class="p-2 flex-grow-1">flex文字01(flex-grow-1)</div>
<div class="p-2">flex文字02</div>
<div class="p-2">flex文字03</div>
</div>
<!-- flex文字の幅を縮小する -->
■レイアウト:Flex d-flex:ユーティリティ:flex文字の伸縮 flex-shrink 余白で縮小される(他を優先)
flex文字01(flex-shrink-1)
flex文字02
flex文字03
<div class="d-flex" style="height: 100px">
<div class="p-2 flex-shrink-1">flex文字01(flex-shrink-1)</div>
<div class="p-2 w-100">flex文字02</div>
<div class="p-2 w-100">flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:特定のflex文字の表示順序を入れ替えるクラス
flex文字01
flex文字02
flex文字03
<div class="d-flex">
<div class="order-1">flex文字01</div>
<div class="order-3">flex文字02</div>
<div class="order-2">flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向の整列 justify-content-start
flex文字01
flex文字02
flex文字03
<div class="d-flex justify-content-start">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向の整列 justify-content-end
flex文字01
flex文字02
flex文字03
<div class="d-flex justify-content-end">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向の整列 justify-content-center
flex文字01
flex文字02
flex文字03
<div class="d-flex justify-content-center">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向の整列 justify-content-between
flex文字01
flex文字02
flex文字03
<div class="d-flex justify-content-between">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向の整列 justify-content-around
flex文字01
flex文字02
flex文字03
<div class="d-flex justify-content-around">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flex自動マージン デフォルト(自動マージンなし)
flex文字1
flex文字2
flex文字3
<div class="d-flex">
<div>flex文字1</div>
<div>flex文字2</div>
<div>flex文字3</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flex自動マージン 右側に分離(mr-auto)ナビ的な場合に、左と右側でそれぞれ真ん中空ける形式
flex文字1
flex文字2
flex文字3
<div class="d-flex">
<div class="mr-auto">flex文字1</div>
<div>flex文字2</div>
<div>flex文字3</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flex自動マージン 左側に分離(ml-auto)
flex文字1
flex文字2
flex文字3
<div class="d-flex">
<div>flex文字1</div>
<div>flex文字2</div>
<div class="ml-auto p-2">flex文字3</div>
</div>
■リストグループ:list-group:コンポーネント:バッジ付きリストグループ
- リスト項目1 14
- リスト項目2 2
- リスト項目3 1
<section class="w-50 m-auto my-5">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト項目1
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト項目2
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト項目3
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</section>
■リストグループ:list-group:コンポーネント:カスタムコンテンツの リストグループ aタグ
<section class="w-50 m-auto my-5">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">リスト項目1のヘッダ</h5>
<small>3日前</small>
</div>
<p class="mb-1">リスト項目1のコンテンツの見本です。</p>
<small>リスト項目1のサブコンテンツです</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">リスト項目2のヘッダ</h5>
<small class="text-muted">3日前</small>
</div>
<p class="mb-1">リスト項目2のコンテンツの見本です。</p>
<small class="text-muted">リスト項目2のサブコンテンツです。</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">リスト項目3のヘッダ</h5>
<small class="text-muted">3日前</small>
</div>
<p class="mb-1">リスト項目3のコンテンツの見本です。</p>
<small class="text-muted">リスト項目3のサブコンテンツです。</small>
</a>
</div>
</section>
■ドロップダウン:dropdown-menu:コンポーネント:ドロップダウン方向を変更する
<div class="container py-5 d-flex justify-content-center">
<!-- 上方向へのドロップ -->
<div class="btn-group dropup">
<!-- 切り替えボタン -->
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">上方向へのドロップ</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
</div>