Bootstrap Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
	<div class="panel panel-primary">
		<div class="panel-heading">outer</div>
		<div class="row">
			<div class="col-xs-4">
				<div class="panel panel-info">
					<div class="panel-heading">1</div>
					<div class="panel-body">
						<div class="list-group">
							<div class="list-group-item">111</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-4">
				<div class="panel panel-info">
					<div class="panel-heading">2</div>
					<div class="panel-body">
						<div class="list-group">
							<div class="list-group-item">222</div>
							<div class="list-group-item">222</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-4">
				<div class="panel panel-info">
					<div class="panel-heading">3</div>
					<div class="panel-body">
						<div class="list-group">
							<div class="list-group-item">333</div>
							<div class="list-group-item">333</div>
							<div class="list-group-item">333</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12">
				<div class="panel panel-info">
					<div class="panel-heading">
						<span>lower</span>
					</div>
					<div class="panel-body">
                          xyz
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
.panel{
    height: 100%;
}

JavaScript

$('.row').each(function(){
 var RowHeight = $(this).innerHeight();
 $(this).children().css({ height: RowHeight + 'px' });  
});