I have been experimenting with Bootstrap 4 and attempting to implement the Vertical alignment feature as outlined on the webpage: https://getbootstrap.com/docs/4.0/layout/grid/
Despite reviewing my code multiple times, I am unable to identify the mistake I may be making.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="pt-md-4 row justify-content-md-center">
<div class="col-md-5 col-lg-3">
<div class="col align-items-center">
<?php if($_POST){ if (isset($pin_sucess)){ ?>
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">
<?php echo $pin_sucess; ?>
</h4>
</div>
<?php }} ?>
<form name="timeclock" action="<?=$_SERVER['REQUEST_URI']?>" method="POST">
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="pin">Pin</label>
<div class="col-sm-10">
<input type="text" name="pin" id="pin" class="form-control input-md" required="true">
</div>
</div>
<div class="form-group row">
<input type="hidden" name="csrf" value="<?php echo Token::generate();?>" />
<div class="col-sm-2 offset-sm-2">
<input type="submit" name="pin_submit" value="submit" class="btn btn-primary" />
</div>
</div>
</form>
</div>
</div>
<div class="col-md-7 col-lg-7">
Variable width content
<br />
<br /> Variable width content
<br />
<br /> Variable width content
<br />
<br /> Variable width content
</div>
</div>The page consists of two div elements, with the left one containing the time clock form that I intend to center between the right div element.
If the content in the right div becomes too long, my goal is to convert it into a scrollable div on the right side.
For instance, if the right div extends to 2 inches in length, the left div should ideally be positioned around 1 inch lower or so.