Website Pricing Plan Section | Responsive Pricing Snippet

Discover our responsive pricing snippet with Free, Popular, and Enterprise plans. Perfect for any website, this pricing plan section helps users compare features and choose the right option, offering flexibility and scalability for all businesses.

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
body {
    font-family: "Nunito", sans-serif;
}
#fws_pricing_1 .heading{
    text-align: center;
}
#fws_pricing_1 .heading h2{
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 50px;
    text-transform: capitalize;
}
#fws_pricing_1{
    margin-top: 50px;
margin-bottom: 50px;
}
#fws_pricing_1 .plan {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 40px 20px;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all .4s;
}
#fws_pricing_1 .plan h2 {
    font-size: 18px;
    margin-bottom: 10px;
    transition: all .4s;
}
#fws_pricing_1 .plan:hover h2{
    color: #007BFF;
}
#fws_pricing_1 p.price {
    font-size: 34px;
    font-weight: 700;
}
#fws_pricing_1 .plan .des{
    margin-bottom: 30px;
}
#fws_pricing_1 #fws_pricing_1 .plan .price {
    font-size: 30px;
    margin: 15px 0;
}
#fws_pricing_1 .plan .price span {
    font-size: 14px;
    color: #888;
}
#fws_pricing_1 .plan ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 30px;
}
#fws_pricing_1 .plan ul li {
    margin: 10px 0;
    color: #333;
}
#fws_pricing_1 .plan button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}
#fws_pricing_1 .plan button:hover {
    background-color: #0056b3;
}
#fws_pricing_1 .popular {
    border: 2px solid #007BFF;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
#fws_pricing_1 .popular h2 {
    color: #007BFF;
}
#fws_pricing_1 .plan:hover{
    border-color: #007BFF;
    transform: translateY(-10px);
}
@media (max-width: 767.9px){
    #fws_pricing_1 .plan{margin-bottom: 30px;}
}

JS

Width:

Height:

Looking for a pricing snippet to integrate into your website? Our responsive website pricing plan section provides a sleek and modern design that helps your users choose the best plan for their needs. Featuring three customizable plans — Free, Popular, and Enterprise — this pricing table is ideal for businesses of all sizes.

The Free Plan offers essential features with support for one user, perfect for small projects or startups. The Popular Plan provides a balanced option with access to core features, priority support, and up to five users, making it ideal for growing teams. For larger businesses, the Enterprise Plan offers advanced features, 24/7 support, and unlimited users.

Built with Bootstrap, this pricing snippet is fully responsive, ensuring it looks great on all devices, from desktops to smartphones. The clean and modern design highlights the pricing options, allowing users to easily compare features and select the best plan. The hover effects, call-to-action buttons, and clear price points make this snippet engaging and user-friendly.

Whether you’re looking for a free pricing plan snippet or a premium option for larger clients, this customizable pricing section is a perfect fit for any website. Integrate it seamlessly and give your customers a clear path to choosing their ideal plan.