HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="jumbotron">
        <div class="container text-center">
             <h1 class="page-header">PRICING PLANS</h1>
        <p class="lead">choose from our simple and clear plans</p>
        </div>
       
    </div>
    
    <div class="container ">
        <div class="row">
          
            <div class="col-md-4 well pricing-table">
                <div class="pricing-table-holder">
                    <center>
                        <img src="http://www.placehold.it/100X100" class="img-responsive img-circle" alt="">
                        <h3>PLAN A</h3>
                        <p class="caption">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        </p>
                    </center>
                    
                  
                </div>
                
                <div class="custom-button-group" style="">
            
                    <div class="col-md-8 col-sm-9" style="padding:0;">
                        <button type="button" class="btn btn-royal-blue btn-block dropdown-toggle" style="border-radius:0;" data-toggle="dropdown" aria-expanded="false">
                          Select Bundle
                          <span class="caret"></span>
                        </button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        body{
    font-family: 'Roboto', sans-serif;
}
        center>img{
            position: relative;
margin-top: -24%;
        }
        .well{
            background: #fff;
            box-shadow: 0 0 0 0;
            border: 0px;
        }
        .jumbotron{
            background: #fff;
        }
        
        .base-padding{
            padding: 3% 0;
        }
        .well.pricing-table{
/*            padding: 3%;*/
            background: #fff;
            transition:all 0.6s ease-out;
        
        }
         .well.pricing-table:hover{
             box-shadow:0 5px 6px #444;
             cursor:pointer;
         }
        
        .pricing-feature-list{
            padding: 10%;
            background: #444;
            color: #eee;
        }
       .pricing-feature-list .list-group-item {
position: relative;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"simple responsive price - table list"
Bootstrap 3.3.0 Snippet by shihab - Being Zero

Related: See More

Questions / Comments:

"simple responsive price - table list" Bootstrap 3.3.0 Snippet by shihab - Being Zero

Related: See More

Questions / Comments:

"simple responsive price - table list"
Bootstrap 3.3.0 Snippet by shihab - Being Zero