How to create price table list using html css and bootstrap 5

Whatsapp

https://www.fundaofwebit.com/post/how-to-create-price-table-list-using-html-css-and-bootstrap-5

How to create Price Table list using html, css and bootstrap 5


In this post, you will learn about how to create a responsive pricing table list using html, css and bootstrap 5.

Bootstrap CDN link as been added in Step 1.




How To Create a Responsive Pricing Table


Step 1: Add HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Cloud Hosting</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="section-title">
                        <h2>YOUR PRICING TABLE LIST - YOUR CHOICE</h2>
                    </div>
                    <p class="mt-2">Best and Cheap Website Pricing Plans</p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="package-box">
                        <div class="package-header package-bg-blue">
                            <h4 class="package-heading">Shared Hosting</h4>
                            <h5 class="package-price">  $0.65/MONTH </h5>
                        </div>
                        <div class="package-body">
                            <ul>
                                <li><i>&#8594;</i>Host Websites <span class="li-value">1</span></li>
                                <li><i>&#8594;</i>Disk Space  <span class="li-value">5 GB </span></li>
                                <li><i>&#8594;</i>Bandwidth <span class="li-value">Unlimited</span></li>
                                <li><i>&#8594;</i>Database  <span class="li-value">3</span></li>
                                <li><i>&#8594;</i>Email Account <span class="li-value">3</span></li>
                                <li><i>&#8594;</i>Control Panel <span class="li-value">Yes</span></li>
                                <li><i>&#8594;</i>Sub Domain <span class="li-value">Unlimited</span></li>
                                <li><i>&#8594;</i>SSL Certificate <span class="li-value">Free</span></li>
                                <li><i>&#8594;</i>Softaculous <span class="li-value">Free</span></li>
                                <li><i>&#8594;</i>Parked Domain  <span class="li-value">Unlimited</span></li>
                            </ul>
                            <div class="text-center">
                                <a href="" class="package-btn">Add to Cart</a>
                                <a href="" class="package-btn">View More</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="package-box">
                        <div class="package-header package-bg-green">
                            <h4 class="package-heading">RESELLER HOSTING</h4>
                            <h5 class="package-price">  $0.65/MONTH </h5>
                        </div>
                        <div class="package-body">
                            <ul>
                                <li><i>&#8594;</i>Host Websites <span class="li-value">1</span></li>
                                <li><i>&#8594;</i>Disk Space  <span class="li-value">5 GB </span></li>
                                <li><i>&#8594;</i>Bandwidth <span class="li-value">Unlimited</span></li>
                                <li><i>&#8594;</i>Database  <span class="li-value">3</span></li>
                                <li><i>&#8594;</i>Email Account <span class="li-value">3</span></li>
                                <li><i>&#8594;</i>Control Panel <span class="li-value">Yes</span></li>
                                <li><i>&#8594;</i>Sub Domain <span class="li-value">Unlimited</span></li>
                                <li><i>&#8594;</i>SSL Certificate <span class="li-value">Free</span></li>
                                <li><i>&#8594;</i>Softaculous <span class="li-value">Free</span></li>
                                <li><i>&#8594;</i>Parked Domain  <span class="li-value">Unlimited</span></li>
                            </ul>
                            <div class="text-center">
                                <a href="" class="package-btn">Add to Cart</a>
                                <a href="" class="package-btn">View More</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="package-box">
                        <div class="package-header package-bg-skyblue">
                            <h4 class="package-heading">CLOUD VPS L1</h4>
                            <h5 class="package-price">  $0.65/MONTH </h5>
                        </div>
                        <div class="package-body">
                            <ul>
                                <li><i>&#8594;</i>Host Websites <span class="li-value">1</span></li>
                                <li><i>&#8594;</i>Disk Space  <span class="li-value">5 GB </span></li>
                                <li><i>&#8594;</i>Bandwidth <span class="li-value">Unlimited</span></li>
                                <li><i>&#8594;</i>Database  <span class="li-value">3</span></li>
                                <li><i>&#8594;</i>Email Account <span class="li-value">3</span></li>
                                <li><i>&#8594;</i>Control Panel <span class="li-value">Yes</span></li>
                                <li><i>&#8594;</i>Sub Domain <span class="li-value">Unlimited</span></li>
                                <li><i>&#8594;</i>SSL Certificate <span class="li-value">Free</span></li>
                                <li><i>&#8594;</i>Softaculous <span class="li-value">Free</span></li>
                                <li><i>&#8594;</i>Parked Domain  <span class="li-value">Unlimited</span></li>
                            </ul>
                            <div class="text-center">
                                <a href="" class="package-btn">Add to Cart</a>
                                <a href="" class="package-btn">View More</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="package-box">
                        <div class="package-header package-bg-orange">
                            <h4 class="package-heading">DEDICATED SERVER</h4>
                            <h5 class="package-price">  $0.65/MONTH </h5>
                        </div>
                        <div class="package-body">
                            <ul>
                                <li><i>&#8594;</i>Host Websites <span class="li-value">1</span></li>
                                <li><i>&#8594;</i>Disk Space  <span class="li-value">5 GB </span></li>
                                <li><i>&#8594;</i>Bandwidth <span class="li-value">Unlimited</span></li>
                                <li><i>&#8594;</i>Database  <span class="li-value">3</span></li>
                                <li><i>&#8594;</i>Email Account <span class="li-value">3</span></li>
                                <li><i>&#8594;</i>Control Panel <span class="li-value">Yes</span></li>
                                <li><i>&#8594;</i>Sub Domain <span class="li-value">Unlimited</span></li>
                                <li><i>&#8594;</i>SSL Certificate <span class="li-value">Free</span></li>
                                <li><i>&#8594;</i>Softaculous <span class="li-value">Free</span></li>
                                <li><i>&#8594;</i>Parked Domain  <span class="li-value">Unlimited</span></li>
                            </ul>
                            <div class="text-center">
                                <a href="" class="package-btn">Add to Cart</a>
                                <a href="" class="package-btn">View More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
   
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>


Step 2: Add CSS:

.section{
    padding: 40px 0px;
}
.package-bg-blue{
    background-color: #03a9f4!important;
}
.package-bg-green{
    background-color: #4caf50!important;
}
.package-bg-skyblue{
    background-color: #00bcd4!important;
}
.package-bg-orange{
    background-color: #ff9800!important;
}

.package-box{
    border: 1px solid #c4c4c4;
    margin: 4% 0 0;
    text-align: center;
}
.package-box .package-header{
    padding: 14px 10px;
}
.package-box .package-header .package-heading{
    text-align: center;
    margin-bottom: 6px;
    color: #fff;
    text-transform: uppercase;
    font-size: 22px;
}
.package-box .package-header .package-price{
    text-align: center;
    margin-bottom: 4px;
    color: #fff;
}
.package-box .package-body{
    margin: 0;
    padding: 5% 5%;
    text-align: left;
}

.package-box .package-body ul{
    padding: 0px !important;
    display: block;
}
.package-box .package-body ul li {
    list-style-type: none;
    border-bottom: 1px solid #ccc;
    padding: 2% 0 2% 8px;
    font-size: 14px;
    font-weight: 600;
    color: #444444;
    background-position: left 8px;
    background-repeat: no-repeat;
}
.package-box .package-body ul li i{
    padding: 2px 5px;
    font-size: 14px;
    color: #ffffff;
    background-color: #00bcd4;
    border-radius: 50px;
    margin-right: 8px;
}
.package-box .package-body ul li .li-value {
    float: right;
    padding: 0.15rem 0.3rem;
    width: 65px;
    background: 0 0;
    color: #444;
    font-weight: 700;
    text-align: center;
    font-size: 13px;
}
.package-box .package-btn{
    padding: 4px 14px;
    background-color: #fc4903;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 2px 4px;
    text-decoration: none;
}



Thank you.

© Copyright - 2018 - 2022 | All rights reserved at Funda of Web IT