Question 411403 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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:

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>`
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    If you notice a gap between the header and footer of your Bootstrap card because there’s no card body, you can easily resolve this by adjusting the padding of the card footer. The default styles in Bootstrap add padding that can create unwanted space.

    To eliminate the gap, set the paddingTop and paddingBottom of the footer to 0. You can do this either inline or by creating a custom CSS class that removes all padding. This will give your card a more cohesive look without the extra space between the header and footer.

    By making this simple adjustment, your card will look much cleaner.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search