Gap between card header and card footer in bootstrap

I am trying to create bootstrap card. I have create card header and card footer ( but no card body ) But I observed there is a gap between header and footer. Probably it is because of no card body. But I want to remove that gap.

Here is a my card:

Here is my code

       <div className="d-flex">
          <div
            className="col-md-4"
            style={{ marginLeft: "300px", marginTop: "20px" }}
          >
            <div className="card">
              <div className="card-header bg-primary text-white">
                <div className="row">
                  <div className="col">
                    <h3 className="display-3">10</h3>
                    <h6> Department</h6>
                  </div>
                  <div className="col">
                    <GiBookshelf style={{ height: "100px", width: "100px" }} />
                  </div>
                </div>
              </div>
              <div
                className="card-footer"
                style={{
                  backgroundColor: "#2a52a3",
                  marginTop: "0",
                }}
              >
                <h5 className="text-white text-center">
                  More Info <FiArrowRightCircle />
                </h5>
              </div>
            </div>
          </div>`

It's not completely clear what the error is, because the code you've posted doesn't seem to display the gap you're describing. However, it's possible the issue you're facing is due to the default border-bottom on the .card-header and the border-top on the .card-footer.

You can try overriding these borders by adding the following CSS:

.card-header {
  border-bottom: 0 !important; 

.card-footer {
  border-top: 0 !important; 
}

This should remove any gap between the header and footer. If you're still seeing a gap, it could be due to specific styles in your project, such as external CSS or Bootstrap overrides.