How to add pull-right to a Button in React Bootstrap?

Question

I have the following JSX using React-Bootstrap:

<Button bsStyle="danger pull-right" bsSize="small" onClick={() => {alert('do stuff')}}>     <Glyphicon glyph="trash" /> </Button> 

This does work, but it shows a warning in the console:

Warning: Failed prop type: Invalid prop bsStyle of value danger pull-right supplied to Button, expected one of ["success","warning","danger","info","default","primary","link"].

What is the best way to add pull-right to the list of styles? I'd prefer not to have any warnings in my console.

Answer 1

If you take a look at React-Bootstrap Components, you'll see that prop bsStyle of component Button only accepts the following values:

"success", "warning", "danger", "info", "default", "primary", "link" 

based on its visual appearance as mentioned in the warning message. If you intend to use Bootstrap's pull-right class, just use the className attribute which will set the class of that component:

<Button className="pull-right" bsStyle="danger" bsSize="small" onClick={() => {alert('do stuff')}}>     <Glyphicon glyph="trash" /> </Button> 

Answer 2

Bootstrap 4 Update

Now that React Bootstrap uses Bootstrap 4, use float-right, float-sm-right, etc.:

<Button className="float-right" bsStyle="danger" bsSize="small" onClick={() => {alert('do stuff')}}>     <Glyphicon glyph="trash" /> </Button>