title: Bootstrap Column Pricing Table UI Issue
body: <p>Here is my HTML-Bootstrap Code: </p>
  
  <pre><code>&lt;div class="container"&gt;
           &lt;div class="row db-padding-btm db-attached"&gt;
              &lt;div class="col-xs-12 col-sm-3 col-md-3"&gt;
                 &lt;div class="db-wrapper"&gt; 
                    &lt;div class="db-pricing-eleven db-bk-color-one"&gt;
                       &lt;div class="price"&gt;
                          &lt;sup&gt;$&lt;/sup&gt;99
                          &lt;small&gt;per quarter&lt;/small&gt;
                       &lt;/div&gt;
                       &lt;div class="type"&gt;
                          BASIC PLAN
                       &lt;/div&gt;
                       &lt;ul&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-print"&gt;&lt;/i&gt;30+ Accounts &lt;/li&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;150+ Projects &lt;/li&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;Lead Required&lt;/li&gt;
                       &lt;/ul&gt;
                       &lt;div class="pricing-footer"&gt;
                          &lt;a href="#" class="btn db-button-color-square btn-lg"&gt;BOOK ORDER&lt;/a&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-sm-3 col-md-3"&gt;
                 &lt;div class="db-wrapper"&gt;
                    &lt;div class="db-pricing-eleven db-bk-color-two popular"&gt;
                       &lt;div class="price"&gt;
                          &lt;sup&gt;$&lt;/sup&gt;199
                          &lt;small&gt;per quarter&lt;/small&gt;
                       &lt;/div&gt;
                       &lt;div class="type"&gt;
                          MEDIUM PLAN
                       &lt;/div&gt;
                       &lt;ul&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-print"&gt;&lt;/i&gt;30+ Accounts &lt;/li&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;150+ Projects &lt;/li&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;Lead Required&lt;/li&gt;
                       &lt;/ul&gt;
                       &lt;div class="pricing-footer"&gt;
                          &lt;a href="#" class="btn db-button-color-square btn-lg"&gt;BOOK ORDER&lt;/a&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-sm-3 col-md-3"&gt;
                 &lt;div class="db-wrapper"&gt;
                    &lt;div class="db-pricing-eleven db-bk-color-three"&gt;
                       &lt;div class="price"&gt;
                          &lt;sup&gt;$&lt;/sup&gt;249
                          &lt;small&gt;per quarter&lt;/small&gt;
                       &lt;/div&gt;
                       &lt;div class="type"&gt;
                          ADVANCE PLAN
                       &lt;/div&gt;
                       &lt;ul&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-print"&gt;&lt;/i&gt;30+ Accounts &lt;/li&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;150+ Projects &lt;/li&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;Lead Required&lt;/li&gt;
                       &lt;/ul&gt;
                       &lt;div class="pricing-footer"&gt;
                          &lt;a href="#" class="btn db-button-color-square btn-lg"&gt;BOOK ORDER&lt;/a&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- &lt;div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"&gt;
                 &lt;div class="db-wrapper"&gt;
                    &lt;div class="db-pricing-eleven db-bk-color-six"&gt;
                       &lt;div class="price"&gt;
                          &lt;sup&gt;$&lt;/sup&gt;599
                          &lt;small&gt;per quarter&lt;/small&gt;
                       &lt;/div&gt;
                       &lt;div class="type"&gt;
                          EXTENDED PLAN
                       &lt;/div&gt;
                       &lt;ul&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-print"&gt;&lt;/i&gt;30+ Accounts &lt;/li&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;150+ Projects &lt;/li&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;Lead Required&lt;/li&gt;
                       &lt;/ul&gt;
                       &lt;div class="pricing-footer"&gt;
                          &lt;a href="#" class="btn db-button-color-square btn-lg"&gt;BOOK ORDER&lt;/a&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt; --&gt;
           &lt;/div&gt;
           &lt;!-- &lt;div class="row db-padding-btm db-attached"&gt;
              &lt;div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"&gt;
                  &lt;div class="db-wrapper"&gt;
                      &lt;div class="db-pricing-eleven db-bk-color-one"&gt;
                          &lt;div class="price"&gt;
                              &lt;sup&gt;$&lt;/sup&gt;99
                                  &lt;small&gt;per quarter&lt;/small&gt;
                          &lt;/div&gt;
                          &lt;div class="type"&gt;
                              SMALL PLAN
                          &lt;/div&gt;
                          &lt;ul&gt;
  
                              &lt;li&gt;&lt;i class="glyphicon glyphicon-print"&gt;&lt;/i&gt;30+ Accounts &lt;/li&gt;
                              &lt;li&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;150+ Projects &lt;/li&gt;
                              &lt;li&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;Lead Required&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;div class="pricing-footer"&gt;
  
                              &lt;a href="#" class="btn db-button-color-square btn-lg"&gt;BOOK ORDER&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"&gt;
                   &lt;div class="db-wrapper"&gt;
                  &lt;div class="db-pricing-eleven db-bk-color-two popular"&gt;
                      &lt;div class="price"&gt;
                          &lt;sup&gt;$&lt;/sup&gt;159
                                  &lt;small&gt;per quarter&lt;/small&gt;
                      &lt;/div&gt;
                      &lt;div class="type"&gt;
                          MEDIUM PLAN
                      &lt;/div&gt;
                      &lt;ul&gt;
  
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-print"&gt;&lt;/i&gt;30+ Accounts &lt;/li&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;150+ Projects &lt;/li&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;Lead Required&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class="pricing-footer"&gt;
  
                          &lt;a href="#" class="btn db-button-color-square btn-lg"&gt;BOOK ORDER&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                       &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"&gt;
                   &lt;div class="db-wrapper"&gt;
                  &lt;div class="db-pricing-eleven db-bk-color-three"&gt;
                      &lt;div class="price"&gt;
                          &lt;sup&gt;$&lt;/sup&gt;799
                                  &lt;small&gt;per quarter&lt;/small&gt;
                      &lt;/div&gt;
                      &lt;div class="type"&gt;
                          ADVANCE PLAN
                      &lt;/div&gt;
                      &lt;ul&gt;
  
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-print"&gt;&lt;/i&gt;30+ Accounts &lt;/li&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;150+ Projects &lt;/li&gt;
                          &lt;li&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;Lead Required&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class="pricing-footer"&gt;
  
                          &lt;a href="#" class="btn db-button-color-square btn-lg"&gt;BOOK ORDER&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                       &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;/div&gt; --&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Here is my Css:</p>
  
  <pre><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 &gt; .col-lg-4,
  .db-attached &gt; .col-lg-3,
  .db-attached &gt; .col-md-4,
  .db-attached &gt; .col-md-3,
  .db-attached &gt; .col-sm-4,
  .db-attached &gt; .col-sm-3 {
      padding-left: 0;
      padding-right: 0;
  }
  
  .db-pricing-eleven.popular {
      margin-top: 10px;
  }
  
      .db-pricing-eleven.popular .price {
          padding-top: 80px;
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>I only want code to be in bootstrap-html only as my whole website is in bootstrap only.</p>
  
  <p>Can anybody help me out how I can make it possible ?</p>
  
  <p>Help is Appreciated. Thanks</p>
  
  <p><a href="https://i.stack.imgur.com/Fj9zB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fj9zB.jpg" alt="enter image description here"></a></p>