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
Post a Comment