1 . Change navbar color in Twitter Bootstrap?

Answer :

tl;dr - TWBSColor - Generate your own Bootstrap navbar

Version notes: - Online tool: Bootstrap 3.3.2+ / 4.0.0+ - This answer: Bootstrap 3.0.x

Available navbars

You've got two basic navbars:

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

Default color usage

Here are the main colors and their usage:

  • #F8F8F8: navbar background
  • #E7E7E7: navbar border
  • #777: default color
  • #333: hover color (#5E5E5E for .nav-brand)
  • #555: active color
  • #D5D5D5: active background

Default style

If you want to put some custom style, here's the CSS you need to change:

/* navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
/* Title */
.navbar-default .navbar-brand {
    color: #777;
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
          color: #333;

Custom colored navbar examples

Here are four examples of a custom colored navbar:

JSFiddle link

Enter image description here

And the SCSS code:

$bgDefault   : #e74c3c;
$bgHighlight : #c0392b;
$colDefault  : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
  background-color: $bgDefault;
  border-color: $bgHighlight;
  .navbar-brand {
    color: $colDefault;
    &:hover, &:focus {
      color: $colHighlight; }}
  .navbar-text {
    color: $colDefault; }
  .navbar-nav {
    > li {
      > a {
        color: $colDefault;
        &:hover,  &:focus {
          color: $colHighlight; }}}
    > .active {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  .navbar-toggle {
    border-color: $bgHighlight;
    &:hover, &:focus {
      background-color: $bgHighlight; }
    .icon-bar {
      background-color: $colDefault; }}
  .navbar-form {
    border-color: $colDefault; }
  .navbar-link {
    color: $colDefault;
    &:hover {
      color: $colHighlight; }}}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu {
    > li > a {
      color: $colDefault;
      &:hover, &:focus {
        color: $colHighlight; }}
    > .active {
      > a, > a:hover, > a:focus, {
        color: $colHighlight;
        background-color: $bgHighlight; }}}

And finally, a little gift I've just made a script which will allow you to generate your theme: TWBSColor - Generate your own Bootstrap navbar

[Update]: TWBSColor now generates SCSS/SASS/Less/CSS code. 
[Update]: From now, you can use Less as the default language provided by TWBSColor 
[Update]: TWBSColor now supports drop down menus colorization
[Update]: TWBSColor now allows to choose your version (Bootstrap 4 support added)

Leave a Comment

1 . Contain form within a bootstrap popover?

Answer :

JS Code:

    html : true,
    title: function() {
      return $("#popover-head").html();
    content: function() {
      return $("#popover-content").html();

HTML Markup:

<a href="#" id="popover">the popover link</a>
<div id="popover-head" class="hide">
  some title
<div id="popover-content" class="hide">
  <!-- MyForm -->


Alternative Approaches:


You might want to take a look at X-Editable. A library that allows you to create editable elements on your page based on popovers.

X-Editable demo


Mike Costello has released Bootstrap Web Components. This nifty library has a Popovers Component that lets you embed the form as markup:

<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>

<bs-popover title="Popover with Title" for="popover-target">
  <!-- MyForm -->

2 . Bootstrap won't detect jQuery 1.11.0 - Uncaught Error: Bootstrap's JavaScript requires jQuery?

Answer :

If you're in a Browser-Only environment, use @SridharR's solution.

If you're in a Node/CommonJS + Browser environment (e.g. electron, node-webkit, etc..); the reason for this error is that jQuery's export logic first checks for module, not window:

if (typeof module === "object" && typeof module.exports === "object") {
    // CommonJS/Node
} else {
    // window

Note that it exports itself via module.exports in this case; so jQuery and $ are not assigned to window.

So to resolve this, instead of <script src="path/to/jquery.js"></script>;

Simply assign it yourself by a require statement:

    window.jQuery = window.$ = require('jquery');

NOTE: If your electron app does not need nodeIntegration, set it to false so you won't need this workaround.

3 . Bootstrap dropdown closing when clicked?

Answer :

You can omit the dropdown call all together, the bootstrap dropdown works without it. Make sure you're wrapping your script properly, you can include it on the header or body of your page, although personally i prefer placing it on the body of your page.


<script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {

4 . span style="font-size:14px">Twitter bootstrap grid system. Spacing between columns?

Answer :

You could try spacing the boxes with padding.

<div class="col-md-6 box">
        <div class="inner">Hello</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>


.box {
    padding: 0 5px 0 5px;
.box .inner {
    background-color: #fff;

5 . How to add a search box with icon to the navbar in Bootstrap 3?

Answer :

I'm running BS3 on a dev site and the following produces the affect/layout you're requesting. Of course you'll need the glyphicons set up in BS3.

<div class="navbar navbar-inverse navbar-static-top" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <a class="navbar-brand" rel="home" href="/" title="Aahan Krish's Blog - Homepage">ITSMEEE</a>

    <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav">
            <li><a href="/topic/notes/">/notes</a></li>
            <li><a href="/topic/dev/">/dev</a></li>
            <li><a href="/topic/good-reads/">/good-reads</a></li>
            <li><a href="/topic/art/">/art</a></li>
            <li><a href="/topic/bookmarks/">/bookmarks</a></li>
            <li><a href="/all-topics/">/all</a></li>

        <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>


6 . Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes?

Answer :

 had a slightly different problem:

  • I needed to combine fixed and fluid columns as part of a table rather than as part of a full-window layout
  • I needed to have columns fixed to both the left and right
  • I was not worried about the column backgrounds using the full-height of the containing row

As a result, I resorted to float to for the left and right columns, and could then use Bootstrap's row to do the fluid columns in between.

    <div class="pull-left" style="width:240px">Fixed 240px</div>
    <div class="pull-right" style="width:120px">Fixed 120px</div>
    <div style="margin-left:240px;margin-right:120px">
        <div class="row" style="margin:0px">
            Standard grid system content here

7 . Twitter Bootstrap modal: How to remove Slide down effect?

Answer :

I believe that most of these answers are for bootstrap 2. I ran into the same issue for bootstrap 3 and wanted to share my fix. Like my previous answer for bootstrap 2, this will still do an opacity fade, but will NOT do the slide transition.

You can either change the modals.less or the theme.css files, depending on your workflow. If you haven't spent any quality time with less, I'd highly recommend it.

for less, find the following code in MODALS.less

&.fade .modal-dialog {
  .translate(0, -25%);
  .transition-transform(~"0.3s ease-out");
&.in .modal-dialog { .translate(0, 0)}

then change the -25% to 0%

Alternatively, if you're using just the css, find the following in theme.css:

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;

and then change the -25% to 0%.

8 . How to hide element using twitter bootstrap 3 and show it using jQuery?

Answer :

First, don't use .hideUse .hidden. As others have said, .hide is deprecated,

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1

Second, use jQuery's .toggleClass(), .addClass() and .removeClass()

<div id="myId" class="hidden">Foobar</div>
  • To show it: $("#myId").removeClass('hidden');
  • To hide it: $("#myId").addClass('hidden');
  • To toggle it: $("#myId").toggleClass('hidden');

Don't use the css class .show, it has a very small use case. The definitions of showhidden and invisible are in the docs.

// Classes
.show {
  display: block !important;
.hidden {
  display: none !important;
  visibility: hidden !important;
.invisible {
  visibility: hidden;

9 . Bootstrap 3 Glyphicons CDN?

Answer :

An alternative would be to use Font-Awesome for icons:

Including Font-Awesome

Open Font-Awesome on CDNJS and copy the CSS url of the latest version:

<link rel="stylesheet" href="<url>">

Or in CSS

@import url("<url>");

For example (note, the version will change):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">


<i class="fa fa-bed"></i>

It contains a lot of icons!

10 . Bootstrap 3.0 Button in Navbar?

Answer :

With bootstrap 3, it is still possible to have a <a>link rendered as a button, but you have to include them into a <form>. Also, the <a> should include the navbar-btn class.

    <a href="#" class="btn btn-primary btn-sm navbar-btn">

11 . How to make a whole row in a table clickable as a link?

Answer :

You could include an anchor inside every <td>, like so:

  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>

You could then use display:block; on the anchors to make the full row clickable.

tr:hover { 
   background: red; 
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 

Example jsFiddle here.

This is probably about as optimum as you're going to get it unless you resort to JavaScript.

12 . How to overwrite styling in Twitter Bootstrap?

Answer :

The answer to this is CSS Specificity. You need to be more "specific" in your CSS so that it can override bootstrap css properties.

For example you have a sample code for a bootstrap menu here:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div id="home-menu-container" class="collapse navbar-collapse">
        <ul id="home-menu" class="nav navbar-nav">
            <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
            <li><a href="#intro">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">What We Do</a></li>
            <li><a href="#process">Our Process</a><br /></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
    </div><!-- /.navbar-collapse -->

Here, you need to remember the hierarchy of the specificity. It goes like this:

  • Give an element with an id mentioned 100 points
  • Give an element with a class mentioned 10 points
  • Give a simple element a single 1 point

So, for the above if your css has something like this:

.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */

So, even if you have defined the .navbar a after .navbar ul li a it is still going to override with a red colour, instead of a green since the specificity is more (13 points).

So, basically all you need to do is calculate the points for the element you are wanting to change the css for, via inspect element on your browser. Here, bootstrap has specified its css for the element as

.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
    color: #999;

So, even if your css is loading is being loaded after bootstrap.css which has the following line:

.navbar-nav li a {
    color: red;

it's still going to be rendered as #999. In order to solve this, bootstrap has 22 points (calculate it yourself). So all we need is something more than that. Thus, I have added custom IDs to the elements i.e. home-menu-container and home-menu. Now the following css will work:

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

13 . Decreasing height of bootstrap 3.0 navbar?

Answer :

Bootstrap 3.0 by default has a 15px padding on top and bottom, so we just need to override it!

For example:

.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}

14 . Bootstrap 3.0 Popovers and tooltips?

Answer :

For some reason the only way I was able to get my code to work is by switching couple of things. If nothing worked for you so far, please give a whirl to this:

    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'

15 . Can you disable tabs in Bootstrap?

Answer :

I added the following Javascript to prevent clicks on disabled links:

$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
  if ($(this).hasClass("disabled")) {
    return false;