fade
bootstrap5.css
bootstrap5.css
.fade {
transition: opacity 0.15s linear;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
.fade {
transition: none;
}
}
bootstrap5.css
.fade:not(.show) {
opacity: 0;
}
bootstrap5.css
.modal.fade .modal-dialog {
transition: transform 0.3s ease-out;
transform: translate(0, -50px);
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog {
transition: none;
}
}
bootstrap5.css
.modal-backdrop.fade {
opacity: 0;
}
bootstrap5.css
/* rtl:end:ignore */
.carousel-fade .carousel-item {
opacity: 0;
transition-property: opacity;
transform: none;
}
bootstrap5.css
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
z-index: 1;
opacity: 1;
}
bootstrap5.css
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
z-index: 0;
opacity: 0;
transition: opacity 0s 0.6s;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
transition: none;
}
}
html bootstrap5 Sample
js アラートを閉じるボタンで消す:alert-bs-dismissible
右側の「×」マークをクリックするとアラートが閉じます
<!-- btn-closeで×マーク background: svg -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
右側の「×」マークをクリックするとアラートが閉じます
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
js アラートを閉じるボタンでしか消えないモーダル:data-bs-backdrop
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#staticBackdropLive">×でしか閉じないモーダル</button>
<div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>I will not close if you click outside me. Don't even try to press escape key.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
リストグループとタブ:list-home-listとtab
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="tab"
href="#list-home" role="tab" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="tab"
href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="tab"
href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="tab"
href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
<p>本文home</p>
</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
<p>本文profile</p>
</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
<p>本文messages</p>
</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
<p>本文settings</p>
</div>
</div>
</div>
</div>
js タブパネル:navとnav-tabsとdata-bs-toggleとtablist
ホームのコンテンツ
プロフィールのコンテンツ
コンタクトのコンテンツ
<!-- タブ部分 -->
<!-- role="tablist"、 role="tab"、 role="tabpanel"、aria- 属性が必要 -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab"
aria-controls="home" aria-selected="true">ホーム</a></li>
<li class="nav-item"><a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab"
aria-controls="profile" aria-selected="false">プロフィール</a></li>
<li class="nav-item"><a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab"
aria-controls="contact" aria-selected="false">コンタクト</a></li>
</ul>
<!-- パネル部分 -->
<!-- herfの#とidで切り替える -->
<div class="tab-content mt-3" id="myTabContent">
<!-- tab-pane fade show active -->
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツ</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツ</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツ</div>
</div>
js 縦タブパネル:navとnav-tabsとdata-bs-toggleとtablist
縦パネル1Home
縦パネル2Profile
縦パネル3Messages
縦パネル4Settings
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab"
aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab"
aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab"
aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<p>縦パネル1Home</p>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<p>縦パネル2Profile</p>
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<p>縦パネル3Messages</p>
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<p>縦パネル4Settings</p>
</div>
</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 モーダルのアニメーション設定:fade
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModal2">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModal2"-->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
モーダルの本文が入ります。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
js 垂直方向中央に配置するモーダル:modal-dialog-centered
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModal3">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModal3"-->
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<!-- モーダルの×ボタン -->
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
モーダルの本文が入ります。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
<style>
.row>.col,
.row>[class^=col-] {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: f8f8ff;
border: 1px solid #aaa;
}
</style>
js グリッドレイアウトを使用したモーダル:rowとcol
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModal4">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModal4"-->
<div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<!-- container-fluidは画面いっぱい -->
<div class="container-fluid">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 ms-auto">col-md-4、ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">col-md-3、ms-auto</div>
<div class="col-md-2 ms-auto">col-md-2、ms-auto</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
js 長いコンテンツのモーダル:modal-body
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModal5">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModal5"-->
<div class="modal fade" id="exampleModal5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog" role="document">
<!-- モーダルのコンテンツ -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
js 長いコンテンツ、スクロールのモーダル:modal-dialog-scrollable
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModalsc">スクロールモーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModalsc"-->
<div class="modal fade" id="exampleModalsc" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog modal-dialog-scrollable" role="document">
<!-- モーダルのコンテンツ -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
js 大きなサイズのモーダル サイズのオプション:modal-lg
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#largeModal6">大きなモーダルボタン</button>
<!-- モーダル id="largeModal6"-->
<div class="modal fade" id="largeModal6" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel"
aria-hidden="true">
<!-- 大きなモーダルのダイアログ本体modal-lg -->
<!-- modal-sm:300px,Default(None):500px,modal-lg:800px,modal-xl:1140px
-->
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">モーダルの本文</div>
<!-- モーダルのフッター -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
js 小さなサイズのモーダル:modal-sm
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#smallModal">小さなモーダルボタン(modal-sm)</button>
<!-- モーダル id="smallModal"-->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
aria-hidden="true">
<!-- 小さなモーダルのダイアログ本体modal-sm -->
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="smallModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">モーダルの本文</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>