Align Row at the bottom of a Section

Question

I wanted to line up a Bootstrap 3 Row contained in a container-fluid at the bottom of a Section of my page.

What is the best way to do this without using javascript?

I thought I could put Row in absolute position, but then it wouldn’t work for the rest of the sections this way.

Answer 1

If you use absolute positioning, within an element with relative positioning, then it will work. In this case, your Row specific would have position: absolute and its Section would have position: relative.

Example:

.conteiner {
    width: 400px;
    height: 100px;
    color: white;
    text-align: center;
    line-height: 100px;
    position: relative;
}

.para-o-fundo {
    width: 100%;
    height: 25px;
    bottom: 0;
    right: 0;
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    color: white;
    text-align: center;
    line-height: 25px;
}

<div class="conteiner" style="background: green;">
    contêinero, com <em>position: relative</em>
    <div class="para-o-fundo">Texto no fundo, com <em>position: absolute</em></div>
</div>
<div class="conteiner" style="background: red;">
    contêiner
    <div class="para-o-fundo">Texto no fundo</div>
</div>
<div class="conteiner" style="background: yellow;">
    contêiner
    <div class="para-o-fundo">Texto no fundo</div>
</div>

The positioning absolute, is always in relation to the first ancestral element, which in turn has the positioning defined as absolute, fixed or relative.

Read more about this in css-Tricks.com^{(in English)}