Plan select resposive

Créditos http://bootsnipp.com/outsideMyBox original source http://bootsnipp.com/snippets/featured/responsive-pricing-table

by Diego Vieira

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-offset-4 col-sm-8">
            <div class="row">
                <div class="col-xs-4 my_planHeader my_plan1">
                    <div class="my_planTitle">Plan 1</div>
                    <div class="my_planPrice">Free</div>
                    <div class="my_planDuration"> </div>
                    <a type="button" class="btn btn-default">Sign Up</a>
                </div>
                <div class="col-xs-4 my_planHeader my_plan2">
                    <div class="my_planTitle">Plan 2</div>
                    <div class="my_planPrice">2€</div>
                    <div class="my_planDuration">per month</div>
                    <a type="button" class="btn btn-default">Sign Up</a>
                </div>
                <div class="col-xs-4 my_planHeader my_plan3">
                    <div class="my_planTitle">Plan 3</div>
                    <div class="my_planPrice">3.75€</div>
                    <div class="my_planDuration">per month</div>
                    <a type="button" class="btn btn-default">Sign Up</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row my_featureRow">
        <div class="col-xs-12 col-sm-4 my_feature">
            Feature 1
        </div>
        <div class="col-xs-12 col-sm-8">
            <div class="row">
                <div class="col-xs-4 col-sm-4 my_planFeature my_plan1">
                    <i class="fa fa-check my_check"></i>
                </div>
                <div class="col-xs-4 col-sm-4 my_planFeature my_plan2">
                    <i class="fa fa-check my_check"></i>
                </div>
              ...

CSS

/* Use a wide full screen for small screens like tablets. */
@media (min-width: 768px) and (max-width:992px) {
    .container {
		width: initial;
        padding-left: 2em;
        padding-right: 2em;        
	}
}

/* --- Plans ---------------------------- */

.my_planHeader {
    text-align: center;
    color: white;
    padding-top:0.2em;
    padding-bottom:0.2em;
}
.my_planTitle {
    font-size:2em;
    font-weight: bold;
}
.my_planPrice {
    font-size:1.4em;
    font-weight: bold;    
}
.my_planDuration {
    margin-top: -0.6em;
}

@media (max-width: 768px) {
    .my_planTitle {
        font-size:small;
    }    
}

/* --- Features ------------------------- */

.my_feature {
    line-height:2.8em;   
}

@media (max-width: 768px) {
    .my_feature {
        text-align: center
    }
 }

.my_featureRow {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    border: 0.1em solid rgb(163, 163, 163);
}    

/* --- Plan 1 --------------------------- */
.my_plan1 {
    background: rgb(224,234,242);
}

.my_planHeader.my_plan1 a {
    background: rgb(72, 109, 139);
    color:white;
}

.my_planHeader.my_plan1 {
    background: rgb(105, 153, 193);
    border-bottom: thick solid rgb(72, 109, 139);
}

/* --- Plan 2 --------------------------- */
.my_plan2 {
    background: rgb(230,235,218);
}

.my_planHeader.my_plan2 a {
    background: rgb(108, 131, 62);
    color:white;
}

.my_planHeader.my_plan2 {
    background: rgb(134, 162, 77);
    border-bottom: thick solid rgb(108, 131, 62);
}

/* --- Plan 3 --------------------------- */
.my_plan3 {
    background: rgb(254,235,212);
}

.my_planHeader.my_plan3 a {
    background: rgb(199, 127, 40);
    color:white;
}

.my_planHeader.my_plan3 {
    background: rgb(253, 161, 49);
    border-bottom: thick solid rgb(199, 127, 40);
}

.my_planFeature {
    text-align: center;
    font-size: 2em;
}

.my_planFeature i.my_check {
    color: green;
}