When my window is at full width, my items are displayed like this: https://i.sstatic.net/sjtxC.png
However, when I resize the window, the Submit button moves up. https://i.sstatic.net/zfH73.png
I am looking for a way to keep it evenly centered. Can someone help?
Below is the code snippet:
<form>
<div className="row">
<div className="col-sm-3">
<label>
Name:
<input type="text" name="name" />
</label>
</div>
<div className="col-sm-3">
<label>
Phone:
<input type="text" name="name" />
</label>
</div>
<div className="col-sm-3">
<label>
Email:
<input type="text" name="name" />
</label>
</div>
<div className="col-sm-3">
<input type="submit" value="Submit" />
</div>
</div>
</form>
This piece of code belongs to a react component, which is why it uses className
.