Can't change width of React Bootstrap button

Question

Can someone tell me how to change the width of my React bootstrap button?

I am just playing around with it

I've imported the Button component from react-bootstrap which I've added

import {Button, ButtonGroup } from 'react-bootstrap';

The button seems to have a max width of 100. How can I increase the width of the button to 200 for example?

<Button
    class="btn btn-outline-primary mr-xl-5 w-100"
    ...
>{ctrl.label}</Button>

Answer 1

When you use the w-100 class, you are setting the button to be 100% of the width of its parent element.

Let's assume that the parent element is a set width, (say 100px). If you set the button to be 100% of the width of it's parent, then the button will be 100px wide too. You cannot set a width wider than 100%.

To get around this, you can make the width of the parent element wider (by setting it to say 200px). Then, the button will stretch to fill the parent and will be 200px wide.

Let me know if that helps!