Search code examples
cssreactjsstylesreact-select

How to set custom width for react-select


Hello is there a way to set a custom width in my react select button? I would like it if I can use bootstrap to do that so it can be responsive but if not its okay.

Here is my code:

import Select, { components } from 'react-select';
export default class AccomodationType extends Component {

    render() {
        const options = [
            { value: 'chocolate', label: 'Chocolate' },
            { value: 'strawberry', label: 'Strawberry' },
            { value: 'vanilla', label: 'Vanilla' }
          ]
        return(
            <div>
                <Select
                options= {options}
                isClearable
                isSearchable
                name="color"
            />
                </div>



        )


    }


}


Solution

  • I just used bootstrap sizing for it!

    Here is what I added:

    
                    <Select
                    className="w-25 p-3"
                    options= {options}
                    isClearable
                    isSearchable
                    name="color"
                />