Bootstrap 4 Vertical Align not working

I'm making a very simple form for an Electron app I am making to experiment with the software, however, I am stuck on the most basic of things... the interface design.

I'm using Bootstrap 4 for my interface and am trying to centre the form vertically, however, I am getting mix results using various suggestions made on other's questions on the same topic. They either do not work or squeeze all my content onto a single line and generally mess the current layout up.

Any suggestions on how I can vertically align the items 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>

Solution

Are you looking for this?:

.vh-100 {
    height: 100vh;
}

<div class="container vh-100 bg-dark">
    <div class="row vh-100 justify-content-center align-items-center">
        <div class="col-6 text-center">
            <h1 class="text-white">Shorten M' URL!</h1>
            <br>
            <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>
        
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

Basically you have to have the container to fit the screen height. Once there, you can align it's items vertically.