Popover

              
                <div class="row">
                  <div class="col-lg-3">
                    <a class="d-block text-center" href="#" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                      <img class="img-fluid mb-3" src="../assets/svg/components/popover-top.svg" alt="Image Description">
                      <h4>Popover on top</h4>
                    </a>
                  </div>

                  <div class="col-lg-3">
                    <a class="d-block text-center" href="#" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                      <img class="img-fluid mb-3" src="../assets/svg/components/popover-Backward.svg" alt="Image Description">
                      <h4>Popover on right</h4>
                    </a>
                  </div>

                  <div class="col-lg-3">
                    <a class="d-block text-center" href="#" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                      <img class="img-fluid mb-3" src="../assets/svg/components/popover-bottom.svg" alt="Image Description">
                      <h4>Popover on bottom</h4>
                    </a>
                  </div>

                  <div class="col-lg-3">
                    <a class="d-block text-center" href="#" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                      <img class="img-fluid mb-3" src="../assets/svg/components/popover-left.svg" alt="Image Description">
                      <h4>Popover on left</h4>
                    </a>
                  </div>
                </div>
                <!-- End Row -->