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

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!


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 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>

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

Thank you, it works!!