Migrating to v1

React Bootstrap v1 adds full compatibility with Bootstrap 4. Because bootstrap 4 is a major rewrite of the project there are significant breaking changes from the pre v1 react-bootstrap.

PLEASE FIRST READ THE UPSTREAM BOOSTRAP MIGRATION GUIDE

https://getbootstrap.com/docs/4.3/migration/

React-Bootstrap only contains components that are present in vanilla Bootstrap. If functionality was removed from Bootstrap, then it was also removed from React-Bootstrap. This guide does not repeat information found in the upstream migration guide. Its goal is to document React-Bootstrap-specific API changes and additions.

Versioning

We will continue to provide general maintenance for Bootstrap 3 components, because there are many projects that continue to depend on Bootstrap 3 support in react-bootstrap. react-bootstrap package versions will be as follows:

• Bootstrap 3 support will continue in react-bootstrap versions < v1.0.0
• Bootstrap 4 support will be in react-bootstrap versions >= v1.0.0

We are not committing to keeping breaking changes in lockstep with bootstraps major releases, there may be a react-bootstrap v2 targeting Bootstrap v4 depending on what's best for the project.

Summary of breaking changes from v0.32.0

Below is a rough account of the breaking API changes as well as the minimal change to migrate

• bsStyle -> variant
• bsClass -> bsPrefix
• bsRole has been removed from all components. Components now communicate via context to allow intermediate nesting of child components
• componentClass -> as
• All utils have been removed from main exports, most were internal already and the rest have been moved to external libraries

Grid

• renamed to Container
• removed Clearfix

Col

• removed visibility props
• consolidated col span, offset, and order into an object value prop per breakpoint.

Navbar

• removed Navbar.Header
• removed Navbar.Form
• removed fluid, use your own Container component in.
• inverse removed and replaced with variant="dark"
• positioning props have been consolidated into fixed={top|bottom} and sticky={top|bottom}, staticTop has been removed

NavbarHeader

• removed, not present in v4

NavbarToggle

• name changed to Navbar.Toggle

NavbarBrand

• Renders a <a> when an href is provided
• The presence of children does not skip the wrapping span, use as along with children for custom rendering

Nav

• activeHref is removed (only activeKey now)
• bsStyle renamed to variant
• NavLink hrefs will be used as eventKeys when eventKey is absent
• Local onSelect handlers are ignored when in the context of a TabContainer or Navbar (MAYBE ADD BACK?)

Nav.Item

• Renders only the outer "item" element, use inconjunction with the new NavLink component
• default element changed to <div> from a <li>
• active prop removed and moved to NavLink

InputGroup

• removed InputGroup.Button, and InputGroup.Addon
• added InputGroup.Prepend, InputGroup.Append, InputGroup.Text, InputGroup.Checkbox, InputGroup.Radio

Badge & Label

• removed Label, the Badge component covers both
• bsStyle renamed to variant

Panel

• removed, replaced with Card components

Dropdown

• Removed the disabled prop on Dropdown, pass it directly to Dropdown.Toggle
• Removed bsRole, use function children to render custom Toggles or Menus
• Removed SplitButton.toggle (replaced with a split prop on the basic Toggle)
• noCaret is removed because it's not optional with the styles anymore
• bsPrefixes are not passed from the parent Dropdown anymore
• onSelect behavior is now passed to Menu and Toggle via the Context api
• DropdownMenu is not rendered until opened
• divider has been split out into Dropdown.Divider
• header has been split out into Dropdown.Header

DropdownButton

• Extra props are passed to the underlying Dropdown component, not the Toggle.

SplitButton

• Extra props are passed to the underlying Dropdown component, not the Toggle.

NavButton

• Extra props are passed to the underlying Dropdown component, not the Toggle.

MenuItem

• renamed to DropdownItem (also exported on Dropdown as Dropdown.Item)

Alert

• onDismiss renamed to onClose

Well

• removed.

Pager

• removed.

ControlLabel

• renamed to FormLabel (also exported on Form as Form.Label)

Checkbox and Radio

• Consolidated into a single component. Component's name is FormCheck (also exported on Form as Form.Check)

Glyphicon

• Removed -- icons are not included in Bootstrap 4. Icon support can be provided via react-icons, fontawesome, or a similar external library.