Update obrazky.html

obrazky.html

@@ -32,7 +32,7 @@
           <img src="images/image_01.jpg" style="width: 100%;" class="rounded-circle">
         </div>
         <div class="col">
-          <img src="images/image_02.jpg" style="width: 100%;" class="rounded">
+          <img src="images/image_02.jpg" style="width: 100%;" class="rounded-3">
         </div>
         <div class="col">
           <img src="images/image_03.jpg" style="width: 100%;" class="img-thumbnail">
@@ -116,21 +116,31 @@
       <hr>
       <h2>Carousel/Slideshow</h2>
 
-      <div id="demoCarousel" class="carousel slide" data-bs-ride="carousel">
+      <div id="demoCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
+        <div class="carousel-indicators">
+          <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="0" class="active"></button>
+          <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="1"></button>
+          <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="2"></button>
+          <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="3"></button>
+          <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="4"></button>
+        </div>
         <div class="carousel-inner">
-          <div class="carousel-item active" data-bs-interval="3000">
+          <div class="carousel-item active">
             <img class="d-block w-100" src="images/image_10.jpg" alt="" >
+            <div class="carousel-caption d-none d-md-block">
+              <h5>Nadpis obrazku</h5>
+            </div>
           </div>
-          <div class="carousel-item" data-bs-interval="3000">
+          <div class="carousel-item">
             <img class="d-block w-100" src="images/image_11.jpg" alt="" >
           </div>
-          <div class="carousel-item" data-bs-interval="3000">
+          <div class="carousel-item">
             <img class="d-block w-100" src="images/image_12.jpg" alt="">
           </div>
-          <div class="carousel-item" data-bs-interval="3000">
+          <div class="carousel-item">
             <img class="d-block w-100" src="images/image_13.jpg" alt="">
           </div>
-          <div class="carousel-item" data-bs-interval="3000">
+          <div class="carousel-item">
             <img class="d-block w-100" src="images/image_14.jpg" alt="">
           </div>
         </div>
@@ -142,6 +152,39 @@
           </button>
       </div>
 
+      <hr>
+      <h2>Modal</h2>
+      <button type="button" class="btn btn-primary" 
+       data-bs-target="#modal1" data-bs-toggle="modal">Modal1</button>
+       <button type="button" class="btn btn-primary" 
+       data-bs-target="#modal2" data-bs-toggle="modal">Modal2</button>
+
+      <div class="modal" id="modal1">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">Header</div>
+            <div class="modal-body">Obsah1</div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-danger" 
+              data-bs-dismiss="modal">Zavřít</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal" id="modal2">
+          <div class="modal-dialog">
+            <div class="modal-content">
+              <div class="modal-header">Header</div>
+              <div class="modal-body">Obsah2</div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-danger" 
+                data-bs-dismiss="modal">Zavřít</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
 
     </main>