Bulma: [Q] is there a way to vertically align an element to the bottom of the containing column?

Created on 14 Dec 2016  Â·  4Comments  Â·  Source: jgthms/bulma

Hi guys, I hope someone can help me.
I have two columns like this:

<div class="box">
  <div class="columns">
    <div class="column is-half">
      <figure class="image is-square">
        <img src="http://placehold.it/500x500">
      </figure>
    </div>
    <div id="c2" class="column is-half">
      <div id="text" class="container">
        <p>hi, this is some text.</p>
      </div>
    </div>
  </div>
</div>

columns

I need the text in the second column to be aligned to the bottom on the column.
I've tried ```

text {

position: relative;
bottom: 0px;
}and#c2 {
vertical-align: bottom !important;
}``` but it doesn't work.

Any sugestion on how to achieve this?
I've putted an example on codepen.

Most helpful comment

Could this solution be added as a default bulma feature?

All 4 comments

c2 { margin-top: auto; }

On Thu, Dec 15, 2016 at 1:57 AM, natural data corruption <
[email protected]> wrote:

Hi guys, I hope someone can help me.
I have two columns like this:

hi, this is some text.

[image: columns]
https://camo.githubusercontent.com/98c15a71759dbb36d770e8908e72530e48b00f50/68747470733a2f2f736e61672e67792f34417862707a2e6a7067

I need the text in the second column to be aligned to the bottom on the
column.
I've tried #text { position: relative; bottom: 0px; } and #c2 {
vertical-align: bottom !important; } but it doesn't work.

Any sugestion on how to achieve this?
I've putted an example https://cdpn.io/e/QGJWPW on codepen.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/jgthms/bulma/issues/407, or mute the thread
https://github.com/notifications/unsubscribe-auth/ADUbP7iZBc2NwAEAAtH2843wN99JDdUtks5rIC4TgaJpZM4LNOW2
.

@ak5 thank you

Could this solution be added as a default bulma feature?

Could this solution be added as a default bulma feature?

+1

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Laraveldeep picture Laraveldeep  Â·  3Comments

Antrikshy picture Antrikshy  Â·  3Comments

jaredreich picture jaredreich  Â·  3Comments

swthate picture swthate  Â·  3Comments

rogervila picture rogervila  Â·  3Comments