Live Demo - Premium plans box with sign up using bootstrap

See Free Live Demo example of Get premium plans box code free. premium plans box design create using html, css and bootstrap you can get code of responsive pricing table html snippet. we give you example of bootstrap premium pricing table , you can simple copy bellow code and use in your project. If it free snippets of pricin...

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-4 col-xs-12">
      <div class="row planBox premium text-center">
        <div class="col-md-12 section1">
          <p>Premium</p>
          <h1><sup>$</sup>205<span>/ mo</span></h1>
          <button class="btn btn-block box1btn">Sign Up</button>
        </div>
        <div class="col-md-12 section2">
          <p>Builder</p><br>
          <p>Email Previews</p><br>
          <p>Page Testing</p><br>
          <p>Filter</p><br>
          <p>2M Email Analytics Opens</p><br>
          <p>9 Users Free</p><br>
        </div>
        <div class="col-md-12 section3">
        <button class="btn btn-block saveBtn">SAVE</button>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
      <div class="row planBox plus text-center">
        <div class="col-md-12 section1">
          <p>Plus</p>
          <h1><sup>$</sup>300<span>/ mo</span></h1>
          <button class="btn btn-block box1btn">Sign Up</button>
        </div>
        <div class="col-md-12 section2">
          <p>Builder</p><br>
          <p>Email Previews</p><br>
          <p>Page Testing</p><br>
          <p>Filter</p><br>
          <p>2M Email Analytics Opens</p><br>
          <p>5 Users Free</p><br>
        </div>
        <div class="col-md-12 section3">
          <button class="btn btn-block saveBtn">SAVE</button>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
      <div class="row planBox basic text-center">
        <div class="col-md-12 section1">
          <p>Basic</p>
          <h1><sup>$</sup>50<span>/ mo</span></h1>
          <button class="btn btn-block box1btn">Sign Up</button>
        </div>
        <div class="col-md-12 section2">
          <p>Builder</p><br>
          <p>Email Previews</p><br>
          <p>Page Testing</p><br>
          <p><strike>Filter</strike></p><br>
          <p><strike>Email Analytics</strike></p><br>
          <p>5 Users Free</p><br>
        </div>
        <div class="col-md-12 section3">
          <button class="btn btn-block saveBtn">SAVE</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

body{
  background-color: #F0F0F0;
  padding-top: 30px;
}
.section-plan{
    background-color:#f1f1f1;
    padding: 30px;
}
.planBox{
    margin: 0px;
    border-radius:3px;
    border:1px solid #D8D8D8;
}
.section1{
    border-radius:3px 3px 0px 0px;
    padding: 10px 15px 30px 15px;
    background-color: #BC2663;
}
.section1 p{
    font-size:20px;
    color:#fff;
}
.section1 h1{
    color:#fff;
    font-size:45px;
    margin-top:0px;
}
sup{
    font-size: 12px;
    top: -1.9em;
}
.section1 span{
    font-size: 12px;
}
.box1btn:hover,
.box1btn{
    background-color: #FFFFFF;
    color:#BC2663;
}
.saveBtn:hover,
.saveBtn{
    background-color: #BC2663;
    color:#fff;
}
.section2{
    background-color: #fff;
    padding: 30px 0px 20px 0px;
}
.section2 p{
    display: inline-block;
    border-bottom: 1px dotted #DDDDDD;
}
.section3{
    padding: 15px;
    border-top:1px solid #DDDDDD;
}
.plus .section1{
    background-color: #30408B;
}
.plus .saveBtn{
    background-color: #30408B;
}
.plus .box1btn{
    color:#30408B;
}
.basic .section1{
    background-color:#EBA700;
}
.basic .box1btn{
    color:#EBA700;
}
.basic .saveBtn{
    background-color:#EBA700;
}