Bootstrap element to bottom with flexbox - html

Question

I have a snippet with my code of section height height: 450px;. Please see snippet:
<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">
<style>
.get-tour .form-block {
display: inline-block;
}
.get-tour .form-block label {
display: block;
}
</style>
<section style="min-height: 450px">
<div class="container">
<div class="row">
<div class="col-lg-8">
Use the .flex-fill class on a series of sibling elements to force them into widths .... align-items , flex-direction: column , and margin-top: auto
</div>
<div class="col-lg-3">
Use the .flex-fill class on a series of sibling elements to force them into widths .... align-items , flex-direction: column , and margin-top: auto
</div>
</div>
<div class="element">
<div class="get-tour d-flex align-items-end">
<form action="">
<div class="form-block">
<label>When</label>
<input type="text">
</div>
<div class="form-block">
<label>Date </label>
<input type="text">
</div>
<div class="form-block">
<label>Qty ночей</label>
<input type="text">
</div>
<div class="form-block">
<label>Who</label>
<input type="text">
</div>
<div class="form-block">
<label>Type</label>
<input type="text">
</div>
<div class="form-block">
<button type="submit">Search</button>
</div>
</form>
</div>
</div>
</div>
</section>
How I can put to bottom my form get-tour with flexbox? I tried add class d-flex align-items-end but my code is not work. Why? If I set height: 100% to container or on my section also not work. Please help fix this issue. Thanks.

Answer 1

If I set height: 100% to container or on my section also not work.
You need to set body and html's height to 100% as well. Because they wrap all of your content.
Then, you can use flexbox layout model to put your get-tour at the bottom of your page.
body,
html {
height: 100%;
}
section {
height: 100%;
}
section .container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
<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">
<style>
.get-tour .form-block {
display: inline-block;
}
.get-tour .form-block label {
display: block;
}
</style>
<section style="min-height: 450px">
<div class="container">
<div class="row">
<div class="col-lg-8">
Use the .flex-fill class on a series of sibling elements to force them into widths .... align-items , flex-direction: column , and margin-top: auto
</div>
<div class="col-lg-3">
Use the .flex-fill class on a series of sibling elements to force them into widths .... align-items , flex-direction: column , and margin-top: auto
</div>
</div>
<div class="element">
<div class="get-tour ">
<form action="">
<div class="form-block">
<label>When</label>
<input type="text">
</div>
<div class="form-block">
<label>Date </label>
<input type="text">
</div>
<div class="form-block">
<label>Qty ночей</label>
<input type="text">
</div>
<div class="form-block">
<label>Who</label>
<input type="text">
</div>
<div class="form-block">
<label>Type</label>
<input type="text">
</div>
<div class="form-block">
<button type="submit">Search</button>
</div>
</form>
</div>
</div>
</div>
</section>