Remove Container fluid padding specially in React-Bootstrap in Reactjs

user_13847690 0
Viewed 5581

I am practicing a grid layout in react-bootstrap. But got stuck when I was trying to remove the padding of the container fluid. We can do that in regular bootstrap by overriding the container-fluid class and making the padding 0 as important.

.container-fluid {
  padding: 0 !important;
}

I tried this way and it worked well but I don't want to use !important as I may have many container-fluid in my application later.

<Container fluid>
      <Row noGutters>
        <Col lg={6} md={6} xs={12}>
          <div style={{ background: "red" }}>hello i am subrato</div>
        </Col>
        <Col lg={6} md={6} xs={12}>
          <div style={{ background: "blue" }}>I new to react-bootstrap</div>
        </Col>
      </Row>
      <Row noGutters>
        <Col xs={12} md={8}>
          <div style={{ background: "red" }}>hello i am subrato</div>
        </Col>
        <Col xs={12} md={4}>
          <div style={{ background: "blue" }}>I new to react-bootstrap</div>
        </Col>
      </Row>
</Container>

See my output here

enter image description here

How can I specifically select that container in react-bootstrap?

react-bootstrap reactjs css
2 Answers

I have added a className="p-0" to my container fluid and it worked well. If we want to use regular bootstrap then we can use it by specifying the classes in className. The main reason why I do inline-style because Inline-style has high specificity than the internal as well as external style.

It is like inline-style > internal style > external style in term of specificity.

<Container fluid={true} className="p-0">
      <Row noGutters>
        <Col lg={6} md={6} xs={12}>
          <div style={{ background: "red" }}>hello i am subrato</div>
        </Col>
        <Col lg={6} md={6} xs={12}>
          <div style={{ background: "blue" }}>I new to react-bootstrap</div>
        </Col>
      </Row>
</Container>

Avoid using !important in your application. Use !important where you have selected the element specifically. For example

div p span{
 color: red !important;
}

span{
color: blue;
}

The text inside div p span will be red and the text in span is blue (here CSS of span didn't get override because of div p span specificity).

user_138476900

Remove noGutters attribute from Row

<Container fluid>
      <Row>
        <Col lg={6} md={6} xs={12}>
          <div style={{ background: "red" }}>hello i am subrato</div>
        </Col>
        <Col lg={6} md={6} xs={12}>
          <div style={{ background: "blue" }}>I new to react-bootstrap</div>
        </Col>
      </Row>
</Container>
user_104291800
Related