Pin icon on lower right corner using Materialize

Posted on

Question :

First time I’m using materialize .

I would like to know how to set an icon in the lower right corner.

<a class="btn-floating btn-large cyan pulse right"><i class="material-icons">edit</i></a>

Natively if there is one.


Answer :

I did not find a native class to do this in the documentation, but you can make an adjustment using a top of 100% minus the height of the btn itself.

See the example below:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
.btn-bottom {
    top: calc(100% - 56px);
<link rel="stylesheet" href="" />
<link rel="stylesheet" href="" />
<script src=""></script><scriptsrc=""></script>

<a class="btn-floating btn-large cyan pulse right btn-bottom"><i class="material-icons">edit</i></a>


Leave a Reply

Your email address will not be published. Required fields are marked *