how to make dropdown button to use 100% width

[chandu0101]

I am using dropdown button inside form , i want button to use all width available ..

[taion]

You can apply the same styling properties as for other buttons – check the docs.

[chandu0101]

@taion

for DropdownButton component i passed following props

 className = "btn-block",
 block = true,

here is the output rendered

button element got width = 100%(btn-block) , but outer div(dropdown) didn't have btn-block classes applied :s

[ZhenanH]

Same here, bsStyle="defaut btn-block" works but there is error in the console: "Invalid prop bsStyle of value default btn-block supplied to t, expected one of ["success","warning","danger","info","default","primary","link"]."

[MacKentoch]

Despite React Bootstrap being super nice I'm afraid I don't find styling super clear in react bootstrap.

In some cases like setting dropdown to 100% width I followed what previously mentioned and looked at Button doc :

Create block level buttons—those that span the full width of a parent— by adding the block prop.

But block property does not work on DropdownButton.

Anyway congratulation for all work done.

[VictorChen]

doesn't look like there's a good solution for this?

[mguijarr]

There is, actually. Just wrap the <DropdownButton> inside a <ButtonGroup> with justified prop:

<ButtonGroup justified>
  <DropdownButton>...</DropdownButton>
</ButtonGroup>

Here is the link to the documentation: https://react-bootstrap.github.io/components.html#btn-groups-justified

[ajalbani1]

$toggle-btn-width-x: 25px; .login-container{ .dropdown{ width: 100%; .btn-default{ &:not(.dropdown-toggle){ width: calc(100% - #{$toggle-btn-width-x}); } } .dropdown-toggle{ width: $toggle-btn-width-x; } } .dropdown-menu{ width: 100%; } }

[AdamMYoung]

For anyone still having this issue, you can set full width button and menu with some simple CSS

.dropdown-toggle,
.dropdown-menu {
  width: 100%;
}

[nardove]

None of the solutions listed above solve the width 100% for me, I'm using Bootstrap 4 and React-Bootstrap 1.64, are there any other ways to work around this?

[juliuscalvium]

I was able to get this working by using the Dropdown and Toggle components, then you can add the block boolean prop to Dropdown.Toggle

<Dropdown>
  <Dropdown.Toggle block>Dropdown title</Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item>Publish</Dropdown.Item>
    <Dropdown.Item>Settings</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>;

[rickyoleary]

For Bootstrap 5, adding d-grid class to the button worked for me:

`<DropdownButton id="dropdown-basic-button" className={"d-grid"} title={menuItem.displayName}>

Change title Change background colour Change text colour `