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
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
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> 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.
Thank you, it works!!