Is there a way to make form elements stretch to the whole row width in Bootstrap 4?
The current arrangement looks quite messy: http://prntscr.com/id6pfm
Here is the HTML:
<div class="jumbotron vertical-center">
<div class="container-fluid">
<div class="row align-items-center justify-content-center">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<form class="form-group" method='POST' action='reset_password.php' enctype=utf-8 accept-charset=utf-8>
<input class="form-block" type='password' name='password' placeholder="New password" size='20'>
<input class="form-block" type='password' name='password_confirm' placeholder="Confirm new password" size='20'>
<input class="form-block" type='submit' value='Reset password'></input>
</form>
</div>
</div>
</div>
</div>
And the CSS for centering vertically:
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}