d-block
bootstrap5.css
bootstrap5.css
.d-block {
display: block !important;
}
bootstrap5.css
@media (min-width: 768px) {
.float-md-start {
float: left !important;
}
.float-md-end {
float: right !important;
}
.float-md-none {
float: none !important;
}
.d-md-inline {
display: inline !important;
}
.d-md-inline-block {
display: inline-block !important;
}
.d-md-block {
display: block !important;
}
.d-md-grid {
display: grid !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: flex !important;
}
.d-md-inline-flex {
display: inline-flex !important;
}
.d-md-none {
display: none !important;
}
.flex-md-fill {
flex: 1 1 auto !important;
}
.flex-md-row {
flex-direction: row !important;
}
.flex-md-column {
flex-direction: column !important;
}
.flex-md-row-reverse {
flex-direction: row-reverse !important;
}
.flex-md-column-reverse {
flex-direction: column-reverse !important;
}
.flex-md-grow-0 {
flex-grow: 0 !important;
}
.flex-md-grow-1 {
flex-grow: 1 !important;
}
.flex-md-shrink-0 {
flex-shrink: 0 !important;
}
.flex-md-shrink-1 {
flex-shrink: 1 !important;
}
.flex-md-wrap {
flex-wrap: wrap !important;
}
.flex-md-nowrap {
flex-wrap: nowrap !important;
}
.flex-md-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.gap-md-0 {
gap: 0 !important;
}
.gap-md-1 {
gap: 0.25rem !important;
}
.gap-md-2 {
gap: 0.5rem !important;
}
.gap-md-3 {
gap: 1rem !important;
}
.gap-md-4 {
gap: 1.5rem !important;
}
.gap-md-5 {
gap: 3rem !important;
}
.justify-content-md-start {
justify-content: flex-start !important;
}
.justify-content-md-end {
justify-content: flex-end !important;
}
.justify-content-md-center {
justify-content: center !important;
}
.justify-content-md-between {
justify-content: space-between !important;
}
.justify-content-md-around {
justify-content: space-around !important;
}
.justify-content-md-evenly {
justify-content: space-evenly !important;
}
.align-items-md-start {
align-items: flex-start !important;
}
.align-items-md-end {
align-items: flex-end !important;
}
.align-items-md-center {
align-items: center !important;
}
.align-items-md-baseline {
align-items: baseline !important;
}
.align-items-md-stretch {
align-items: stretch !important;
}
.align-content-md-start {
align-content: flex-start !important;
}
.align-content-md-end {
align-content: flex-end !important;
}
.align-content-md-center {
align-content: center !important;
}
.align-content-md-between {
align-content: space-between !important;
}
.align-content-md-around {
align-content: space-around !important;
}
.align-content-md-stretch {
align-content: stretch !important;
}
.align-self-md-auto {
align-self: auto !important;
}
.align-self-md-start {
align-self: flex-start !important;
}
.align-self-md-end {
align-self: flex-end !important;
}
.align-self-md-cent
html bootstrap5 Sample
rowとcolの行の分割をブレイクポイントで切り替える:d-none d-md-block
col
col
col
col
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100 d-none d-md-block"></div>
<!-- Medium以上では{dsplay:block}、未満では{display:none} -->
<div class="col">col</div>
<div class="col">col</div>
</div>
背景に色を付ける:bg-primary
<div class="text-center">
<p><a href="#" class="bg-primary text-white d-block py-2">bg-primary</a></p>
<p><a href="#" class="bg-secondary text-white d-block py-2">bg-secondary</a></p>
<p><a href="#" class="bg-success text-white d-block py-2">bg-success</a></p>
<p><a href="#" class="bg-danger text-white d-block py-2">bg-danger</a></p>
<p><a href="#" class="bg-warning text-dark d-block py-2">bg-warning</a></p>
<p><a href="#" class="bg-info text-white d-block py-2">bg-info</a></p>
<p><a href="#" class="bg-light text-dark d-block py-2">bg-light</a></p>
<p><a href="#" class="bg-dark text-white d-block py-2">bg-dark</a></p>
<p><a href="#" class="bg-white text-dark d-block py-2">bg-white</a></p>
<p><a href="#" class="bg-transparent d-block py-2">bg-transparent</a></p>
</div>
ブロック表示のspan:d-block
画像の中央寄せ:mx-autoとd-block
js カルーセル基本的な使用例:carousel slideとdata-bs-ride
<div class="container">
<!-- 複数の画像を用意して、回転木馬のように自動で切り替えていく -->
<!-- slideさせていく -->
<div class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide"
src="https://via.placeholder.com/1600x900/FFFF00/000000?text=First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide"
src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide"
src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Third slide">
</div>
</div>
</div>
</div>
js インジケータ、タイトル、キャプション付きカルーセル:carousel-indicatorsとdata-bs-slide-to
<div id="carouselSample" class="carousel slide" data-bs-ride="carousel">
<!-- インジケーターによるフェード遷移(好きな場所にクリックでいける) -->
<ol class="carousel-indicators">
<li data-bs-target="#carouselSample" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselSample" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselSample" data-bs-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" slide"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前と次のアイコン付きカルーセル -->
<a class="carousel-control-prev" href="#carouselSample" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">前に戻る</span>
</a>
<a class="carousel-control-next" href="#carouselSample" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">次に送る</span>
</a>
</div>
js データ属性でインターバルの設定:data-bs-interval
<div class="container">
<!-- intervalの設定 -->
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="15000">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
</div>
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">次に送る</span>
</a>
</div>
</div>
js データ属性でフェードトランジションの設定:carousel-fade
<div class="container">
<!-- スライドの代わりにフェードトランジションでスライドをアニメーションさせる -->
<div id="carouselExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<div class="carousel-caption">
<h5>スライドタイトル1</h5>
<p>スライドのキャプション3</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/665566/FF0000/000000?text=Second slide">
<div class="carousel-caption">
<h5>スライドタイトル2</h5>
<p>スライドのキャプション3</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/664466/FFEE00/000000?text=Third slide">
<div class="carousel-caption">
<h5>スライドタイトル3</h5>
<p>スライドのキャプション3</p>
</div>
</div>
</div>
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">次に送る</span>
</a>
</div>
</div>
js インジケーター、キャプションを暗くする:carousel-dark
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>image svg 1</title>
<rect width="100%" height="100%" fill="#f5f5f5" /><text x="50%" y="50%" fill="#aaa" dy=".3em">First
slide</text>
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>First タイトル</h5>
<p>First xxxxxxxxxxxxxx</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>image svg 2</title>
<rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#bbb" dy=".3em">Second
slide</text>
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>Second タイトル</h5>
<p>Second xxxxxxxxxxxxxx</p>
</div>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>image svg 3</title>
<rect width="100%" height="100%" fill="#e5e5e5" /><text x="50%" y="50%" fill="#999" dy=".3em">Third
slide</text>
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>Third タイトル</h5>
<p>Third xxxxxxxxxxxxxx</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="visually-hidden">Previous
</a>
<a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
<span class="visually-hidden">Next
</a>
</div>