Te voy a mostrar como crear un `checkbox` personalizado con tres estados utilizando `CSS` con algo de `Javascript`. Tu le podrás añadir posteriormente estilos de Bootstrap si así lo deseas.

En primer lugar, a un `checkbox` no se le pueden asignar estilos por defecto por lo que, en vez de a él, crearemos una `label` y se la asignaremos al `checkbox` mediante el atributo `for` para poder asignarle los estilos a dicha label. El `checkbox` original permanecerá oculto.

Después, tendremos que definir los posibles estados en los que se va a encontrar el checkbox:

    0 --> true --> Color verde
    1 --> false --> Color rojo
    2 --> nulo --> Color amarillo

Y tendremos que definir también las posibles combinaciones:

    0 --> 2 --> 1
    1 --> 2 --> 0

Es decir, siempre pasará por el estado nulo antes de obtener un estado u otro (true/false).

Posteriormente, podremos usar `checkbox.indeterminate = true` para recrear que el checkbox está en estado `nulo` y guardaremos el estado siguiente y actual que le corresponde al estado actual del checkbox para posteriormente poder realizar una acción u otra. Para guardar los estados crearemos un par de atributos `data-` donde, en este caso, he llamado `numero` para el estado siguiente y `actual` para guardar el estado que tiene en el momento de hacer click sobre el checkbox.

Por último, podremos usar los selectores `:checked`, `:indeterminate`, `+` y algo de `Javascript` para hacer el resto. Con `Javascript` crearemos un evento que escuche cuando el checkbox cambie de estado. 

Ejemplo completo:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var checkbox = document.getElementById('checkbox');

    checkbox.addEventListener("change", comprueboCheck, false); 

    function comprueboCheck(){
      var siguienteTrue = false;
      var texto = document.getElementById('console-event');
      
      switch(checkbox.dataset.numero){
          case "0":
              checkbox.dataset.numero = "2";
              checkbox.dataset.actual = "0";
              checkbox.checked = true;
              texto.innerHTML = 'Estado: True';
              break;
          case "1":
              checkbox.dataset.numero = "2";
              checkbox.dataset.actual = "1";
              checkbox.checked = false;
              texto.innerHTML = 'Estado: False';
              break;
          case "2":
              checkbox.indeterminate = true;
              if(checkbox.dataset.actual == "0"){
                  checkbox.dataset.numero = "1";
              }else{
                  checkbox.dataset.numero = "0"
              }
              texto.innerHTML = 'Estado: Nulo';
              break;
      }
    }

<!-- language: lang-css -->

    input[type="checkbox"]{
      display: none;
    }

    input[type="checkbox"] + label{
      display: inline-block;
      height: 30px;
      width: 30px;
      background-color: red;
      border-radius: 5px;
    }

    input[type="checkbox"]:indeterminate + label{
      background-color: yellow;
    }

    input[type="checkbox"]:checked + label{
      background-color: green;
    }

<!-- language: lang-html -->

    <input id="checkbox" data-numero="2" data-actual="1" type="checkbox"/>
    <label for="checkbox"></label>

    <div id="console-event">Estado: False</div>

<!-- end snippet -->