NavBar

No es más que un encabezado de navegación que se coloca en la parte superior de la

página:
No es más que un conjunto de componentes del framework Bootstrap el cual nos facilita
la creación de la barra principal de navegación de nuestra web mediante la clase .navbar.
Esta barra se adaptará al tamaño de pantalla, mostrando los elementos colapsados en un
botón en pantallas pequeñas y de forma normal para pantallas más grandes.

Barra de navegación básica

Con Bootstrap, una barra de navegación puede extenderse o contraerse, según el tamaño
de la pantalla.

Se crea una barra de navegación estándar con la .navbar clase, seguida de una clase
colapsada receptiva: .navbar-expand-xl|lg|md|sm (apila la barra de navegación
verticalmente en pantallas extragrandes, grandes, medianas o pequeñas).

Para agregar enlaces dentro de la barra de navegación, use un <ul>elemento

con class="navbar-nav". Luego agregue <li> elementos con una .nav-item clase seguidos
de un <a> elemento con una .nav-link clase:

Barra de navegación vertical

Elimina la .navbar-expand-xl|lg|md|sm clase para crear una barra de
navegación vertical:

Barra de navegación centrada

Agregue la .justify-content-centerclase para centrar la barra de navegación.

El siguiente ejemplo centrará la barra de navegación en pantallas medianas, grandes y

extragrandes. En pantallas pequeñas se mostrará verticalmente y alineado a la izquierda
(debido a la clase .navbar-expand-sm):
Logotipo
La .navbar-brand clase se usa para resaltar la marca/logotipo/nombre del proyecto de su
página:

Al usar la .navbar-brand clase en imágenes, Bootstrap 4 diseñará automáticamente la

imagen para que se ajuste a la barra de navegación verticalmente.

Contraer la barra de navegación

barra de navegación

Muy a menudo, especialmente en pantallas pequeñas, desea ocultar los enlaces de

navegación y reemplazarlos con un botón que debería revelarlos cuando se hace clic en él.

Para crear una barra de navegación plegable, use un botón con . Luego envuelva el
contenido de la barra de navegación (enlaces, etc.) dentro de un elemento div con ,
seguido de una identificación que coincida con la del botón: " thetarget ".class="navbar-
toggler", data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-
collapse"data-target

Sugerencia: también puede eliminar la clase .navbar-expand-md para ocultar SIEMPRE los

enlaces de la barra de navegación y mostrar el botón de alternancia.

Barra de navegación con menú desplegable

Las barras de navegación también pueden contener menús desplegables:

Formularios y botones de la barra de

navegación
Agregue un <form>elemento con class="form-inline" para agrupar entradas y botones uno
al lado del otro: