react bootsrap element not centering - reactjs

Question

I have a "div" that was centered horizontally, then updated to use react bootstrap "
form".
Now the elements on the "form" are not centered, appearing to the left...
render() {
return (
<div className="App">
<div className="App-title">
Countdown to {this.state.deadline}
</div>
<Clock
deadline={this.state.deadline}
/>
<Form inline>
<FormControl
className="Deadline-input"
placeholder='new date'
onChange={event => this.setState({newDeadline: event.target.value})}
/>
<Button onClick={() => this.changeDeadline()}>
Submit
</Button>
</Form>
</div>
)
}
All is under className App
.App {
text-align: center;
font-size: 35px;
margin-top: 20%;
}
.App-title {
font-size: 50px;
}
.Clock-days,
.Clock-hours,
.Clock-minutes,
.Clock-seconds {
display: inline;
margin: 10px;
}
.Deadline-input {
font-size: 25px;
margin: 5px;
}
Why it is not centered anymore? how to align my form on the center?
:]

Answer 1

When you import 'bootstrap/dist/css/bootstrap.min.css'; bootstrap adds some styles and classes by default to the elements, Because of this form, it is folded to the left.
You can just add justify-content-center class to <Form inline />
<Form inline className="justify-content-center">
like this:
render() {
return (
<div className="App">
<div className="App-title">
Countdown to {this.state.deadline}
</div>
<Clock
deadline={this.state.deadline}
/>
// add justify-content-center class to the <Form />
<Form inline className="justify-content-center">
<FormControl
className="Deadline-input"
placeholder='new date'
onChange={event => this.setState({newDeadline: event.target.value})}
/>
<Button onClick={() => this.changeDeadline()}>
Submit
</Button>
</Form>
</div>
)
}