<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 id="wrap"> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Footer dropup</h1> </div> <p>Just an drop-up for use in footer or somewhere else. </p> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Actions <span class="caret caret-down"></span> </button> <ul class="dropdown-menu drop-down" role="menu"> <li><a href="#">Publish now!</a></li> <li><a href="#">Reject</a></li> <li class="divider"></li> <li><a href="#">Edit</a></li> <li><a href="#">Delete</a></li> </ul> </div> </div> </div> <div id="footer"> <div class="container"> <p class="text-muted credit"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropup <span class="caret caret-up"></span> </button> <ul class="dropdown-menu drop-up" 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> </p> </div> </div>

/* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom by footer height */ padding: 0 0 60px; } /* Set the fixed height of the footer here */ #footer { height: 60px; background-color: #f5f5f5; } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ .container { width: auto; max-width: 680px; padding: 0 15px; } .container .credit { margin: 0 0; padding: 8px 0 4px 0; } .caret-up { /* Safari */ -webkit-transform: rotate(-180deg); /* Firefox */ -moz-transform: rotate(-180deg); /* IE */ -ms-transform: rotate(-180deg); /* Opera */ -o-transform: rotate(-180deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=6); } .drop-up { top: auto; bottom: 100% !important; }