<div class="row">
<div class="col-md-6">
<!-- BEGIN PORTLET-->
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-edit font-dark"></i>
<span class="caption-subject font-dark bold uppercase">Notes
</span>
</div>
<div class="actions">
<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
<i class="icon-cloud-upload"></i>
</a>
<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
<i class="icon-wrench"></i>
</a>
<a class="btn btn-circle btn-icon-only btn-default fullscreen" href="javascript:;"> </a>
<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
<i class="icon-trash"></i>
</a>
</div>
</div>
<div class="portlet-body">
<div class="note note-success">
<h4 class="block">Success! Some Header Goes Here
</h4>
<p> Duis mollis, est non commodo luctus, nisi erat mattis consectetur purus sit amet porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
</p>
</div>
<div class="note note-info">
<h4 class="block">Info! Some Header Goes Here
</h4>
<p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, mattis consectetur purus sit amet eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
</p>
</div>
<div class="note note-danger">
<h4 class="block">Danger! Some Header Goes Here
</h4>
<p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit mattis consectetur purus sit amet.\ Cras mattis consectetur purus sit amet fermentum.
</p>
</div>
<div class="note note-warning">
<h4 class="block">Warning! Some Header Goes Here
</h4>
<p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit mattis consectetur purus sit amet. Cras mattis consectetur purus sit amet fermentum.
</p>
</div>
</div>
</div>
<!-- END PORTLET-->
</div>
<div class="col-md-6">
<!-- BEGIN PROGRESS BARS PORTLET-->
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-share font-red-sunglo"></i>
<span class="caption-subject font-red-sunglo bold uppercase">Progress Bars
</span>
</div>
<div class="actions">
<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
<i class="icon-cloud-upload"></i>
</a>
<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
<i class="icon-wrench"></i>
</a>
<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
<i class="icon-trash"></i>
</a>
</div>
</div>
<div class="portlet-body">
<div class="note note-warning">
<h4 class="block">Cross-browser compatibility
</h4>
<p> Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
</p>
</div>
<h3>Basic
</h3>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only"> 40% Complete (success)
</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only"> 20% Complete
</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only"> 60% Complete (warning)
</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only"> 80% Complete
</span>
</div>
</div>
<h3>Striped
</h3>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only"> 40% Complete (success)
</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only"> 20% Complete
</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only"> 60% Complete (warning)
</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only"> 80% Complete (danger)
</span>
</div>
</div>
<h3>Animated
</h3>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only"> 40% Complete (success)
</span>
</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only"> 20% Complete
</span>
</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only"> 60% Complete (warning)
</span>
</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only"> 80% Complete (danger)
</span>
</div>
</div>
<h3>Stacked
</h3>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only"> 35% Complete (success)
</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only"> 20% Complete (warning)
</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only"> 10% Complete (danger)
</span>
</div>
</div>
</div>
</div>
<!-- END PROGRESS BARS PORTLET-->
</div>
</div>