■アラート:alert:コンポーネント:アラートを閉じるボタンで、アラート表示を消す
右側の「×」マークをクリックするとアラートが閉じます
<div class="alert alert-warning alert-dismissible fade show" role="alert">
右側の「×」マークをクリックするとアラートが閉じます
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
■ページネーション:pagination:コンポーネント:ページネーションにアイコンを使用する
<nav aria-label="ページネーションの例">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#" aria-label="前へ"><span aria-hidden="true">«</span><span class="sr-only">前へ</span></a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="次へ"><span aria-hidden="true">»</span><span class="sr-only">次へ</span></a></li>
</ul>
</nav>
■カルーセル回転木馬:carousel:JavaScript:タイトル、キャプション付きカルーセル
<div id="carouselSample" class="carousel slide" data-ride="carousel">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselSample" data-slide-to="0" class="active"></li>
<li data-target="#carouselSample" data-slide-to="1"></li>
<li data-target="#carouselSample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="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>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" 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>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" 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-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselSample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
■カルーセル回転木馬:carousel:JavaScript:前と次のアイコン付きカルーセル
<section>
<div class="container">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<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>
<!-- Second slide -->
<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>
<!-- Third slide -->
<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>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
</section>
■カルーセル回転木馬:carousel:JavaScript:インジケーターによるフェード遷移(好きな場所にクリックでいける)
<div class="container">
<div id="carouselSample2" class="carousel slide carousel-fade" data-ride="carousel">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselSample2" data-slide-to="0" class="active"></li>
<li data-target="#carouselSample2" data-slide-to="1"></li>
<li data-target="#carouselSample2" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="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>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" 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>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" 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="#carouselSample2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselSample2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
■カルーセル回転木馬:carousel:JavaScript:イベント:slid.bs.carousel
<div class="container">
<div id="carouselExample" class="carousel slide">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="slide" 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="slide" 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="slide" 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-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
<script>
$('#carouselExample').on('slide.bs.carousel', function () {
$('#carouselExample .carousel-caption').hide();
});
$('#carouselExample').on('slid.bs.carousel', function () {
$('#carouselExample .carousel-caption').show();
});
</script>
■カルーセル回転木馬:carousel:JavaScript:インジケーター付きカルーセル
<div class="container">
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselIndicators" data-slide-to="1"></li>
<li data-target="#carouselIndicators" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
</div>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
</div>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
■カルーセル回転木馬:carousel:JavaScript:カルーセルをJavaScript経由で呼び出す
<div class="container">
<div id="carouselExample" class="carousel slide"><!-- data-ride="carousel"は不要 -->
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="slide" 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="slide" 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="slide" 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-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
<script>
$(function(){
$('#carouselExample').carousel({
interval: 1000
});
});
</script>
■カルーセル回転木馬:carousel:JavaScript:コントローラー付きカルーセル
<div class="container">
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
</div>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
</div>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
<!-- コントロールボタン -->
<div class="control-buttons my-3">
<input type="button" class="btn btn-primary start-slide" value="開始">
<input type="button" class="btn btn-primary pause-slide" value="停止">
<input type="button" class="btn btn-primary prev-slide" value="前へ">
<input type="button" class="btn btn-primary next-slide" value="次へ">
<input type="button" class="btn btn-primary slide-first" value="第1スライドに">
<input type="button" class="btn btn-primary slide-second" value="第2スライドに">
<input type="button" class="btn btn-primary slide-third" value="第3スライドに">
</div>
</div>
<script>
$(function(){
// 循環開始
$(".start-slide").on('click',function(){
$("#carousel").carousel('cycle');
});
// 一時停止
$(".pause-slide").on('click',function(){
$("#carousel").carousel('pause');
});
// 前へ循環
$(".prev-slide").on('click',function(){
$("#carousel").carousel('prev');
});
// 次へ循環
$(".next-slide").on('click',function(){
$("#carousel").carousel('next');
});
// 特定のフレームに循環
$(".slide-first").on('click',function(){
$("#carousel").carousel(0);
});
$(".slide-second").on('click',function(){
$("#carousel").carousel(1);
});
$(".slide-third").on('click',function(){
$("#carousel").carousel(2);
});
});
</script>
■カルーセル回転木馬:carousel:JavaScript:データ属性でオプションを指定
<div class="container">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="1000">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="slide" 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="slide" 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="slide" 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-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
■モーダル:modal:モーダル 表示ボタン、外枠(非表示)、本体、コンテンツ、閉じるボタンの5点セット
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal" id="exampleModal" 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-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-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
■モーダル:modal:モーダルのアニメーション設定 fade
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal fade" id="exampleModal" 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-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-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
■モーダル:modal:垂直方向中央に配置するモーダル
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal fade" id="exampleModal" 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-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-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
<style>
.row>.col, .row>[class^=col-] {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: rgba(0, 0, 0, .1);
border: 1px solid #aaa;
}
</style>
■モーダル:modal:グリッドレイアウトを使用したモーダル
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal fade" id="exampleModal" 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-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 ml-auto">col-md-4、ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">col-md-3、ml-auto</div>
<div class="col-md-2 ml-auto">col-md-2、ml-auto</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
■モーダル:modal:長いコンテンツのモーダル
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 -->
<div class="modal fade" id="exampleModal" 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-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-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
■モーダル:modal:大きなサイズのモーダル サイズのオプション modal-lg
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#largeModal">モーダルボタン</button>
<!-- モーダル -->
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<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-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-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
■モーダル:modal:小さなサイズのモーダル modal-sm
<!-- 切替ボタン -->
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#smallModal">モーダルボタン(modal-sm)</button>
<!-- モーダル -->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<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-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-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
■モーダル:modal:モーダルのJavaScript使用
<div class="container">
<p class="text-center"><button type="button" class="btn btn-primary">モーダルボタン</button></p>
<!-- モーダル -->
<div class="modal" id="myModal" 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-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-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">変更を保存</button>
</div>
</div>
</div>
</div>
</div>
<script>
$('.btn').click(function(){
$('#myModal').modal('show');
});
</script>
■モーダル:modal:モーダルを閉じるときにメッセージを出す:JavaScript使用