I modified the gradient code in bootstrap adding a four color gradient into my version. You can already see the example on my navigation bar and I’d like to share this if you’d like to use it. Here is version of my script. You can use it as a template to customize and build upon for your own needs.

---

How to add this in bootstrap.less

Locate the #gradient code, it should be in the mixins.less if you’re using the exact file in gitHub. Once you located the #gradient add this inside the bracket:

/* Add this inside */
  .vertical-four-colors(@startColor: #ffffff, @midColor: #ebebeb, @midSecColor: #dbdbdb, @colorStop: 0.5, @endColor: #b5b5b5) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, @startColor 0%, @midColor 50%, @midSecColor 50%, @endColor);
    background-image: -webkit-gradient( linear, left top, left bottom, from(@startColor), color-stop(@colorStop, @midColor), color-stop(@colorStop,@midSecColor), to(@endColor));
  }

Here is a code on how to use this four color gradient.

a {
  #gradient > .vertical-four-colors(#ffffff, #ebebeb, #dbdbdb, 0.5, #b5b5b5);
  color: @linkColor;
  &:hover {
    #gradient > .vertical-four-colors(#e0f3fa, #d8f0fc, #b9e2f6, 0.5, #b6dffd);
    color: @linkColorHover;
    text-decoration: none;
  }
}

---

Note that the @colorStop is to set where the @midColor and @midSecColor will meet. I set the default right in the middle.

I hope this helps someone out there. If you have any suggestions on improvements, please share them in the comments.

Thanks.