How to align Material Design Lite cards to right hand side

12,221

Solution 1

Using an mdl-layout-spacer to the left of the card should help. mdl-layout-spacer takes up as much space as it can.

<div class="mdl-grid">
  <div class="mdl-layout-spacer"></div>
  <div class="mdl-cell mdl-cell--6-col">
    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Welcome</h2>
      </div>
      <div class="mdl-card__supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Mauris sagittis pellentesque lacus eleifend lacinia...
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
          Get Started
        </a>
      </div>
      <div class="mdl-card__menu">
        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
          <i class="material-icons">share</i>
        </button>
      </div>
    </div>
  </div>
</div>

Solution 2

Try this class mdl-typography--text-right, in this way, the contents in that cell will have an alignment of right:

<div class="mdl-cell mdl-cell--6-col mdl-typography--text-right">
    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Welcome</h2>
        </div>
        <div class="mdl-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Mauris sagittis pellentesque lacus eleifend lacinia...
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Get Started
            </a>
        </div>
        <div class="mdl-card__menu">
            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                <i class="material-icons">share</i>
            </button>
        </div>
    </div>
</div>

Vice versa: mdl-typography--text-center and mdl-typography--text-left also work.

Share:
12,221

Related videos on Youtube

Akshay Soma
Author by

Akshay Soma

Innovation that everyone can Enjoy ;)

Updated on May 15, 2022

Comments

  • Akshay Soma
    Akshay Soma 13 days

    I'm trying to build a simple page which have cards using material design lite components but one problem stucks the whole layout of the page. How to align the mdl card to right hand side of the screen ? I have tried by float:right; in css then the card is only shifting towards right in that same col not to the screen. Help me to shift it

    <div class="mdl-cell mdl-cell--6-col">
        <div class="demo-card-wide mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Welcome</h2>
            </div>
            <div class="mdl-card__supporting-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Mauris sagittis pellentesque lacus eleifend lacinia...
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                    Get Started
                </a>
            </div>
            <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                    <i class="material-icons">share</i>
                </button>
            </div>
        </div>
    </div>

  • Akshay Soma
    Akshay Soma over 5 years
    Bro the card doesn't get responsive after I add spacer to card. Is there any alternative that makes card responsive ?
  • ilgazer
    ilgazer over 5 years
    You can try setting the card's width and height as a percentage in your css so that it's responsive: .mdl-card { height: 10%; }