Bootstrap Column Services Table Design UI Issue

HTML & CSS
, , , ,
1

Here is my Html 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 Code:

/*============================================================
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 link 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.

Image Link- https://s23.postimg.org/r8va8u457/test.jpg

I only want code to be in bootstrap-html only as my whole website is in bootstrap only.

I got answer on stackoverflow that i should use flexbox but that also not going with my website.

Can anybody help me out how I can make it possible ?

Help is Appreciated. Thanks

2

Hi,

Your display seems to be very close to what you are asking for?

If you add some padding-bottom to the middle pricing-footer then it will extend below the other two columns.

If you want the middle column to overlap the left and right a little then add a negative margin here.

db-pricing-eleven.popular {
    margin: 10px -20px 0;
    position: relative;
    z-index: 2;
}

Your columns should add up to 12 so at the moment the display will be left-aligned in the container. If you change them to -4 instead of -3 then they will fill the available centred container. However if you want the columns smaller then you will need to add an offset to the first column to center it (refer to documentation).

You will also need to set some heights to make the elements match height at different widths otherwise when words wrap or don’t wrap the alignment of the colors will not match. Or perhaps you could make sure that the text in the plan row is on two lines for all the items to start with to avoid the text wrapping at different widths and thus avoid adding a height which is bad for business.

In bootstrap you can use the columns to divide the page but if you want overlaps on the columns then you need to do this via your custom inner elements and with negative margins you can pull elements in and out as required.

Here’s a screenshot using the methods above:

1469×1568 70 KB

I used this code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/*============================================================
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;
}
/* additions*/
.type span {
	display:block
}
db-pricing-eleven.popular {
	margin: 10px -20px 0;
	position: relative;
	z-index: 2;
}
.db-pricing-eleven .pricing-footer.mid-pricing-footer {
	padding-bottom:60px;
}
</style>
</head>
<body>
<div class="container">
<div class="row db-padding-btm db-attached">
  <div class="col-xs-12 col-sm-4 col-md-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"> BASIC<span>PLAN</span> </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">
    <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<span>PLAN</span> </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 mid-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">
    <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<span>PLAN</span> </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>
</body>
</html>

Just because you are using bootstrap doesn’t mean you can’t come out of the grid when needed if you have something that can be done simpler by other means. At the end of the day its all just css:)

As you have already been told that if you want to make this more automatic without having to set heights etc then you should come out of the grid and use flexbox or display table.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.