html - How to display two cards horizontally with equal height using bootstrap -


im using bootstrap. need place 2 cards of equal row-height. each card placed inside col-xs-6. card contains text , buttons. when use col-height col-xs-6 card both card join together. please me on this.

<div class="row">       <div class="row-height">         <div class="col-height col-middle col-xs-6 card">           <div class="row">             <div class="col-xs-12 text-center">               <h3 class="heading-s1">login</h3>             </div>             <div class="col-xs-12 text-center">               <a href="javascript:void(0);" class="btn big-btn no-border red-background unstyle-anchor" style="padding: 13px 50px;">login!</a>             </div>           </div>         </div>         <div class="col-height col-middle col-xs-6 card">           <div class="row">             <div class="col-xs-12 text-center">               <h3 class="heading-s1">sign up</h3>             </div>             <div class="col-xs-12 text-center">               <a href="javascript:void(0);" class="btn big-btn no-border red-background unstyle-anchor" style="padding: 13px 50px;">sign up!</a>             </div>           </div>         </div>       </div>     </div> 

is want?

.row should wrapped .container

.card {    border: 1px solid black;    margin: 10px;  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />  <div class="container">    <div class="row-height">      <div class="row">        <div class="col-height col-middle col-xs-5 pull-left card">          <div class="col-xs-12 text-center">            <h3 class="heading-s1">login</h3>          </div>          <div class="col-xs-12 text-center">            <a href="javascript:void(0);" class="btn big-btn no-border red-background unstyle-anchor" style="padding: 13px 50px;">login!</a>          </div>        </div>        <div class="col-height col-middle col-xs-5 pull-right card">          <div class="col-xs-12 text-center">            <h3 class="heading-s1">sign up</h3>          </div>          <div class="col-xs-12 text-center">            <a href="javascript:void(0);" class="btn big-btn no-border red-background unstyle-anchor" style="padding: 13px 50px;">sign up!</a>          </div>        </div>      </div>    </div>  </div>


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -