Bootstrap snippet: Home menu

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: menu,dashboard,information



<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="container bootstrap snippet"> <div class="col-md-12"> <h2 class="text-primary"> <i class="fa fa-tachometer"></i> Home menu </h2> <hr> <div class="row"> <div class="col-md-3"> <div class="panel panel-info "> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-calculator fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">&nbsp;</p> <p class="announcement-text">Math</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6">View</div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-md-3"> <div class="panel panel-success "> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-leanpub fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">&nbsp;</p> <p class="announcement-text">Language</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6">View</div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-md-3"> <div class="panel panel-warning "> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-flask fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">&nbsp;</p> <p class="announcement-text">Science</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6">View</div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-md-3"> <div class="panel panel-danger "> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-video-camera fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">&nbsp;</p> <p class="announcement-text">Video</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6">View</div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> </div> </div> </div> <div class="col-md-12"> <div class="container bootstrap snippet"> <footer class="footer"> <hr/> <p>&copy; Company name 2015</p> </footer> </div> </div> </div>
body{margin-top:20px;}
Dey-Dey

Home menu

Dey-Dey
  Apr 14th 2015, 08:26
2.5K Views