Bootstrap Pricing Snippet | Website Pricing Plan Section | Responsive Design

Explore our pricing snippet for your website's pricing plan section. With Bootstrap pricing, choose between Free, Popular, and Enterprise plans. Fully responsive and easy to integrate, ideal for websites needing clear pricing tables.

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_4{
    padding: 50px 0;
}
#fws_pricing_4 .heading{
    text-align: center;
    margin-bottom: 40px;
}
#fws_pricing_4 .heading h2{
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: capitalize;
}
#fws_pricing_3 .heading p{
    margin-bottom: 0;
    color: #c8d1d6;
}
#fws_pricing_4 .content{
    text-align: center;
    padding: 50px 30px;
    background: #f4f8ff;
    border-radius: 15px;
    transition: all .4s;
}
#fws_pricing_4 .content span{
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 10px;
}
#fws_pricing_4 .content h3{
    font-weight: 700;
    font-size: 35px;
    margin-bottom: 20px;
}
#fws_pricing_4 .content h3 sub{
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 400;
}
#fws_pricing_4 .content ul{
    margin-bottom: 30px;
    padding: 0;
    list-style: none;
}
#fws_pricing_4 .content ul li{
    margin-bottom: 7px;
}
#fws_pricing_4 .content ul li i{
    color: #0d6efd;
    vertical-align: middle;
    padding-right: 5px;
}
#fws_pricing_4 .content.popular{
    background-color: #0d6efd;
    color: #fff;
}
#fws_pricing_4 .content.popular ul li i{
    color: #fff;
}
#fws_pricing_4 .content a.btn{
    padding: 10px 25px;
    border-radius: 3px;
    font-weight: 600;
}
#fws_pricing_4 .content:hover{
    transform: translateY(-10px);
    box-shadow: var(--bs-box-shadow-lg)!important;
}
@media (max-width: 991px){
    #fws_pricing_4 .content{
        margin-bottom: 30px;
    }
}

JS

Width:

Height:

Looking to enhance your website's pricing plan section? Our pricing snippet offers a clean, responsive, and user-friendly design built with Bootstrap pricing features. It ensures your users can quickly and easily compare different pricing options, no matter their device.

The Free Plan is perfect for individuals or small projects, offering 1 user per account, basic support, and 1 GB of storage. It’s a great way to get started without any upfront costs, and it includes access to essential features to help you launch your project.

If you’re working with a small team, the Popular Plan offers more flexibility. With support for up to 5 users, priority support, and 10 GB of storage, this plan meets the needs of growing businesses. You’ll also enjoy access to all core features that allow you to scale your services more efficiently.

For large organizations, the Enterprise Plan provides unlimited users, 24/7 support, advanced features, and unlimited storage. This plan is ideal for companies needing a robust solution with dedicated resources and high-level support.

Each pricing option is clearly displayed using Bootstrap's responsive design, ensuring that your website pricing plan section is optimized for all screen sizes. Whether users are on a desktop or mobile device, they’ll have no trouble understanding your plans and making a decision.

This pricing snippet offers a modern and effective way to present your services and plans, using a sleek design, smooth transitions, and a focus on user experience. Perfect for any website that needs professional, Bootstrap-based pricing solutions.