Cómo modificar el tamaño y color del navbar Bootstrap

Hola, saludos a todos!!

Estoy haciendo una navbar con las clases que ya trae Bootstrap y quisiera saber como puedo modificar el tamaño que tendrá el navbar y su color. También quiero saber como puedo hacer que al verse en una pantalla móvil, las letras del navbar estén centradas y no de lado izquierdo.

Espero puedan ayudarme :D Aquí les dejo como tengo la estructura

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                    <div class="navbar-header">
 
                            <buttom class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>                               
                            </buttom>
                            <a href="#" class="navbar-brand"><img alt="Brand" src="img/logo.png" class="imagen"></a>
                    </div>
 
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav ">
                            <li><a href="#">Item 1</a></li>
                            <li><a href="#">Item 2</a></li>
                            <li><a href="#">Item 3</a></li>
                            <li><a href="#">Item 4</a></li>
                            <li><a href="#">Item 5</a></li>
                        </ul>
<!--        BUSQUEDA        !-->
                        <form action="" class="navbar-form navbar-right">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Buscar...">
                            </div>
                            <buttom class="btn btn-primary">Buscar</buttom>
                        </form>
                    </div>
                </div>
            </nav>

Respuestas

Para cambiar color mira en la hoja de estilos de bootstrap la clase .navbar y las subsiguientes.

Para centrar el texto:

.navbar-collapse { text-align: center; }

Te recomiendo utilizar Firebug para ir revisando el código y darte cuenta que classes o ids afectan a que elementos HTML.

@HernanMiceli

13 febrero 2016, 2:41

Crea un hoja de estilos y agrega lo que deseas. *Para el color y tamaño del nav:

.navbar{
        color: TuColor !important;
        width: LaMedidaQueDeseas;
}

*Para centrar necesitas usar media queries dependiendo en que medidas quieres que se cambie para bootstrap revisa en su grid las media queries para las resoluciones sm y xs que imagino es donde quieres que se centre, ejemplo:

@media (min-width: 700px) { 
            .navbar{
                    text-align: center;
                   }
}

En caso de querer algunos elemento en específico usas .navbar * | .navbar a, etc.

@lmar_copl

16 febrero 2016, 3:09