64 - Componente : nav (vista de pestañas o pastillas)

Podemos fácilmente transformar nuestro menú de opciones a pestañas agregando la clase "nav-tabs", de forma similar si queremos que se muestren como pastillas debemos emplear en su lugar la clase "nav-pills".

Veamos un ejemplo que muestre un menú con pestañas, mostrando la segunda opción activa:

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 4</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <nav class="nav nav-tabs mt-2">
      <a class="nav-link" href="#">Opción 1</a>
      <a class="nav-link active" href="#">Opción 2</a>
      <a class="nav-link" href="#">Opción 3</a>
      <a class="nav-link" href="#">Opción 4</a>
      <a class="nav-link disabled" href="#">Opción 5</a>
    </nav>
  </div>
</body>
</html>

Agregamos la clase mt-2 para dar un margen superior y evitar que salga pegado.

En el navegador tenemos el siguiente resultado:

bootstrap 4 nav nav-tabs

Si cambiamos la clase "nav-tabs" por la clase "nav-pills" el resultado visual será:

bootstrap 4 nav nav-pills

Con opciones que ocupan todo el contenedor.

Si queremos que las opciones ocupen todo el contenedor debemos agregar a la etiqueta HTML "nav" la clase "nav-justified" y a cada uno de los hipervínculos la clase "nav-item":

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 4</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <nav class="nav nav-pills nav-justified mt-2">
      <a class="nav-link nav-item" href="#">Opción 1</a>
      <a class="nav-link nav-item active" href="#">Opción 2</a>
      <a class="nav-link nav-item" href="#">Opción 3</a>
      <a class="nav-link nav-item" href="#">Opción 4</a>
      <a class="nav-link nav-item disabled" href="#">Opción 5</a>
    </nav>
  </div>
</body>
</html>

En el navegador tenemos el siguiente resultado:

bootstrap 4 nav nav-pills nav-justified nav-item

Ejecutar Ejemplo

Retornar