Utilizing the power of Bulma in HTML
I have incorporated five divs within the main div and my goal is to position them all at the bottom of the page.
<div class="columns is-mobile" class="forecastContainer">
<div class="column is-1 blank">
<!--Empty Space-->
</div>
<div class="column is-2" id="dayTwo">
<h1>Day</h1>
<p>Icon</p>
<p>High</p>
<p>Humid</p>
<p>Wind</p>
</div>
<div class="column is-2" id="dayThree">
<h1>Day</h1>
<p>Icon</p>
<p>High</p>
<p>Humid</p>
<p>Wind</p>
</div>
<div class="column is-2" id="dayFour">
<h1>Day</h1>
<p>Icon</p>
<p>High</p>
<p>Humid</p>
<p>Wind</p>
</div>
<div class="column is-2" id="dayFive">
<h1>Day</h1>
<p>Icon</p>
<p>High</p>
<p>Humid</p>
<p>Wind</p>
</div>
<div class="column is-2" id="daySix">
<h1>Day</h1>
<p>Icon</p>
<p>High</p>
<p>Humid</p>
<p>Wind</p>
</div>
<div class="column is-1">
<!--Empty Space-->
</div>
</div>
The CSS for these Div(s)
I am uncertain about the effectiveness of these positioning styles, therefore I have omitted them.
#dayTwo, #dayThree, #dayFour, #dayFive, #daySix {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.00rem;
border-top: 1px solid black;
border-left: 1px solid black;
height: 450px;
}
#daySix {
border-right: 1px solid black;
}
My objective is to ensure that these divs remain fixed at the bottom even during user scrolls.