Flexbox in Bootstrap 4 acting weird - html

Question

I'm trying to use flexbox to align vertically a section.
So this is what I'm trying to align vertically:
HTML:
<!--Top Hero Section -->
<div class="d-flex hm-hero justify-content-center">
<div class="container">
<div class="row align-items-end">
<div class="col-12">
<h1 class="text-center">Fix Your Problem Today!</h1>
<p class="text-center">Start searching for a contractor or company around your area and get your problem fixed in a matter of hours!</p>
</div>
<!--Form Section -->
<div class="col-12">
<div class="form-group row justify-content-center">
<div class="col-12 col-md-6">
<input class="form-control" type="text" value="e.g. plumbing, carpentry" id="example-text-input">
</div>
<div class="col-12 col-md-4">
<input class="form-control" type="text" value="e.g. city name, postcode" id="example-text-input">
</div>
<div class="col-12 col-md-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Regarding CSS, I've only applied this:
.hm-hero {
background: url("../img/main_pic.png") no-repeat;
background-size: fill;
min-height: 600px;
}
I can't figure out why flexbox is not working. I've tried two classes, align-content/items-center in whatever div possible and still can't get it to work.
So since I have that full width div with the background image, inside it is a container div, which I'm trying to get it to stay vertically. I really want to avoid putting a 200px margin top to this. Is this is a Bootstrap 4 bug?

Answer 1

I added the align-items-center class to the flex div parent and it worked. As long as you have a height on the .hm-hero the content will be centered. Hope this helps. JSFiddle
.hm-hero {
background: url("https://placehold.it/960x600") no-repeat;
background-size: fill;
min-height: 600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!--Top Hero Section -->
<div class="d-flex hm-hero justify-content-center align-items-center">
<div class="container">
<div class="row align-items-end">
<div class="col-12">
<h1 class="text-center">Fix Your Problem Today!</h1>
<p class="text-center">Start searching for a contractor or company around your area and get your problem fixed in a matter of hours!</p>
</div>
<!--Form Section -->
<div class="col-12">
<div class="form-group row justify-content-center">
<div class="col-12 col-md-6">
<input class="form-control" type="text" value="e.g. plumbing, carpentry" id="example-text-input">
</div>
<div class="col-12 col-md-4">
<input class="form-control" type="text" value="e.g. city name, postcode" id="example-text-input">
</div>
<div class="col-12 col-md-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>