Wednesday, September 4, 2013

Twitter Bootstrap 2.3.2 - Glyphicons Extended Color Set

If you're like me, you've probably said to yourself..."Man, I'm bored of either black or white glyphicons!", as well you should be.

Isn't it time to add some new colors to your life?? YES!

Now, lets get to the fun stuff...

Step 1

Download the glyphicons-extended.zip file

Step 2

Unzip the glyphicons-extended.zip file to your web root

Step 3

Add the following line to your header...

HTML



and...VOILA! You're ready to start using your new icon colors!! All you need to do is use class names similar to "icon-white"

Available Color Classes
  • icon-red
  • icon-purple
  • icon-blue
  • icon-lightblue
  • icon-green
  • icon-yellow
  • icon-orange

EXAMPLE





















For more information on glyphicons in bootstrap check out their documentation.

Please leave your questions and comments below!

Tuesday, September 3, 2013

Multi-Column Dropdown Menu using Twitter Bootstrap

The other day I came across a problem that required a somewhat custom solution. I had begun using the dropdown menus in Twitter Bootstrap and had some dropdowns that became quite lengthy. They were so long, in fact, some of them stretched right off the viewport without wrapping.

So, I came up with a quick solution to create a multi column bootstrap dropdown, with minimal overrides, that keeps the same look and feel as the other dropdown menus. Without anymore fluff, here is my implementation...


HTML
<ul class="nav">
  <li class="dropdown">
    <a href="#">Dropdown Heading</a>
    <div class="dropdown-menu multi-column">
      <div class="container-fluid">
        <div class="row-fluid">
          <div class="span6">
            <ul class="dropdown-menu">
              <li><a href="#">Col 1 - Opt 1</a></li>
              <li><a href="#">Col 1 - Opt 2</a></li>
            </ul>
          </div>
          <div class="span6">
            <ul class="dropdown-menu">
              <li><a href="#">Col 2 - Opt 1</a></li>
              <li><a href="#">Col 2 - Opt 2</a></li>
            lt;/ul>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>


CSS
.dropdown-menu.multi-column {
    width: 400px;
}

.dropdown-menu.multi-column .dropdown-menu {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}


I've currently only used this with a standard nav in Bootstrap 2.3.2, as seen on Socialbliss

It should work in a dropdown or dropdown-submenu.

I hope this short article was helpful. Please post any questions or comments below!