Issue
So I'm having a hard time aligning a button at the bottom of my Bulma's column.
I want the button "Buy" to be at the bottom of the right column (side by side with the button "Hello"). I'm in this situation because my other column content is longer.
So far I tried thoses CSS styles on my button (and none of them helped me):
vertical-align: bottom;
margin-bottom: auto;
position: absolute;
bottom: 0;
Here is my HTML:
<section class="section">
<div class="columns is-centered">
<div class="column is-one-fifth">
<h4 class="title is-4">I'm a big column</h4>
I'm taller than the column next to me so my column will be bigger, lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">Hello</button>
</div>
<div class="column is-one-fifth">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
</div>
</section>
Could you guys help me? Thanks.
Solution
Alright, foud the answer : The Bulma column needs to have a few properties (suggested by @ahsan-ullah). Then the button needs to have an auto margin to top.
<section class="section">
<div class="columns is-centered">
<div class="column is-one-fifth item">
<h4 class="title is-4">I'm a big column</h4>
I'm taller than the column next to me so my button will be higher,lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">Hello</button>
</div>
<div class="column is-one-fifth item">
<h4 class="title is-4" style="align-self: flex-start;">I'm a small column</h4>
I'm a small column, and my button is well placed
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
</div>
</section>
.item{
display:flex;
flex-direction:column;
justify-content:space-between
}
.columns button{
margin-top: auto;
}
Result :
Answered By - Amperclock
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.