<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="container">
<div class="row">
<h2>Disabled Panel Body</h2>
<h3>Default Panel Disabled</h3>
<div class="panel panel-default disabled">
<div class="panel-body">
<div class="pull-left"><img src="http://lorempixel.com/260/140/" class="img-responsive" style="margin-right:10px;"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pellentesque ullamcorper leo, id tempus est. Suspendisse orci libero, aliquet euismod risus eget, interdum mollis elit. Nulla vitae posuere mi. Maecenas nulla enim, tincidunt a cursus quis, elementum in dolor. Sed fringilla facilisis dui sit amet eleifend. Duis quis consectetur turpis, eu porta ligula. Integer in magna sapien. Nunc nec est volutpat, dictum felis at, accumsan tellus. Cras id bibendum sem, quis mollis urna.
</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<div class="checkbox">
<label>
<input value="1" type="checkbox"> Show Preview
</label>
</div>
</div>
</div>
</div>
<h3>Default Panel Not Disabled</h3>
<div class="panel panel-default">
<div class="panel-body">
<div class="pull-left"><img src="http://lorempixel.com/260/140/" class="img-responsive" style="margin-right:10px;"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pellentesque ullamcorper leo, id tempus est. Suspendisse orci libero, aliquet euismod risus eget, interdum mollis elit. Nulla vitae posuere mi. Maecenas nulla enim, tincidunt a cursus quis, elementum in dolor. Sed fringilla facilisis dui sit amet eleifend. Duis quis consectetur turpis, eu porta ligula. Integer in magna sapien. Nunc nec est volutpat, dictum felis at, accumsan tellus. Cras id bibendum sem, quis mollis urna.
</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<div class="checkbox">
<label>
<input value="1" checked type="checkbox"> Show Preview
</label>
</div>
</div>
</div>
</div>
<h2>Alternative Panel Disabled using Div Element</h2>
<h3>Primary Panel Disabled</h3>
<div class="panel panel-primary disabled">
<div class="panel-body">
<div class="pull-left"><img src="http://lorempixel.com/260/140/" class="img-responsive" style="margin-right:10px;"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pellentesque ullamcorper leo, id tempus est. Suspendisse orci libero, aliquet euismod risus eget, interdum mollis elit. Nulla vitae posuere mi. Maecenas nulla enim, tincidunt a cursus quis, elementum in dolor. Sed fringilla facilisis dui sit amet eleifend. Duis quis consectetur turpis, eu porta ligula. Integer in magna sapien. Nunc nec est volutpat, dictum felis at, accumsan tellus. Cras id bibendum sem, quis mollis urna.
<div class="panel-disabled"></div>
</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<div class="checkbox">
<label>
<input value="1" type="checkbox"> Show Preview
</label>
</div>
</div>
</div>
</div>
<h3>Primary Panel Not Disabled</h3>
<div class="panel panel-primary">
<div class="panel-body">
<div class="pull-left"><img src="http://lorempixel.com/260/140/" class="img-responsive" style="margin-right:10px;"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pellentesque ullamcorper leo, id tempus est. Suspendisse orci libero, aliquet euismod risus eget, interdum mollis elit. Nulla vitae posuere mi. Maecenas nulla enim, tincidunt a cursus quis, elementum in dolor. Sed fringilla facilisis dui sit amet eleifend. Duis quis consectetur turpis, eu porta ligula. Integer in magna sapien. Nunc nec est volutpat, dictum felis at, accumsan tellus. Cras id bibendum sem, quis mollis urna.
<div class="panel-disabled"></div>
</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<div class="checkbox">
<label>
<input value="1" checked type="checkbox"> Show Preview
</label>
</div>
</div>
</div>
</div>
</div>
</div>
.panel.disabled .panel-body {
position: relative;
}
.panel.disabled .panel-body :after,
.panel.disabled .panel-disabled {
display:block;
content: '';
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.6);
border-radius: 5px;
}
.panel-footer .checkbox {
margin: 0;
}
