How to use Sass to modify bootstrap properties of only certain elements (by adding a custom class)?

70 Views Asked by At

I have a React project with reactstrap. I want to modify the padding of list-group-item of certain Cards and not others. Is it possible to do this with Sass?

Here is my attempt

app:
<>
  <Card className={'mt-2'}>
    <CardBody>
      <ListGroup flush>
        <ListGroupItem className={'list-group-item-custom'}>
    //I want the padding modified here
        </ListGroupItem>
      </ListGroup>
    </CardBody>
  </Card>
</>
<>
  <Card className={'mt-2'}>
    <CardBody>
      <ListGroup flush>
        <ListGroupItem>
    //Leave default padding
        </ListGroupItem>
      </ListGroup>
    </CardBody>
  </Card>
</>
scss:
// Bootstrap Functions
@import "../../../node_modules/bootstrap/scss/functions";

// Bootstrap Core
@import "../../../node_modules/bootstrap/scss/bootstrap";


.list-group-item-custom {
  padding: 0;
}

0

There are 0 best solutions below