The detailed bootstrap realizes the beautiful concise CSS3 Price table Instance source code

Preface

This is a beautiful concise CSS3 Price table style, the price list is based on the bootstrap grid system to layout, through a simple CSS3 code to beautify the price list, style is very stylish and beautiful, and can show good results on different screens.

First Look

View Demo Download source code

First introduced in the page bootstrap.min.css file, here I use the official CDN resources, you can also download to 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" > 



CSS3

Add the following CSS style to the price list for rendering and landscaping.



. 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;}}


Now you can open the browser to see the effect, the effect on the phone is also good.