Search code examples
cssreact-bootstrapbootstrap-5

How do I change a switch size in react-bootstrap?

I'm trying to increase the size of the react-bootstrap switch but it doesn't seem to work. I tried reading the docs and looking it up but I couldn't find any other way apart from changing the bootstrap css directly. Here's the code:

import Form from 'react-bootstrap/Form';

function SwitchExample() {
  return (
    <Form>
      <Form.Check 
        type="switch"
        id="custom-switch"
        label="Check this switch"
      />
    </Form>
  );
}

export default SwitchExample;

Thanks for reading.

Solution

  • you can change switch size in css

    .form-switch .form-check-input {width: 4em; height: 2em;}

    and import css file to your project