Search code examples
cssreactjsreact-bootstrapbootstrap-5

Width of a <NavDropdown> in react-bootstrap 5

New day, new problem. I'm not good at CSS, yikes.

I want to set the width of the dropdown in react-bootstrap, I tried with:

<NavDropdown style={{width: "5vw"}} title="Utente" id="navbarScrollingDropdown">
{/* ... */}
</NavDropdown>

Thinking this would've worked, all it did is mess up the title. Any way to change the width of the dropdown without messing up his title?

Nodejs ver: 16.9.1 npm ver: 7.24 bootstrap ver: 5.1.1 react-bootstrap ver: 2.0.0-rc.0 react ver: 17.0.2

Solution

  • Set it on one of the Dropdown items...

           <NavDropdown title="Utente" id="navbarScrollingDropdown">
           <NavDropdown.Item style={{width:'5vw'}} href="#action/3.1">Action</NavDropdown.Item>
           <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
           <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
       </NavDropdown>

    https://codeply.com/p/Mgv3aww20F