Member Avatar for Himanshu Chawla

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 Contributors
  • 1 Reply
  • 468 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for diafol

Difficult to know how to help. You have an image of how it should look or does look? How should it look at different screen sizes? When you say you can't align them - not sure how you want them aligned or what's wrong. Tables? There are no tables that I can see - everything div'ed up as required.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.