As I work on developing an Electron app to test out the software, I am facing a challenge with basic interface design. I have opted for Bootstrap 4 to style my form, but I'm struggling to vertically center it.
Despite trying various solutions suggested by others, I haven't had much success. The attempts either don't work or mess up the layout entirely by compressing all the content into one line.
Does anyone have any recommendations on how I can achieve vertical alignment for the elements in the container below?
<!-- Search Field -->
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-auto">
<h1 class="text-white">Shorten M' URL!</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter URL...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Shorten!</button>
</span>
</div>
</div>
</div>
</div>