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

Popular posts from this blog

How to run C# code using mono without Xamarin in Android? -

c# - SharpSsh Command Execution -

python - Specify path of savefig with pylab or matplotlib -