/*Struktur Panel*/ .panel { font-family:Oswald, "Arial Narrow", "Source Sans Pro", Calibri, Segoe, "Segoe UI", Frutiger, "Frutiger Linotype", "DeJavu Sans", "Helvetica Neue", Arial, Sans-Serif; margin-bottom: 23px; background-color: #ffffff; border: 1px solid transparent; border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .panel-body { padding: 15px; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 2px; border-top-left-radius: 2px; } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 15px; color: inherit; } .panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #dddddd; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } /*Style Panel*/ .panel-default { border-color: #dddddd; } .panel-default > .panel-heading { color: #212121; background-color: #f5f5f5; border-color: #dddddd; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #dddddd; } .panel-default > .panel-heading .badge { color: #f5f5f5; background-color: #212121; } .panel-default > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #dddddd; } .panel-primary { border-color: #2196f3; } .panel-primary > .panel-heading { color: #ffffff; background-color: #2196f3; border-color: #2196f3; } .panel-primary > .panel-heading + .panel-collapse > .panel-body { border-top-color: #2196f3; } .panel-primary > .panel-heading .badge { color: #2196f3; background-color: #ffffff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #2196f3; } .panel-success { border-color: #d6e9c6; } .panel-success > .panel-heading { color: #ffffff; background-color: #4caf50; border-color: #d6e9c6; } .panel-success > .panel-heading + .panel-collapse > .panel-body { border-top-color: #d6e9c6; } .panel-success > .panel-heading .badge { color: #4caf50; background-color: #ffffff; } .panel-success > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #d6e9c6; } .panel-info { border-color: #cba4dd; } .panel-info > .panel-heading { color: #ffffff; background-color: #9c27b0; border-color: #cba4dd; } .panel-info > .panel-heading + .panel-collapse > .panel-body { border-top-color: #cba4dd; } .panel-info > .panel-heading .badge { color: #9c27b0; background-color: #ffffff; } .panel-info > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #cba4dd; } .panel-warning { border-color: #ffc599; } .panel-warning > .panel-heading { color: #ffffff; background-color: #ff9800; border-color: #ffc599; } .panel-warning > .panel-heading + .panel-collapse > .panel-body { border-top-color: #ffc599; } .panel-warning > .panel-heading .badge { color: #ff9800; background-color: #ffffff; } .panel-warning > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #ffc599; } .panel-danger { border-color: #f7a4af; } .panel-danger > .panel-heading { color: #ffffff; background-color: #e51c23; border-color: #f7a4af; } .panel-danger > .panel-heading + .panel-collapse > .panel-body { border-top-color: #f7a4af; } .panel-danger > .panel-heading .badge { color: #e51c23; background-color: #ffffff; } .panel-danger > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #f7a4af; }
<div class='panel panel-default'> <div class='panel-heading'> <h3 class='panel-title'>Just an example</h3> </div> <div class='panel-body'> <p>You're only supposed to blow the bloody doors off! you want a guarantee, buy a toaster. you are as precious to me as you were to your own mother and father.</p> </div> </div> <div class='panel panel-primary'> <div class='panel-heading'> <h3 class='panel-title'>Just an example</h3> </div> <div class='panel-body'> <p>You're only supposed to blow the bloody doors off! you want a guarantee, buy a toaster. you are as precious to me as you were to your own mother and father.</p> </div> </div> <div class='panel panel-success'> <div class='panel-heading'> <h3 class='panel-title'>Just an example</h3> </div> <div class='panel-body'> <p>You're only supposed to blow the bloody doors off! you want a guarantee, buy a toaster. you are as precious to me as you were to your own mother and father.</p> </div> </div> <div class='panel panel-warning'> <div class='panel-heading'> <h3 class='panel-title'>Just an example</h3> </div> <div class='panel-body'> <p>You're only supposed to blow the bloody doors off! you want a guarantee, buy a toaster. you are as precious to me as you were to your own mother and father.</p> </div> </div> <div class='panel panel-danger'> <div class='panel-heading'> <h3 class='panel-title'>Just an example</h3> </div> <div class='panel-body'> <p>You're only supposed to blow the bloody doors off! you want a guarantee, buy a toaster. you are as precious to me as you were to your own mother and father.</p> </div> </div>