css - Create 3 price boxes with Bootstrap -
i create 3 boxes equal height using bootstrap not sure how it.
i found can use flexbox , main boxes equal height want inner div have border , div fill main div , cannot it.
i have other problems: how position button @ center bottom of div , have there description paragraph , paragrahps equal heights, because use border @ bottom.
here example code:
<div class="container text-center"> <div class="row"> <div class="col-md-4"> <div class="box"> <div class="box-header"> </div> <div class="box-body"> <p class="box-info">some description of product 1</p> <ul class="box-list"> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> <button class="btn btn-default">register</button> </div> </div> </div> <div class="col-md-4"> <div class="box"> <div class="box-header"> </div> <div class="box-body"> <p class="box-info">some description of product 2 can loooooooooooooong</p> <ul class="box-list"> <li>test</li> <li>test</li> <li>test</li> </ul> <button class="btn btn-default">register</button> </div> </div> </div> <div class="col-md-4"> <div class="box"> <div class="box-header"> </div> <div class="box-body"> <p class="box-info">some description of product 3</p> <ul class="box-list"> <li>test</li> <li>test</li> <li>test</li> </ul> <button class="btn btn-default">register</button> </div> </div> </div> </div> </div><!-- /.container -->
css:
body { padding-top: 50px; } .box-header { height: 100px; background-color: blue; text-align: center; } .box-body { position: relative; padding: 20px 30px; border: 1px solid green; border-top: none; } .box-info { border-bottom: 1px solid #e7e7e7; } .box-list { text-align: left; }
my description can not clear, can find bootply here.
Comments
Post a Comment