Bulma: Align a column to the right

[asliwinski]

This is about Bulma.
I'm using Bulma 0.7.4

Description

How can I right align a single column in a row without using offset? is-pulled-right does not work.

<div class="container">
  <div class="columns">
     <div class="column is-pulled-right">
      Should be pulled right
    </div>
  </div>
</div>

[ghost]

@asliwinski I'm not an expert by any means, but I think what you would want to do is capture your columns in a level

This may require you to remove some padding via custom CSS/SASS/SCSS.

[asliwinski]

@ProtonScott I tried that, but it only works when there are both level-left and level-right present (I only need the latter). I finally solved this by pulling the div out of the columns div (making it a direct descendant of the container) and adding a custom float: right rule to it. Still, I believe it should be included in Bulma as a modifier (like it is in Bootstrap, for instance).

[tomhrtly]

@asliwinski
Floats don't work with Flexbox, add "justify-content: flex-end;" to your columns class: https://codepen.io/tomhrtly/pen/ROXxoZ

[zitrusblau]

@tomhrtly
I think your answer is not the solution of the question, because this would align right all columns in this row, the question was about a single column!
@asliwinski
You can use margin-left:auto at the column element, if the column you want align right is the last column in the row, the opposite is working too, margin-right:auto if you want to align left the first column in the row.

[lukio3]

TLDR: Add "text-align:right;" to the column.

This is old but open...

In the OP's case:

<div class="container">
  <div class="columns">
     <div class="column" style="text-align:right;">
      Should be pulled right
    </div>
  </div>
</div>

This is consistent with centering content a column, where you can use text-align:center; which is exactly what the "has-text-centered" utility class does/is.

[emanuelgandrade]

that works:

<div class="container">
  <div class="columns">
     <div class="column" align="right">
      Should be pulled right
    </div>
  </div>
</div>

[theo-stocchetti]

Without the column if you use-it for align

<div class="container has-text-right">
  Should be pulled right
</div>

[mroliveira7]

As said before, the float does not work for columns but you can use it in a div inside the column:

<div class="columns">
  <div class="column">
    <div class="is-pulled-right">This is pulled right</div>
  </div>
</div>

I use it that way and works fine

[marcoczen]

2020: v0.8.2

This worked -> class="is-pulled-right"
This no -> align="right"

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.