I wanted to align a Bootstrap 3 row contained in a container-fluid to the bottom of a section of my page.
What is the best way to do this without javascript?
I thought I could put the row in absolute position, but then it would stop working for the remaining sections in this way.
If you use absolute positioning within an element with relative positioning, then it will work. In this case, your specific row would have position: absolute and your 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 position absolute is always relative to the first ancestor element, which in turn has the positioning defined as absolute , fixed or relative .