A noob question on how to center a card or any other element

design material
1

I’m unfamiliar with bootstrap. Never used it before. I know a fair amount of CSS and HTML. I want to center a card in the middle of my web page automatically. Can someone please help me?

Thank you!

-CJ

2

Material is based on bootstrap. To setup an orange card which appear horizantally centered in desktop but occupies full width of a mobile device, use the following example

<div class="ui-card-wrap">
  <div class="row">
    <div class="col-md-offset-4 col-md-4 col-sm-6">
      <div class="card card-orange">
        <div class="card-main">
          <div class="card-inner">
            <p class="card-heading">.card-orange</p>
            <p>Lorem ipsum dolor sit amet.<br>Consectetur adipiscing elit.</p>
          </div>
          <div class="card-action">
            <div class="card-action-btn pull-left">
              <a class="btn btn-flat waves-attach" href="javascript:void(0)"><span class="icon">check</span>&nbsp;Button</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Here I have used col-md-offset-4 col-md-4 to make sure the card appears in 1/3rd of the screen on medium screen sizes and larger than medium screen sizes.

col-sm-6 tells the browser to use full width in smaller screen sizes.

I am not sure but I guess in material there are 12 columns in medium width and 6 columns in smaller width.

1 Like
3

Thank you, it works!!