Search code examples
javascripthtmlcssmodal-dialogbootstrap-modal

Two line text in modal header?

I have a default modal. I wanna two line text in header as a

Payment Information
Description smth

I tried smth you can see below but it doesn't work correctly. I mean it works but it has a too much top and bottom space any helps? Thanks in advance!

    <!--begin::Modal dialog-->
      <div class="modal-dialog modal-dialog-centered mw-650px">
        <!--begin::Modal content-->
        <div class="modal-content">
          <!--begin::Modal header-->
          <div class="modal-header">
            <!--begin::Modal title-->
            <div>
              <h2>Payment</h2>
              <!--begin::Notice-->
              <p class="text-gray-400 fs-6">store credit</p>
              <!--end::Notice-->
            </div>
            <!--end::Modal title-->
    
            <!--begin::Close-->
            <div
              class="btn btn-sm btn-icon btn-active-color-primary"
              data-bs-dismiss="modal"
            >
              <span class="svg-icon svg-icon-1">
                <inline-svg src="media/icons/duotune/arrows/arr061.svg" />
              </span>
            </div>
            <!--end::Close-->
          </div>
          <!--end::Modal header-->
          </div>
        </div>

enter image description here

Solution

  • Both <p> and <h2> inherently have margins above and below the elements. If you want to remove them, you can set their css or style to margin:0