0

I found in a thread a way to Bottom-align grid elements in bootstrap :

How do I bottom-align grid elements in bootstrap fluid layout

On last anwser the guy say that I can do it this way and link to a fiddle

Link to the fiddle : http://jsfiddle.net/silb3r/0srp42pb/11/

I tried but I can't figure out what I did wrong, here my code :

HTML:

<div class="row rowMidle">
    <div class="col-md-3">
        <div id="leftTown"><img src="images/TownLeft.png" height="100%" width="100%"></div>
    </div>
    <div class="col-md-1">
        <div id="char1"><img src="images/char1.png" height="100%" width="100%"></div>
    </div>
    <div class="col-md-1">
        <div id="char2"><img src="images/char2.png" height="70%" width="70%"></div>
    </div>
    <div class="col-md-1">
        <div id="char3"> <img src="images/char3.png" height="80%" width="80%"></div>
    </div>
    <div class="col-md-3">
        <div id="paneau"><img src="images/EditGetElement.png" height="100%" width="100%"></div>
    </div>
    <div class="col-md-3">
        <div id="leftTown"><img src="images/towright.png" height="100%" width="100%"></div>
    </div>


</div>

CSS:

.rowMidle > * {
    float: none;
    display: inline-block;
}
.rowMidle > *:last-child {
    vertical-align: bottom;
}

Here you can check it online, to see the issue by yourself: http://goldiman.alwaysdata.net/

Thank you Best regards Goldiman

Community
  • 1
  • 1
goldiman
  • 189
  • 2
  • 13
  • possible duplicate of [Bottom-align grid elements in bootstrap fluid layout issues](http://stackoverflow.com/questions/29626521/bottom-align-grid-elements-in-bootstrap-fluid-layout-issues) – ketan Apr 15 '15 at 06:49

1 Answers1

0

Try this css:

.row.rowMidle {
  margin-top: 500px;
}

.row.rowMidle > div > div {
  vertical-align: bottom;
  position: absolute;
  bottom: 0;
}

remove float:none; from .rowMidle > *

madalinivascu
  • 32,064
  • 4
  • 39
  • 55