Can we add custom className prop to "Col" or "Row" components in react bootstrap?

Question

I gave a className to my Row and Col component inside a container then why padding and margin property doesn't work in my custom class?

my react code-

<Container fluid id="about-title-container">
        <Row className="about-title-row-1">
        <Col className="about-title-row-1-col-1">
                <h1 className="about-title-h1">About Us</h1>
        </Col>
        </Row>
</Container>

my CSS code-

.about-title-row-1{
    padding: 4%;
    text-align: center;
}

.about-title-row-1-col-1{
    padding: 2%;
    text-align: center;
}

Answer 1

because Row component has default left and right margin of -15px and Col has default left and right margin of 15px. To override this you can to use !important in your css :

.about-title-row-1{
    padding: 4% !important;
    text-align: center;
}

.about-title-row-1-col-1{
    padding: 2% !important;
    text-align: center;
}

or use noGutters prop on Row component to remove margin and padding like this :

<Row noGutters></Row>

also you can use bootstrap classes for padding and margin.