<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 V1</h1> </div> <p>Drop-up menus for different visitors.</p> </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"> Shoppers <span class="caret caret-up"></span> </button> <ul class="dropdown-menu drop-up" role="menu"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Retailers <span class="caret caret-up"></span> </button> <ul class="dropdown-menu drop-up" role="menu"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Partners <span class="caret caret-up"></span> </button> <ul class="dropdown-menu drop-up" role="menu"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Social <span class="caret caret-up"></span> </button> <ul class="dropdown-menu drop-up" role="menu"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</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; }