Why is .card-header not rendering properly in my React Bootstrap setup?

user_9808476 0
Viewed 322

My current frontend is set up with React, TypeScript, Webpack, Sass and React Bootstrap. I followed the React Bootstrap documentation and installed the dependencies.

"bootstrap": "^5.0.2",
"react-bootstrap": "^2.0.0-beta.4",

Then I added an import to include the stylesheet like so (with Sass):

// CSS reset
@import '@scss/reset.scss';
// Override the bootstrap SCSS (completely empty for now)
@import '@scss/custom.scss';
@import "~bootstrap/scss/bootstrap";

Then I import the .scss file into my App.tsx file:

import './App.scss';

Everything seems to work fine, except the .card-header class does not. It should fill up the rounded corners as shown in the Bootstrap example.

enter image description here

The code responsible for the picture above is copied from the Bootstrap example.

<div className="card">
    <div className="card-header">Featured</div>
    <div className="card-body">
        <h5 className="card-title">Special title treatment</h5>
        <p className="card-text">
            With supporting text below as a natural lead-in to additional content.
        </p>
        <a href="#" className="btn btn-primary">
            Go somewhere
        </a>
    </div>
</div>;

I have most likely forgotten some step in the installation process, but I just do not know what.

react-bootstrap reactjs sass
2 Answers

It's hard to say without seeing your whole code but seems like some other css, maybe something from custom.css is interfering with the bootstrap styling.

user_75792990

It turns out that the Row component from React Bootstrap passed some CSS to its children that contains padding-left and padding-right statements.

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

This caused the problem that I had with the card header. I fixed this by adding p-0 to my card div.

EDIT: I completely overlooked the fact that React Bootstrap has a built-in Card component...

user_98084760
Related