CODEWITHSUNDEEP
cssreactjsreact-bootstrap
George Francis
George Francis

Reputation: 502

Customize card background with react-bootstrap

I am trying to customize the bg prop of react-bootstrap/cards, i.e to use something other than the default primary, secondary, danger, etc variants. According to the documentation something like this can be done by providing a custom props with the 'card-' bsprefix, but I can't seem to get it to work.

My current code is something like this:

    <Card bg="light-blue">
       <Card.Body >
          <Card.Text >
            foobar
           </Card.Text>
        </Card.Body>
    </Card>

And from a .css file I have defined the following style

.card-light-blue {
  background-color: rgb(147, 182, 248);
}

What should be changed so that it works?

Upvotes: 1

Views: 10271

Answers (3)

Vincent M
Vincent M

Reputation: 166

I think a better way to do this without using !important would be to assign a custom class to the card, and then target both the react-bootstrap card class and your custom class. That should override react-bootstrap styles.

card component:

<Card className="custom-class">
  <Card.Body >
    <Card.Text >
      some text
    </Card.Text>
  </Card.Body>
</Card>

css file:

.card.custom-class {
  background-color: red;
}

Upvotes: 1

Mahfod
Mahfod

Reputation: 315

import "file.css"

<Card className="card">
       <Card.Body >
          <Card.Text >
            foobar
           </Card.Text>
        </Card.Body>
    </Card>

css file

.card{

    background-color: aqua;
}

Just add a className and modify in the css files;

Upvotes: 0

Nick Kinlen
Nick Kinlen

Reputation: 1406

Try giving the card a className and using the class to give it a background color. If that alone doesn’t work try adding !important 

<Card className=“customCard”></Card>

.customCard: {
    background: blue !important;
}

In your example you didn’t give the card a class of light-blue, you tried to assign it a background.

Upvotes: 1

Related Questions