Bootstrap Column Pricing Table UI Issue
Question
Here is my HTML-Bootstrap Code:
<div class="container">
<div class="row db-padding-btm db-attached">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="db-wrapper">
<div class="db-pricing-eleven db-bk-color-one">
<div class="price">
<sup>$</sup>99
<small>per quarter</small>
</div>
<div class="type">
BASIC PLAN
</div>
<ul>
<li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
<li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
<li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="db-wrapper">
<div class="db-pricing-eleven db-bk-color-two popular">
<div class="price">
<sup>$</sup>199
<small>per quarter</small>
</div>
<div class="type">
MEDIUM PLAN
</div>
<ul>
<li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
<li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
<li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="db-wrapper">
<div class="db-pricing-eleven db-bk-color-three">
<div class="price">
<sup>$</sup>249
<small>per quarter</small>
</div>
<div class="type">
ADVANCE PLAN
</div>
<ul>
<li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
<li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
<li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
</div>
</div>
</div>
</div>
<!-- <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="db-wrapper">
<div class="db-pricing-eleven db-bk-color-six">
<div class="price">
<sup>$</sup>599
<small>per quarter</small>
</div>
<div class="type">
EXTENDED PLAN
</div>
<ul>
<li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
<li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
<li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
</div>
</div>
</div>
</div> -->
</div>
<!-- <div class="row db-padding-btm db-attached">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="db-wrapper">
<div class="db-pricing-eleven db-bk-color-one">
<div class="price">
<sup>$</sup>99
<small>per quarter</small>
</div>
<div class="type">
SMALL PLAN
</div>
<ul>
<li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
<li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
<li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="db-wrapper">
<div class="db-pricing-eleven db-bk-color-two popular">
<div class="price">
<sup>$</sup>159
<small>per quarter</small>
</div>
<div class="type">
MEDIUM PLAN
</div>
<ul>
<li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
<li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
<li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="db-wrapper">
<div class="db-pricing-eleven db-bk-color-three">
<div class="price">
<sup>$</sup>799
<small>per quarter</small>
</div>
<div class="type">
ADVANCE PLAN
</div>
<ul>
<li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
<li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
<li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
</div>
</div>
</div>
</div>
</div> -->
</div>
Here is my Css:
/*============================================================
BACKGROUND COLORS
============================================================*/
.db-bk-color-one {
background-color: #f55039;
}
.db-bk-color-two {
background-color: #46A6F7;
}
.db-bk-color-three {
background-color: #47887E;
}
.db-bk-color-six {
background-color: #F59B24;
}
/*============================================================
PRICING STYLES
==========================================================*/
.db-padding-btm {
padding-bottom: 50px;
}
.db-button-color-square {
color: #fff;
background-color: rgba(0, 0, 0, 0.50);
border: none;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.db-button-color-square:hover {
color: #fff;
background-color: rgba(0, 0, 0, 0.50);
border: none;
}
.db-pricing-eleven {
margin-bottom: 30px;
margin-top: 50px;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
color: #fff;
line-height: 30px;
}
.db-pricing-eleven ul {
list-style: none;
margin: 0;
text-align: center;
padding-left: 0px;
}
.db-pricing-eleven ul li {
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.db-pricing-eleven ul li i {
margin-right: 5px;
}
.db-pricing-eleven .price {
background-color: rgba(0, 0, 0, 0.5);
padding: 40px 20px 20px 20px;
font-size: 60px;
font-weight: 900;
color: #FFFFFF;
}
.db-pricing-eleven .price small {
color: #B8B8B8;
display: block;
font-size: 12px;
margin-top: 22px;
}
.db-pricing-eleven .type {
background-color: #52E89E;
padding: 50px 20px;
font-weight: 900;
text-transform: uppercase;
font-size: 30px;
}
.db-pricing-eleven .pricing-footer {
padding: 20px;
}
.db-attached > .col-lg-4,
.db-attached > .col-lg-3,
.db-attached > .col-md-4,
.db-attached > .col-md-3,
.db-attached > .col-sm-4,
.db-attached > .col-sm-3 {
padding-left: 0;
padding-right: 0;
}
.db-pricing-eleven.popular {
margin-top: 10px;
}
.db-pricing-eleven.popular .price {
padding-top: 80px;
}
I am attaching the image which I want to design. As I am new to bootstrap columns, I am getting problems in aligning the tables as in the attached image.I also it to be responsive for mobile and tablet.
I only want code to be in bootstrap-html only as my whole website is in bootstrap only.
Can anybody help me out how I can make it possible ?
Help is Appreciated. Thanks
1 answers
solution1
0 2017-01-26 22:09:20
Maybe use flexbox, example structure, already in Bootstrap4 used flexbox
<div class="container">
<div class="item"></div>
<div class="item active"></div>
<div class="item"></div>
</div>
.container {
display: flex;
height: 400px;
margin: 50px;
}
.item {
min-width: 33.33%;
background: blue;
}
.item.active {
margin-top: -40px;
margin-bottom: -40px;
background: red;
border-radius: 10px;
}
Live demo - https://jsfiddle.net/tk8h81gw/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Pricing Table height issue
Bootstrap Table Column Issue
PayPal Intergration with BootStrap Pricing Table
CSS Adding column in pricing table
Formatting pricing cards in Bootstrap
Bootstrap 3 column issue
bootstrap nested column issue
Issue with column padding in Bootstrap 3
Bootstrap column issue
Column gutter issue in Bootstrap
Related Tags