<div class="card-body">
  <div class="row gy-3">

    <!-- Default Modal -->
    <div class="col-lg-3 col-md-6">
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">
        Launch modal
      </button>

      <div class="modal fade" id="basicModal" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal title</h5>
              <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <input class="form-control mb-3" placeholder="Name">
              <input class="form-control mb-3" placeholder="Email">
              <input type="date" class="form-control">
            </div>
            <div class="modal-footer">
              <button class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
              <button class="btn btn-primary">Save</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Vertically Centered Modal -->
    <div class="col-lg-3 col-md-6">
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCenter">
        Centered
      </button>

      <div class="modal fade" id="modalCenter">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Centered Modal</h5>
              <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">Modal Content</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Slide From Top -->
    <div class="col-lg-3 col-md-6">
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalTop">
        Slide Top
      </button>

      <div class="modal modal-top fade" id="modalTop">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Slide Top</h5>
              <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">Slide animation</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Toggle Between Modals -->
    <div class="col-lg-3 col-md-6">
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalToggle">
        Toggle Modals
      </button>

      <div class="modal fade" id="modalToggle">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal 1</h5>
              <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-footer">
              <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalToggle2" data-bs-dismiss="modal">
                Next
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="modal fade" id="modalToggle2">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal 2</h5>
              <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</div>
       <hr class="m-0">
       <div class="card-body">
    <div class="row gy-3">

        <!-- Fullscreen Modal -->
<div class="col-lg-3 col-md-6">
    <small class="fw-medium">Fullscreen</small>
    <div class="mt-4">
        <button type="button"
                class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#fullscreenModal">
            Launch modal
        </button>

        <!-- Modal -->
        <div class="modal fade" id="fullscreenModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalFullTitle">Modal title</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <!-- more paragraphs as needed -->
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Toggle Between Modals -->
<div class="col-lg-3 col-md-6">
    <small class="fw-medium">Toggle Between Modals</small>
    <div class="mt-4">
        <button type="button"
                class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#modalToggle">
            Launch modal
        </button>

        <!-- Modal 1 -->
        <div class="modal fade"
             id="modalToggle"
             aria-labelledby="modalToggleLabel"
             tabindex="-1"
             style="display: none"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalToggleLabel">Modal 1</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Show a second modal and hide this one with the button below.
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary"
                                data-bs-target="#modalToggle2"
                                data-bs-toggle="modal"
                                data-bs-dismiss="modal">
                            Open second modal
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal 2 -->
        <div class="modal fade"
             id="modalToggle2"
             aria-hidden="true"
             aria-labelledby="modalToggleLabel2"
             tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalToggleLabel2">Modal 2</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Hide this modal and show the first with the button below.
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary"
                                data-bs-target="#modalToggle"
                                data-bs-toggle="modal"
                                data-bs-dismiss="modal">
                            Back to first
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>