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 BOOTSTRAP 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.