react react-bootstrap button cannot set custom height. only can set width with css

Question

I have been stuck on this issue and have not found a way to adjust the height of react-bootstrap button with css styling. I am able to set the width. Here is my following code

JSX

Inside the Render and return code

<div className="row">
  <Button className="btn-danger btn-edit btn btn-default">Button 1</Button>
<Button className="btn-danger btn-edit btn btn-default">Button 2</Button>
<Button className="btn-info btn-edit btn btn-default">Button 3</Button>
<Button className="btn-success btn-edit btn btn-default">Button 4</Button>
<Button className="btn-primary btn-edit btn btn-default">Button 5</Button>
</div>

in my style code, I added a class for each to add custom height and weight

.btn-danger {
  width: 25% !important
  height: 20% !important
}
.btn-success {
  width: 25% !important
  height: 20% !important
}
.btn-primary {
  width: 25% !important
  height: 20% !important
}
.btn-info {
  width: 25% !important
  height: 20% !important
}
.btn-success {
  width: 25% !important
  height: 20% !important
}

I hit F12 to inspect the button and add/adjust height for btn, btn-danger etc... the height does not change at all.

at trying these steps, I am out of ideas on what to try next. I would think that if the custom class allows me to change the width, it would also let me change the height.

Any help is appreciated, thanks

Answer 1

found the solution. Changed height to min-height in the css.