JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <body data-spy="scroll" data-target=".navbar-header" data-offest="80">  
        <!-- CABEÇALHO DO SISTEMA -->
        <header>
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="row container-background-color hidden-xs hidden-sm">
                        <div class="col-xs-12 col-sm-5 col-md-2">
                            <div class="navbar-header">
                                <a class="navbar-brand" href="#">
                                    <!-- COLOCAR A LOGO DO SISTEMA AQUI -->
                                    AdoteMe
                                </a>
                            </div>
                        </div>
                        <div id="title" class="col-xs-12 col-sm-7 col-md-7 col-md-offset-3 hidden-xs hidden-sm">
                            <h4 class="navbar-text"><strong>AdoteMe</strong> - Sistema de Adoção</h4>
                        </div>
                    </div>

                    <!-- BARRA DE MENUS -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-menus" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand label-menu" href="#">Menu</a>
                    </div>
                    <div class="collapse navbar-collapse"...

CSS

/* FORMATAÇÃO DE FONTE PARA TODOS OS ELEMENTOS, INCLUSIVE OS ITENS DO MENU DROPDONW E LABELS DE CHECKBOX */
*, .dropdown-menu>li>a, .checkbox label {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

body {
    background: url(../images/background/ignasi_pattern_s.png);
}

.container-background-color {
/*
    background-color: #f8f8f8;
    border-color: #e7e7e7;
*/
    background-color: #337AB7;
    border-color: #4C8BB7;
    color: aliceblue;
}

/* OVERRIDE DO CSS DO BOOTSTRAP */
.navbar-default .navbar-text, 
.navbar-default .navbar-brand:first-child {
    color: #f5f5f5;
}

.navbar-default .navbar-header a.label-menu{
    cursor: default;
}

.page-header {
    border-bottom: 1px solid #337AB7
}

.panel-form-login {
    max-width: 450px;
    margin-top: 100px;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 2px 2px 2px #888;
}
/* OVERRIDE DO CSS DO BOOTSTRAP */

/* SEPARA OS CAMPOS DO FORMULÁRIO DE CADASTRO */
.form-pretendente .row .input-group {
    margin-bottom: 10px;
}

.dropdown-high {
    height: 100px;
    overflow: auto;
}

/* DEFINE O ESTILO DO FORMULÁRIO DE LOGIN */
.form-login {
    max-width: 350px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;
}

.form-login .input-group {
    margin-bottom: 10px;
}

footer {
    position:relative; /* ALTERADO PARA RELATIVE A FIM DE DEIXAR A POSIÇÃO DO FOOTER DE ACORDO COM A FORMATAÇÃO DOS OUTROS ELEMENTOS */
    bottom: 0;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #337ab7;
    color: white;
}

/* MEDIA QUERIES */
@media only screen and (min-width: 240px) and (max-width: 568px) {
    footer {
        font-size: 10px;
        position: static;
    }
} 

@media only screen and (min-width: 569px) and (max-width: 767px) {
    footer {
        position: static;
    }
}