Bootstrap CSS Framework and a Sticky Footer

Edit: Bootstrap now includes a navbar that will stick to the foot of the page. This article should be considered outdated and even more incomplete.

Bootstrap, brought to you buy the guys at Twitter, is a very cool CSS framework that gives you access to some sleek looking buttons, form items, navigation bars and many, many other things.

It’s designed around the grid-layout principle but very easily allows for liquid-layouts. I definitely recommend giving Bootstrap a try.

One thing it didn’t have, that I needed, is a nav bar that sticks to the bottom of a page. Fortunately it’s very easy to take the topbar and make it a bottombar. The CSS is included below.

/*!
 * Bootstrap v1.2.0
 *
 * Copyright 2011 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 * Date: Fri Sep  9 20:48:32 PDT 2011
 */
/* Reset.less
 * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.bottombar {
  height: 40px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  overflow: visible;
}
.bottombar .fill {
  background: #222;
  background-color: #222222;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
  background-image: -moz-linear-gradient(top, #333333, #222222);
  background-image: -ms-linear-gradient(top, #333333, #222222);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
  background-image: -webkit-linear-gradient(top, #333333, #222222);
  background-image: -o-linear-gradient(top, #333333, #222222);
  background-image: linear-gradient(top, #333333, #222222);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.bottombar a {
  color: #bfbfbf;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.bottombar a:hover, .bottombar ul li.active a {
  background-color: #333;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  text-decoration: none;
}
.bottombar h3 {
  position: relative;
}
.bottombar h3 a {
  float: left;
  display: block;
  padding: 8px 20px 12px;
  margin-left: -20px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 200;
  line-height: 1;
}
.bottombar form {
  float: left;
  margin: 5px 0 0 0;
  position: relative;
  filter: alpha(opacity=100);
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.bottombar form input {
  background-color: #444;
  background-color: rgba(255, 255, 255, 0.3);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: normal;
  font-weight: 13px;
  line-height: 1;
  width: 220px;
  padding: 4px 9px;
  color: #fff;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid #111;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}
.bottombar form input:-moz-placeholder {
  color: #e6e6e6;
}
.bottombar form input::-webkit-input-placeholder {
  color: #e6e6e6;
}
.bottombar form input:hover {
  background-color: #bfbfbf;
  background-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.bottombar form input:focus, .bottombar form input.focused {
  outline: none;
  background-color: #fff;
  color: #404040;
  text-shadow: 0 1px 0 #fff;
  border: 0;
  padding: 5px 10px;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.bottombar ul {
  display: block;
  float: left;
  margin: 0 10px 0 0;
  position: relative;
}
.bottombar ul.secondary-nav {
  float: right;
  margin-left: 10px;
  margin-right: 0;
}
.bottombar ul li {
  display: block;
  float: left;
  font-size: 13px;
}
.bottombar ul li a {
  display: block;
  float: none;
  padding: 10px 10px 11px;
  line-height: 19px;
  text-decoration: none;
}
.bottombar ul li a:hover {
  color: #fff;
  text-decoration: none;
}
.bottombar ul li.active a {
  background-color: #222;
  background-color: rgba(0, 0, 0, 0.5);
}
.bottombar ul.primary-nav li ul {
  left: 0;
}
.bottombar ul.secondary-nav li ul {
  right: 0;
}
.bottombar ul li.menu {
  position: relative;
}
.bottombar ul li.menu a.menu:after {
  width: 0px;
  height: 0px;
  display: inline-block;
  content: "↑";
  text-indent: -99999px;
  vertical-align: top;
  margin-top: 8px;
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
  filter: alpha(opacity=50);
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}
.bottombar ul li.menu.open a.menu, .bottombar ul li.menu.open a:hover {
  background-color: #444;
  background-color: rgba(255, 255, 255, 0.1);
  *background-color: #444;
  /* IE6-7 */

  color: #fff;
}
.bottombar ul li.menu.open ul {
  display: block;
}
.bottombar ul li.menu.open ul li a {
  background-color: transparent;
  font-weight: normal;
}
.bottombar ul li.menu.open ul li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  *background-color: #444;
  /* IE6-7 */

  color: #fff;
}
.bottombar ul li.menu.open ul li.active a {
  background-color: rgba(255, 255, 255, 0.1);
  font-weight: bold;
}
.bottombar ul li ul {
  background-color: #333;
  float: left;
  display: none;
  position: absolute;
  bottom: 40px;
  min-width: 160px;
  max-width: 220px;
  _width: 160px;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  text-align: left;
  border: 0;
  zoom: 1;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;

  -webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.6);
}
.bottombar ul li ul li {
  float: none;
  clear: both;
  display: block;
  background: none;
  font-size: 12px;
}
.bottombar ul li ul li a {
  display: block;
  padding: 6px 15px;
  clear: both;
  font-weight: normal;
  line-height: 19px;
  color: #bbb;
}
.bottombar ul li ul li a:hover {
  background-color: #333;
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.bottombar ul li ul li.divider {
  height: 1px;
  overflow: hidden;
  background: #222;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 5px 0;
}
.bottombar ul li ul li span {
  clear: both;
  display: block;
  background: rgba(0, 0, 0, 0.2);
  padding: 6px 15px;
  cursor: default;
  color: #808080;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
Advertisements
This entry was posted in Bootstrap, CSS and tagged , , , . Bookmark the permalink.

13 Responses to Bootstrap CSS Framework and a Sticky Footer

  1. Zoki says:

    Great idea, thanks. One thing I noticed: if the bottom bar has drop-down list with links, it should pop UP, instead of down (which is the default), because this way it is not visible.

    • James says:

      Whoops, thanks for letting me know. I may have posted the wrong code. I’ll check it on Monday.

      One thing I definitely haven’t sorted is the arrow. Can’t seem to get the up-arrow to get in there right.

    • James says:

      Okay. Should work correctly now. Also added Bootstrap license stuff.

      I’ll be posting a Sass (scss) version soon too for those that are interested.

  2. Paul G. says:

    Nice job with this James!

    I figured you may want to know you can get a WordPress plugin now that adds the Bootstrap CSS and the Twitter bootstrap Javascript to your WordPress site.

    We made it, but we’re open to suggestions for the plugin from people who like it and want to see more.

    Here’s a link to the blog post about version 0.3:
    http://www.hostliketoast.com/2011/09/twitter-bootstrap-javascript-supported-wordpress-bootstrap-css-plugin/

    Let me know what ya think.
    Cheers,
    Paul.

  3. Matt S says:

    I love the bottombar implementation. Any possibility of getting it to work on Mobile Safari? When you scroll down the page the bottombar stays at it’s original position and you can see content below it.

    • James says:

      I don’t have access to Mobile Safari (I didn’t even know there was a true mobile version of Safari) and I’m super busy until the end of January but can you send a screenshot or something?

      I’ll be looking to update this for some time in February at which point I can hopefully borrow someones iPhone.

      Sorry for the delay in getting back to you; November was insane for me.

  4. Hi there, was scrolling through comments and I see you said you’d be making a sass version, any news on that? Maybe it’s in another article, which I’ll look around for, would be good if you could update this with info/ a link.

    All the best,
    Rich

    • James says:

      Hi Richard,

      My programming work, even at home, is mainly dictated by my job, and my other interests take up a lot of my time now too.
      When I wrote the post the intention was that we would Sassify the CSS but there has been no need to do that.

      As you can see I haven’t even had time to integrate the changes suggested by Anne and I don’t see the situation changing in the next few months.

      Sorry, Richard. But if you do ever make a Sass version please let me know and I’ll happily link to it.

      Regards,
      James.

    • James says:

      Rich,

      Bootstrap now includes a navbar that will stick to the footer so I imagine one of the Sass translations on Github will have what you need.

      James.

  5. HPLino says:

    Hi can you post and you html code for this css

    thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s