reactjs - Remove Bootstrap styling for ButtonGroup

Question

I'm wondering if there is a way to remove the default styling/alignment <ButtonGroup> gives. I am using React and React Bootstrap's <Row>, <Col> and <Form.Row> and I already have styling and alignment using the <Col>. <ButtonGroup> is completely overriding this and I can't anything online.

Here is my image:

I have only applied <ButtonGroup> on the left before applying to all, but it should still look like the other buttons.

Code:

                        <Col sm={6} xs={6}>
                          <Col style={{ paddingLeft: "0px" }}>
                            {" "}
                            <Form.Label className="button-question">
                              Type of insurance?
                            </Form.Label>
                          </Col>
                          <ButtonGroup>
                            <Row>
                              <Col sm={4} md={3}>
                                <div>
                                  <Button
                                    type="button"
                                    className="orange-btn btn-primary"
                                  >
                                    <i className="fas fa-umbrella fa-2x"></i>
                                  </Button>
                                </div>
                                <Form.Label className="button-label">
                                  Level Term
                                </Form.Label>
                              </Col>
                              <Col
                                sm={4}
                                md={3}
                                style={{ textAlign: "center" }}
                              >
                                <div>
                                  <Button type="button" className="orange-btn">
                                    <i className="fas fa-home fa-2x"></i>
                                  </Button>
                                </div>
                                <Form.Label className="button-label">
                                  Mortgage
                                </Form.Label>
                              </Col>
                              <Col
                                sm={4}
                                md={3}
                                style={{ textAlign: "center" }}
                              >
                                <div>
                                  <Button type="button" className="orange-btn">
                                    <i className="fas fa-heart fa-2x"></i>
                                  </Button>
                                </div>
                                <Form.Label className="button-label">
                                  Whole of Life
                                </Form.Label>
                              </Col>
                            </Row>
                          </ButtonGroup>
                        </Col>

CSS:

.orange-btn {
  width: 73.98px !important;
  height: 60.71px !important;
  cursor: pointer !important;
  color: #FE9900 !important;
  background-color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  border-color: #FE9900 !important;
  box-shadow: 2px 7px 6px 0 rgba(0, 0, 0, 0.158) !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.orange-btn:hover,
.orange-btn:focus {
  color: #ffffff !important;
  background-color: #E89416 !important;
  border-color: #E89416 !important;
  border-radius: 10px !important;
}

.orange-btn:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25) !important;
}

.orange-btn:active {
  border-color: #FE9900 !important;
  background-color: #FE9900 !important;
  border: 1px solid transparent !important;
}

.button-label {
  font-size: 12px;
  text-align: center;
}

Does anyone know if this is possible?

question from:https://stackoverflow.com/questions/65899270/remove-bootstrap-styling-for-buttongroup

Answer 1

Inspect the button group style and give the default style properties to the button group in inline styling