Bootstrap implements price list

This article mainly introduces the use of Bootstrap to achieve a beautiful and concise CSS3 price list effect. The effect achieved is very good, and different screen sizes can be used. Friends in need can refer to it. Let’s take a look.

Preface

This is a beautiful and concise CSS3 price list style. The price list is laid out based on the Bootstrap grid system. Simple CSS3 code is used to beautify the price list. The style is very fashionable and beautiful, and can display good effects on different screens.

Let’s look at the renderings first

View the demo download source code

First of all The bootstrap.min.css file is introduced into the page. Here I use the official CDN resource. You can also download it for local use.

<link rel="stylesheet" href="http//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

The HTML structure of the css3 price list is as follows:

<p class="container"> 
    <p class="row"> 
        <p class="col-md-4 col-sm-6"> 
            <p class="pricingTable"> 
                <h3 class="title">Standard</h3> 
                <p class="price-value"> 
                    <span class="month">per month</span> 
                    <span class="amount"> 
                        <span class="currency">$</span> 
                        10 
                        <span class="value">99</span> 
                    </span> 
                </p> 
                <ul class="pricing-content"> 
                    <li>50GB Disk Space</li> 
                    <li>50 Email Accounts</li> 
                    <li>50GB Monthly Bandwidth</li> 
                    <li>10 Subdomains</li> 
                    <li>15 Domains</li> 
                </ul> 
                <a href="#" class="pricingTable-signup">sign up</a> 
            </p> 
        </p> 
 
        <p class="col-md-4 col-sm-6"> 
            <p class="pricingTable"> 
                <h3 class="title">Business</h3> 
                <p class="price-value"> 
                    <span class="month">per month</span> 
                    <span class="amount"> 
                        <span class="currency">$</span> 
                        20 
                        <span class="value">99</span> 
                    </span> 
                </p> 
                <ul class="pricing-content"> 
                    <li>60GB Disk Space</li> 
                    <li>60 Email Accounts</li> 
                    <li>60GB Monthly Bandwidth</li> 
                    <li>15 Subdomains</li> 
                    <li>20 Domains</li> 
                </ul> 
                <a href="#" class="pricingTable-signup">sign up</a> 
            </p> 
        </p> 
    </p> 
</p>

CSS3

Add the following CSS to the price list Styles for rendering and beautification.

.pricingTable{ 
    text-align: center; 
    background: #fff; 
    padding: 30px 0; 
} 
.pricingTable .title{ 
    font-size: 22px; 
    font-weight: 600; 
    color: #2e282a; 
    text-transform: uppercase; 
    margin: 0 0 30px 0; 
} 
.pricingTable .price-value{ 
    padding: 30px 0; 
    background: #ba5289; 
    margin-bottom: 30px; 
    position: relative; 
} 
.pricingTable .price-value:before{ 
    content: ""; 
    border-top: 15px solid #fff; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
    position: absolute; 
    top: 0; 
    left: 46%; 
} 
.pricingTable .month{ 
    display: block; 
    height: 50px; 
    font-size: 15px; 
    font-weight: 900; 
    color: #fff; 
    text-transform: uppercase; 
} 
.pricingTable .amount{ 
    display: inline-block; 
    font-size: 50px; 
    color: #fff; 
    position: relative; 
} 
.pricingTable .currency{ 
    position: absolute; 
    top: -1px; 
    left: -35px; 
} 
.pricingTable .value{ 
    font-size: 20px; 
    position: absolute; 
    top: -11px; 
    right: -27px; 
} 
.pricingTable .pricing-content{ 
    padding: 0; 
    margin: 0 0 30px 0; 
    list-style: none; 
} 
.pricingTable .pricing-content li{ 
    font-size: 16px; 
    color: #868686; 
    line-height: 35px; 
} 
.pricingTable .pricingTable-signup{ 
    display: inline-block; 
    padding: 8px 40px; 
    background: #fca4a7; 
    font-size: 15px; 
    font-weight: 600; 
    color: #fff; 
    text-transform: capitalize; 
    border: 2px solid #fca4a7; 
    border-radius: 30px; 
    transition: all 0.5s ease 0s; 
} 
.pricingTable .pricingTable-signup:hover{ 
    background: #fff; 
    color: #fca4a7; 
} 
@media only screen and (max-width: 990px){ 
    .pricingTable{ margin-bottom: 30px; } 
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Bootstrap Tutorial

## There are several ways to implement a three-column layout in CSS

##CSS and Sass development specifications

The above is the detailed content of Bootstrap implements price list. For more information, please follow other related articles on the PHP Chinese website!