Create a section at bottom of a Bootstrap container - html

Question

.force-to-bottom {
background: grey;
align-self: flex-end;
width: 100%;
margin: 0;
text-align: center;
height:200px;
}
#story {
text-align: center;
display: flex;
flex-direction: column;
padding:0;
justify-content: space-between;
}
.row {
display: flex;
}
html, body, .row, .container {
height: 100%;
}
.container {
background: pink;
}
<div class="container fill-height">
<div class="row">
<div id="story" class="col-lg-12">
<h1 style="text-align:center;">Demo</h1>
<div class="row force-to-bottom text-center">
<p>It's supposed to stay at the bottom of this section n goes across the whole screen</p>
</div>
</div>
</div>
</div>
I have a single page with multiple containers. I'm trying to create a section like a footer at the bottom of one of those containers. That footer should stay at the bottom of that section, but not at the bottom of the entire page. I've tried to add a force-to-bottom div but that did not work. How should I achieve this? Many thanks!
<div id="containerOne" class="container fill-height">
<div class="row force-to-bottom text-center">
<p>this is the footer of that one div</p>
</div>
</div>
<div id="containerTwo" class="container fill-height">
</div>

Answer 1

You can use flexbox to achieve this easily.
Make the #story flex by giving it display: flex property along with flex-direction: column to align its children below each other vertically.
Next to the .force-to-bottom children simply give the property align-self: flex-end to float to the bottom of its respective containers.
html, body, .row, #story, .container {
height: 100%;
}
.row {
display: flex;
}
.container {
background: pink;
}
.force-to-bottom {
background: grey;
align-self: flex-end;
width: 100%;
height: 50px;
margin: 0;
justify-content: center;
align-items: center;
}
#story {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
}
<div id="payContainer" class="container fill-height">
<div class="row">
<div id="story" class="col-lg-12">
<h1 style="text-align:center;">Demo</h1>
<div class="row force-to-bottom text-center">
<p>It's supposed to stay at the bottom of this section n goes across the whole screen</p>
</div>
</div>
</div>
</div>
Update after OP updated code:
Like I mentioned, for the above updated HTML structure you have. You need to apply display: flex to the #story div instead(not the .container). Also add another property flex-direction: column to make its children elements align below each other. .force-to-bottom styles remain the same.