"Dropup footer attempt"
Bootstrap 3.0.0 Snippet by rhondak

<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 ----------> <img src="https://s3.amazonaws.com/libapps/accounts/390/images/WritCitWordsPelican.png" alt="" class="img-responsive"> <div class="carousel-caption"> <h1></h1> </div> <p></p> <div id="wrap"> <div id="main"> </div> </div> <footer class="navbar-default navbar-fixed-bottom"> <div class="container-fluid"> <p class="text-muted credit"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Journal Articles<span class="caret caret-up"></span> </button> <ul class="dropdown-menu drop-up" role="menu"> <li><a href="#">EasyBib</a></li> <li class="divider"></li> <li><a href="#">...from Databases</a></li> <li><a href="#">...from Online Journals</a></li> <li><a href="#">...with Multiple Authors</a></li> <li class="divider"></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Websites<span class="caret caret-up"></span> </button> <ul class="dropdown-menu drop-up" role="menu"> <li><a href="#">EasyBib</a></li> <li class="divider"></li> <li><a href="#">...Page or Document</a></li> <li><a href="#">...Government Document </a></li> <li><a href="#">...Florida Statute</a></li> <li class="divider"></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Books & eBooks<span class="caret caret-up"></span> </button> <ul class="dropdown-menu drop-up" role="menu"> <li><a href="#">Search APAStyle.org</a></li> <li class="divider"></li> <li><a href="#">Book</a></li> <li><a href="#">eBook</a></li> <li><a href="#">Chapter from Textbook or Anthology</a></li> <li><a href="#">Chapter from eTextbook or eAnthology</a></li> <li class="divider"></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Images<span class="caret caret-up"></span> </button> <ul class="dropdown-menu drop-up" role="menu"> <li><a href="#">Search APAStyle.org</a></li> <li class="divider"></li> <li><a href="#">...From Websites</a></li> <li><a href="#">...From Google or Image Searches</a></li> <li><a href="#">...From an SCF Database</a></li> <li class="divider"></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Selected Formats<span class="caret caret-up"></span> </button> <ul class="dropdown-menu drop-up" role="menu"> <li><a href="#">Indirect Source</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> </div> <footer class="footer"></footer>
/* 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 -150px; /* Pad bottom by footer height */ padding: 0 0 150px; } #page { min-height: 100%; } #main { overflow: auto; padding-bottom: 150px; } /* Set the fixed height of the footer here */ .footer { position: absolute; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both; padding-top: 20px; } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ body > .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; }

Related: See More


Questions / Comments: