Search code examples
cssreactjssassreact-bootstrap

Is there a way to change a bootstrap react card component's border size?

Reading through bootstrap react's documentation, I found that the API includes border color... and that was pretty much it for border. Does anyone know if you can customize the size (width) of the border as well? I also tried to write some custom css to overwrite the border, adding the Bootstrap-Card className attribute to the <Card> component, but what I tried did not work:

//index.scss

.Bootstrap-Card {
    border-width: 10px;
    border-color: red;
}

//index.js

<Card className="Bootstrap-Card" style={{ width: '50rem' }}> ...

Any insight would be greatly appreciated, thank you!

Solution

    1. Import css like this:

      import styles from "./App.module.css";

    Use your class with following syntax:

    <Card style={{ width: "18rem" }} className={styles.cardCustomized}>

    1. You can also import like this:

      import "./App2.css";

    and then use a string directly in className:

    <Card style={{ width: "18rem" }} className="card-customized">

    https://codesandbox.io/s/jolly-danny-56cow6