Home / css / Pricing Table Design(Inspirational) using Bootstrap and CSS

Pricing Table Design(Inspirational) using Bootstrap and CSS

Pricing Table Design(Inspirational) using Bootstrap and CSS

Adding Price page will lead to conversions and this can be a starting point for the long term relationship.So this design is simple yet powerful way to demonstrate your pricing strategy. This is designed using Bootstrap and CSS. This design is created by Erik.

LIVE DEMO

 CODE

  • HTML
  • Style.css
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
        <link rel="stylesheet" href="style.css" >
     
    </head>
<body>
  
 

<div class="container py-5">
    <h3 class="text-center">Pricing Table</h3></br></br>
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 shadow-sm">
      <div class="card-header card-header-yellow">
        <h4 class="my-0 font-weight-normal yellow">Free</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0</h1>
        <h3 class="card-title pricing-card-title"><small class="text-muted">Per Month</small></h3>
        <ul class="list-unstyled mt-3 mb-4">
          <li><b>10</b> users included</li>
          <li><b>2 GB</b> of storage</li>
          <li><b>2</b> Email Accounts</li>
          <li><b>Ltd </b>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block yellow-button">Free</button>
      </div>
    </div>
    <div class="card mb-4 shadow-sm">
      <div class="card-header card-header-green">
        <h4 class="my-0 font-weight-normal green">Pro</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$15 </h1>
         <h3 class="card-title pricing-card-title"><small class="text-muted">Per Month</small></h3>
        <ul class="list-unstyled mt-3 mb-4">
          <li><b>20</b> users included</li>
          <li><b>10 GB</b> of storage</li>
          <li><b>20</b> Email Accounts</li>
          <li><b>24*7 </b>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary green-button">Get started</button>
      </div>
    </div>
    <div class="card mb-4 shadow-sm">
      <div class="card-header card-header-blue blue">
        <h4 class="my-0 font-weight-normal">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 </h1>
         <h3 class="card-title pricing-card-title"><small class="text-muted">Per Month</small></h3>
        <ul class="list-unstyled mt-3 mb-4">
          <li><b>45</b> users included</li>
          <li><b>30 GB</b> of storage</li>
          <li><b>50</b> Email Accounts</li>
          <li><b>24*7 </b>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary blue-button">Contact us</button>
      </div>
    </div>
  </div>

  
</div>

</body>
</html>

 

html {
  font-size: 14px;
}

body {
  height: 100%;
  font-family: 'Montserrat';
  background-color: #eee;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.card-deck .card {
  min-width: 220px;
}

.yellow{

  color: #ffce55;
}


.card-header-yellow {
   
    border-bottom: 3px solid #ffce55 !important;
}

.green{

  color: #a0d468;
}
.card-header-green {
   
    border-bottom: 3px solid #a0d468 !important;
}
.blue{

  color: #2dc3e8;
}
.card-header-blue {
   
    border-bottom: 3px solid #2dc3e8 !important;
}
.card{
     box-shadow:0 0 10px rgba(0,0,0,.3) !important;
}

ul li {
    padding: 5px 0;
}

.yellow-button{
      border-radius: 50px;
      color:  #ffce55 !important;
      border-color: #ffce55 !important;
}
.green-button{
      border-radius: 50px;;
      background-color: #a0d468 !important;
      border-color: #a0d468 !important;
}
.blue-button{
     border-radius: 50px;;
      background-color: #2dc3e8 !important;
      border-color: #2dc3e8 !important;
}


 

Check Also

WebsiteFooter

Perfect Footer for your website using Bootstrap and Fontawesome

Perfect Footer for your website using Bootstrap and Fontawesome Even though Footer is located at …

Leave a Reply

Your email address will not be published. Required fields are marked *