A ready to use pricing table block for use with websites and landing pages. An elegant and beautifully designed pricing table with 4 different plans to choose from.

Dependencies

  • Bootstrap 4
  • FontAwesome
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Bootstrap Blocks - Pricing Table 1</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="pricing-table-1 py-3 py-md-5">

        <div class="container">

            <div class="pricing-intro text-center">
                <h1 class="pricing-intro-title">Pricing Plans</h1>
                <p class="lead mt-3">Start with <strong>FREE</strong> Trial. No credit card. Cancel anytime.</p>
                <p class="text-muted px-xl-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam commodi consectetur consequatur distinctio, enim error eum impedit incidunt laboriosam, laudantium magnam, mollitia nemo non numquam officia officiis optio quaerat quasi qui reiciendis rem similique sint sit temporibus ullam voluptatem voluptates? Accusamus adipisci architecto hic molestias odit placeat quod quos recusandae.</p>
            </div>

            <div class="row no-gutters mt-4 mt-md-5 pt-md-3 justify-content-center pricing-plans">
                <div class="col-md-3 text-center pricing-plan-wrap">
                    <div class="pricing-plan">
                        <div class="pricing-header p-3 py-md-4">
                            <div class="pricing-title">Free</div>
                            <p class="text-muted">Forever Free</p>
                            <div class="pricing-amount"><span>$</span>0</div>
                            <button class="btn btn-outline-primary mt-3 mt-md-4 mb-2">Get Started</button>
                        </div>
                        <div class="pricing-features">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">Feature 1</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 text-center pricing-plan-wrap active mt-4 mt-md-0">
                    <div class="pricing-plan">
                        <div class="pricing-header p-3 py-md-4">
                            <div class="pricing-title">Starter</div>
                            <p class="text-muted">For Small Fishes</p>
                            <div class="pricing-amount"><span>$</span>19</div>
                            <button class="btn btn-outline-primary active mt-3 mt-md-4 mb-2">Get Started</button>
                        </div>
                        <div class="pricing-features">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">Feature 1</li>
                                <li class="list-group-item">Feature 2</li>
                                <li class="list-group-item">Feature 3</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 text-center pricing-plan-wrap mt-4 mt-md-0">
                    <div class="pricing-plan">
                        <div class="pricing-header p-3 py-md-4">
                            <div class="pricing-title">Pro</div>
                            <p class="text-muted">For Large Fishes</p>
                            <div class="pricing-amount"><span>$</span>29</div>
                            <button class="btn btn-outline-primary mt-3 mt-md-4 mb-2">Get Started</button>
                        </div>
                        <div class="pricing-features">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">Feature 1</li>
                                <li class="list-group-item">Feature 2</li>
                                <li class="list-group-item">Feature 3</li>
                                <li class="list-group-item">Feature 4</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 text-center pricing-plan-wrap mt-4 mt-md-0">
                    <div class="pricing-plan">
                        <div class="pricing-header p-3 py-md-4">
                            <div class="pricing-title">Premium</div>
                            <p class="text-muted">For Whales</p>
                            <div class="pricing-amount"><span>$</span>39</div>
                            <button class="btn btn-outline-primary mt-3 mt-md-4 mb-2">Get Started</button>
                        </div>
                        <div class="pricing-features">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">Feature 1</li>
                                <li class="list-group-item">Feature 2</li>
                                <li class="list-group-item">Feature 3</li>
                                <li class="list-group-item">Feature 4</li>
                                <li class="list-group-item">Feature 5</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /.pricing-table-1 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
// Bootstrap variables and mixins
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Variables
$primary:       #5863f8;
$border-radius:  1rem;

// Custom CSS
.pricing-intro-title {
  font-size: 2rem;
}

.pricing-plan-wrap {
  &.active {
    .pricing-plan {
      border-top: 5px solid $primary
    }
  }
}

.pricing-plan {
  border: 1px solid $border-color;
  border-radius: $border-radius;
}

.pricing-header {
  border-bottom: 1px solid $border-color;
}

.pricing-title {
  font-size: 2rem;
}

.pricing-amount {
  font-size: 3rem;
  line-height: 1;

  span {
    font-size: .875rem;
    vertical-align: top;
    display: inline-block;
    margin-top: .5rem;
  }
}

.pricing-features {
  .list-group-item {
    color: $gray-600;

    &:last-child {
      border-bottom-left-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
    }
  }
}

.btn-outline-primary {
  @include button-outline-variant($primary);
  border: 2px solid rgba($primary, .75);
}


@include media-breakpoint-up(md) {

  .pricing-intro-title {
    font-size: 2.5rem;
  }

  .pricing-plan {
    border-radius: 0 0 0 1rem;
    border-right: none;
  }

  .pricing-plan-wrap {
    &.active {
      .pricing-plan {
        position: relative;
        top: -4px;
      }
    }

    &:first-child {
      .pricing-plan {
        border-top-left-radius: $border-radius;
      }
    }

    &:last-child {
      .pricing-plan {
        border-top-right-radius: $border-radius;
        border-bottom-right-radius: $border-radius;
        border-right: 1px solid $border-color;
      }
    }
  }

}
.pricing-intro-title {
  font-size: 2rem;
}

.pricing-plan-wrap.active .pricing-plan {
  border-top: 5px solid #5863f8;
}

.pricing-plan {
  border: 1px solid #dee2e6;
  border-radius: 1rem;
}

.pricing-header {
  border-bottom: 1px solid #dee2e6;
}

.pricing-title {
  font-size: 2rem;
}

.pricing-amount {
  font-size: 3rem;
  line-height: 1;
}

.pricing-amount span {
  font-size: .875rem;
  vertical-align: top;
  display: inline-block;
  margin-top: .5rem;
}

.pricing-features .list-group-item {
  color: #6c757d;
}

.pricing-features .list-group-item:last-child {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.btn-outline-primary {
  color: #5863f8;
  background-color: transparent;
  background-image: none;
  border-color: #5863f8;
  border: 2px solid rgba(88, 99, 248, 0.75);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #5863f8;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

@media (min-width: 768px) {
  .pricing-intro-title {
    font-size: 2.5rem;
  }
  .pricing-plan {
    border-radius: 0 0 0 1rem;
    border-right: none;
  }
  .pricing-plan-wrap.active .pricing-plan {
    position: relative;
    top: -4px;
  }
  .pricing-plan-wrap:first-child .pricing-plan {
    border-top-left-radius: 1rem;
  }
  .pricing-plan-wrap:last-child .pricing-plan {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-right: 1px solid #dee2e6;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL3ByaWNpbmctdGFibGUvcHJpY2luZy10YWJsZS0x