CODEWITHSUNDEEP
cssbuttonflexboxvertical-alignmentbulma
Amperclock
Amperclock

Reputation: 409

Bulma align button at the bottom of a column

So I'm having a hard time aligning a button at the bottom of my Bulma's column.

enter image description here

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.

Upvotes: 4

Views: 10615

Answers (4)

ivanov17
ivanov17

Reputation: 144

Bulma currently supports flexbox helpers and spacing helpers. So just use them here:

<section class="section">
    <div class="columns is-centered">
        <div class="column is-one-fifth is-flex is-flex-direction-column">
            <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 mt-auto">Hello</button>
        </div>

        <div class="column is-one-fifth is-flex is-flex-direction-column">
            <h4 class="title is-4">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 mt-auto">BUY</button>
    </div>
    </div>
</section>

Upvotes: 3

a coder
a coder

Reputation: 7639

You can use inline style margin-top:auto on the column div like this:

    <div class="column is-one-fifth" style="margin-top: auto;">
        <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>

Alternately, probably preferably, add it as a custom style to your .css and use it as a class inline.

.css:

.valignbottom{
    margin-top: auto;
}

html:

    <div class="column is-one-fifth valignbottom">
        <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>

Upvotes: 0

Amperclock
Amperclock

Reputation: 409

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 :

enter image description here

Upvotes: 7

Ahsan Ullah
Ahsan Ullah

Reputation: 158

hope it is the answer for you work.

.maindiv{
  width:200px;
  height:180px;
  border:1px solid red;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between
}

.innerdiv{
  display:flex;
  flex-direction:column;
}

button{
  width:150px;
  height:30px;
  color:white;
  background-color:blue;
  border-radius:4px
}
<div class='maindiv'>
  <h3>Mana Foutan</h3>
  <span>lorem ipsum lorem ispum</span>
  
  <div class='innerdiv'>
    <i>Make it rain!</i>
    <button>Buy</button>
  </div>
</div>

Upvotes: 1

Related Questions