How to align a button right in Materialize card-action

Question

I am using Materialize, and I need to align a button to the right side of the card in the card-action.

This is the code:

<div class="card-action">
  <a href="#" class="right">This is a link</a>
</div>

This is the result:

If I remove the class="right" then I get this result:

I want the result from the second image, except the button should be aligned to the right. Am I missing something about the materialize card-action? How should I get this behavior?

Answer 1

It should be right-align instead of right and you've to use it on card-action div. You can check about the alignment classes in Helper page of the documentation.

<div class="row">
    <div class="col s12 m4">
        <div class="card blue-grey darken-1">
            <div class="card-content white-text">
                <span class="card-title">Card Title</span>
                <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
                    require little markup to use effectively.</p>
            </div>
            <div class="card-action right-align">
                <a class="btn blue" href="#">Right</a>
            </div>
        </div>
    </div>
</div>