Bootstrap snippet: Colored Portlets

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: panel,Portlets



<div class="wrapper"> <div class="container"> <!-- Page-Title --> <div class="row"> <div class="col-sm-12"> <div class="btn-group pull-right"> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Settings <span class="m-l-5"><i class="fa fa-cog"></i></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <h4 class="page-title">Portlets </h4> </div> </div> <div class="row"> <div class="col-md-4"> <div class="portlet"> <div class="portlet-heading portlet-default"> <h3 class="portlet-title text-dark"> Default Heading </h3> <div class="portlet-widgets"> <a href="javascript:;" data-toggle="reload"><i class="ion-refresh"></i></a> <span class="divider"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#bg-default"><i class="ion-minus-round"></i></a> <span class="divider"></span> <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a> </div> <div class="clearfix"></div> </div> <div id="bg-default" class="panel-collapse collapse in"> <div class="portlet-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum. </div> </div> </div> </div> <div class="col-md-4"> <div class="portlet"> <div class="portlet-heading bg-primary"> <h3 class="portlet-title"> Primary Heading </h3> <div class="portlet-widgets"> <a href="javascript:;" data-toggle="reload"><i class="ion-refresh"></i></a> <span class="divider"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#bg-primary"><i class="ion-minus-round"></i></a> <span class="divider"></span> <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a> </div> <div class="clearfix"></div> </div> <div id="bg-primary" class="panel-collapse collapse in"> <div class="portlet-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum. </div> </div> </div> </div> <div class="col-md-4"> <div class="portlet"> <div class="portlet-heading bg-info"> <h3 class="portlet-title"> Info Heading </h3> <div class="portlet-widgets"> <a href="javascript:;" data-toggle="reload"><i class="ion-refresh"></i></a> <span class="divider"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#bg-info"><i class="ion-minus-round"></i></a> <span class="divider"></span> <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a> </div> <div class="clearfix"></div> </div> <div id="bg-info" class="panel-collapse collapse in"> <div class="portlet-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum. </div> </div> </div> </div> </div> <!-- End row --> <div class="row"> <div class="col-md-4"> <div class="portlet"> <div class="portlet-heading bg-success"> <h3 class="portlet-title"> Success Heading </h3> <div class="portlet-widgets"> <a href="javascript:;" data-toggle="reload"><i class="ion-refresh"></i></a> <span class="divider"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#bg-success"><i class="ion-minus-round"></i></a> <span class="divider"></span> <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a> </div> <div class="clearfix"></div> </div> <div id="bg-success" class="panel-collapse collapse in"> <div class="portlet-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum. </div> </div> </div> </div> <div class="col-md-4"> <div class="portlet"> <div class="portlet-heading bg-warning"> <h3 class="portlet-title"> Warning Heading </h3> <div class="portlet-widgets"> <a href="javascript:;" data-toggle="reload"><i class="ion-refresh"></i></a> <span class="divider"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#bg-warning"><i class="ion-minus-round"></i></a> <span class="divider"></span> <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a> </div> <div class="clearfix"></div> </div> <div id="bg-warning" class="panel-collapse collapse in"> <div class="portlet-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum. </div> </div> </div> </div> <div class="col-md-4"> <div class="portlet"> <div class="portlet-heading bg-danger"> <h3 class="portlet-title"> Danger Heading </h3> <div class="portlet-widgets"> <a href="javascript:;" data-toggle="reload"><i class="ion-refresh"></i></a> <span class="divider"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#bg-danger"><i class="ion-minus-round"></i></a> <span class="divider"></span> <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a> </div> <div class="clearfix"></div> </div> <div id="bg-danger" class="panel-collapse collapse in"> <div class="portlet-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum. </div> </div> </div> </div> </div> <!-- End row --> <div class="row"> <div class="col-md-4"> <div class="portlet"> <div class="portlet-heading bg-inverse"> <h3 class="portlet-title"> Inverse Heading </h3> <div class="portlet-widgets"> <a href="javascript:;" data-toggle="reload"><i class="ion-refresh"></i></a> <span class="divider"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#bg-inverse"><i class="ion-minus-round"></i></a> <span class="divider"></span> <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a> </div> <div class="clearfix"></div> </div> <div id="bg-inverse" class="panel-collapse collapse in"> <div class="portlet-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum. </div> </div> </div> </div> <div class="col-md-4"> <div class="portlet"> <div class="portlet-heading bg-pink"> <h3 class="portlet-title"> Pink Heading </h3> <div class="portlet-widgets"> <a href="javascript:;" data-toggle="reload"><i class="ion-refresh"></i></a> <span class="divider"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#bg-pink"><i class="ion-minus-round"></i></a> <span class="divider"></span> <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a> </div> <div class="clearfix"></div> </div> <div id="bg-pink" class="panel-collapse collapse in"> <div class="portlet-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum. </div> </div> </div> </div> <div class="col-md-4"> <div class="portlet"> <div class="portlet-heading bg-purple"> <h3 class="portlet-title"> Purple Heading </h3> <div class="portlet-widgets"> <a href="javascript:;" data-toggle="reload"><i class="ion-refresh"></i></a> <span class="divider"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#bg-purple"><i class="ion-minus-round"></i></a> <span class="divider"></span> <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a> </div> <div class="clearfix"></div> </div> <div id="bg-purple" class="panel-collapse collapse in"> <div class="portlet-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum. </div> </div> </div> </div> </div> <!-- End row --> <!-- Footer --> <footer class="footer text-right"> <div class="container"> <div class="row"> <div class="col-xs-6"> 2016 © Moltran. </div> <div class="col-xs-6"> <ul class="pull-right list-inline m-b-0"> <li> <a href="#">About</a> </li> <li> <a href="#">Help</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> </div> </div> </footer> <!-- End Footer --> </div> <!-- end container --> </div>
/* ============== Portlets ===================*/ .portlet { -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.4s; background: #ffffff; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); margin-bottom: 20px; transition: all 0.4s; } .portlet .portlet-heading { border-radius: 3px; color: #ffffff; padding: 12px 20px; } .portlet .portlet-heading .portlet-title { color: #ffffff; float: left; font-size: 16px; font-weight: 600; margin-bottom: 0; margin-top: 0; } .portlet .portlet-heading .portlet-widgets { display: inline-block; float: right; font-size: 15px; line-height: 30px; padding-left: 15px; position: relative; text-align: right; } .portlet .portlet-heading .portlet-widgets .divider { margin: 0 5px; } .portlet .portlet-heading .portlet-widgets .collapsed .ion-minus-round:before { content: "\f217" !important; } .portlet .portlet-heading a { color: #999999; } .portlet .portlet-body { -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; background: #ffffff; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding: 15px; } .portlet-default .portlet-title { color: #797979 !important; } .portlet .portlet-heading.bg-purple a, .portlet .portlet-heading.bg-info a, .portlet .portlet-heading.bg-success a, .portlet .portlet-heading.bg-primary a, .portlet .portlet-heading.bg-danger a, .portlet .portlet-heading.bg-warning a, .portlet .portlet-heading.bg-inverse a, .portlet .portlet-heading.bg-pink a { color: #ffffff; } .panel-disabled { background: rgba(243, 242, 241, 0.5); bottom: 15px; left: 0px; position: absolute; right: -5px; top: 0; } .loader-1 { -moz-animation: loaderAnimate 1000ms linear infinite; -o-animation: loaderAnimate 1000ms linear infinite; -webkit-animation: loaderAnimate 1000ms linear infinite; animation: loaderAnimate 1000ms linear infinite; clip: rect(0, 30px, 30px, 15px); height: 30px; left: 50%; margin-left: -15px; margin-top: -15px; position: absolute; top: 50%; width: 30px; } .loader-1:after { -moz-animation: loaderAnimate2 1000ms ease-in-out infinite; -o-animation: loaderAnimate2 1000ms ease-in-out infinite; -webkit-animation: loaderAnimate2 1000ms ease-in-out infinite; animation: loaderAnimate2 1000ms ease-in-out infinite; border-radius: 50%; clip: rect(0, 30px, 30px, 15px); content: ''; height: 30px; position: absolute; width: 30px; } .bg-primary { background-color: #6e8cd7 !important; } .bg-success { background-color: #33b86c !important; } .bg-info { background-color: #29b6f6 !important; } .bg-warning { background-color: #ffd740 !important; } .bg-danger { background-color: #ef5350 !important; } .bg-muted { background-color: #d0d0d0 !important; } .bg-inverse { background-color: #212121 !important; } .bg-purple { background-color: #7e57c2 !important; } .bg-pink { background-color: #ec407a !important; } .bg-white { background-color: #ffffff !important; }
Dey-Dey

Colored Portlets

Dey-Dey
  Aug 8th, 23:01
71 Views