title: react react-bootstrap button cannot set custom height. only can set width with css
body: <p>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</p>
  
  <p>JSX</p>
  
  <p>Inside the Render and return code</p>
  
  <pre><code>&lt;div className="row"&gt;
    &lt;Button className="btn-danger btn-edit btn btn-default"&gt;Button 1&lt;/Button&gt;
  &lt;Button className="btn-danger btn-edit btn btn-default"&gt;Button 2&lt;/Button&gt;
  &lt;Button className="btn-info btn-edit btn btn-default"&gt;Button 3&lt;/Button&gt;
  &lt;Button className="btn-success btn-edit btn btn-default"&gt;Button 4&lt;/Button&gt;
  &lt;Button className="btn-primary btn-edit btn btn-default"&gt;Button 5&lt;/Button&gt;
  &lt;/div&gt;
  
  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
  }
  </code></pre>
  
  <p>I hit F12 to inspect the button and add/adjust height for btn, btn-danger etc... the height does not change at all.</p>
  
  <p>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.</p>
  
  <p>Any help is appreciated, thanks</p>