I am currently implementing React with Bootstrap in my project.
Here is the render function I have been working on, with the goal of center aligning the form.
render() {
return (
<div class="row">
<div className="col-md-3 center">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input value={this.state.email} onChange={this.handleChange} type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input value={this.state.password} onChange={this.handleChange} type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
</div>
<button type="submit" onClick={this.login} class="btn btn-primary">Login</button>
<button onClick={this.signup} style={{ marginLeft: '25px' }} className="btn btn-success">Signup</button>
</form>
</div>
</div>
);
}
Here is the styling for the center class:
.center {
display: flex;
justify-content: 'center';
align-items: 'center';
}
https://i.sstatic.net/yz7Ii.png
However, the output is not as expected. The form remains on the top-left corner despite the styling. I believed this approach would work.
UPDATE
form {
background: #55acf3;
padding: 1.5em;
border-radius: 1em;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.error-message {
margin-top: 1em;
color: red;
}