<div class="container"> <div class="row mt-3"> <div class="col-4"> <img id="Скрипка" src="https://i.artfile.ru/6000x4000_1349302_[www.ArtFile.ru].jpg" alt="Скрипка" width="300" data-toggle="modal" data-target="#modalViolin"> </div> <div class="col-4"> <img id="Церковь" src="https://top10.travel/wp-content/uploads/2014/12/hram-vasiliya-blazhennogo.jpg" alt="Достопримечательности" width="300" data-toggle="modal" data-target="#modalChurch"> </div> <div class="col-4"> <img id="Спорт" src="https://img.championat.com/s/735x490/news/big/l/w/skvosh-triatlon-zorbing-chto-vybrat-v-2019_15488563261718964122.jpg" alt="Спорт" width="300" data-toggle="modal" data-target="#modalSport"> </div> </div> </div> <!– Модальное окно для Скрипки –> <div class="modal fade" id="modalViolin" tabindex="-1" role="dialog" aria-labelledby="modalViolinLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modalViolinLabel">Скрипка</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 class="modal fade" id="modalChurch" tabindex="-1" role="dialog" aria-labelledby="modalChurchLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modalChurchLabel">Церковь</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 class="modal fade" id="modalSport" tabindex="-1" role="dialog" aria-labelledby="modalSportLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modalSportLabel">Спорт</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> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
css .modal-title font-weight: bold; color: #007bff; /* Цвет заголовка */
Results:
Скрипка
Назад
Я модальное окно для скрипки.
Церковь
Назад
Я модальное окно для церкви.
Спорт
Назад
Я модальное окно для спорта.