vatesfr / react-bootstrap

Bootstrap 3 components built with React

react-bootstrap

Bootstrap 3 components built with React.

Under active development - APIs will change. Check out the 1.0.0 Roadmap and Contributing Guidelines to see where you can help out. Prior to the 1.0.0 release, deprecations or breaking changes should result in a Minor version bump.

Docs

See the documentation with live editable examples.

Related modules

• react-router-bootstrap - Integration with react-router.
• Complementary Tools - List of complementary tools that can be used with React.

Local Setup

• Install the dependencies with npm install
• Run tests npm test
• Run tests in watch mode npm run test-watch
• Run the docs site in development mode with npm run docs. This will watch for file changes as you work. Simply refresh the page to see the updates.
• Build with npm run build

Contributions

Yes please! See the contributing guidelines for details.

react-bootstrap's Issues

Dropdowns don't drop down

I'm getting a button, but nothing happens on click. This is, incidentally, the same behavior I get with the main react-bootstrap package. Minimal example below. My environment is Bootstrap 4.0.0-alpha6/Django/webpack/OS X/Chrome.

import React from 'react';
import ReactDOM from 'react-dom';
import { DropdownButton, MenuItem } from 'react-bootstrap-4';
require('bootstrap/dist/css/bootstrap.css');

export default class ModuleMenu extends React.Component {

  render() {
    return (
    <DropdownButton title="Dropdown">
      <MenuItem href="#books">Books</MenuItem>
      <MenuItem href="#podcasts">Podcasts</MenuItem>
      <MenuItem href="#">Tech I Like</MenuItem>
      <MenuItem href="#">About me</MenuItem>
      <MenuItem href="#addBlog">Add a Blog</MenuItem>
    </DropdownButton>
    );
  }
}


ReactDOM.render(
  React.createElement(ModuleMenu, null),
  document.getElementById('root')
);

Checkbox and Radio?

Curious why Checkboxes and Radios are missing from this fork?
https://react-bootstrap.github.io/components.html#forms-controls

Classnames are changed and CSS doesn't apply

Some elements in react-bootstrap-4 have been given classnames different the original Bootstrap ones, and the changes don't reflect the css. For example, .popover-top in the css should be applied to .popover.top, .popover-arrow should be applied to .arrow, etc.

I ended up copy/pasting the Bootstrap classes in my own css and changing the classnames.

Is this something overlooked, or am I doing it wrong?