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.
  • 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
  • removed, not present in v4
  • name changed to Navbar.Toggle
  • 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
  • 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?)
  • 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
  • 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
  • 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.
  • Extra props are passed to the underlying Dropdown component, not the Toggle.
  • 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.

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/migrating/