Responsive Bootstrap Pricing Snippet | Website Pricing Plan Section | Flexible Plans

Create a website pricing plan section with this pricing snippet built using Bootstrap components. Offering responsive pricing options for Free, Starter, Popular, and Enterprise plans, this Bootstrap pricing layout is perfect for any website.

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

JS

Width:

Height:

If you’re looking to build an effective website pricing plan section, this pricing snippet is designed using Bootstrap components, making it easy to integrate and fully responsive. It provides users with a seamless experience across all devices, ensuring clear presentation of your pricing plans.

This pricing snippet offers four well-structured plans tailored for different needs:

▹ The Free Plan is ideal for individuals or small projects. It comes with 1 user per account, basic support, limited features, and 1 GB of storage, all at no cost. It’s the perfect entry-level plan for those just starting out.

▹ For small teams, the Starter Plan offers up to 5 users, priority support, access to all core features, and 10 GB of storage, all for $15 per month. This is a cost-effective solution for growing businesses.

▹ The Popular Plan provides more flexibility, with up to 10 users, priority support, and 20 GB of storage. It includes all core features, making it ideal for businesses looking to scale, priced at $29 per month.

▹ The Enterprise Plan is the ultimate solution for larger organizations, offering unlimited users, 24/7 support, advanced features, and unlimited storage. For $199 per month, this plan ensures that you have everything needed for a high-demand business environment.

Built with Bootstrap pricing elements, this pricing table ensures a sleek and professional appearance. The popular plan stands out with a highlighted design, making it easy for users to identify the best value option. This Bootstrap component not only enhances user experience but also ensures your website pricing plan section looks modern and engaging.