0

He estado intentando hacer una tipo pestaña con Bootstrap 5, pero aún no lo logro. ¿Alguien tiene alguna solución? Adjunto imagen de cómo debe quedar.

introducir la descripción de la imagen aquí

<div class="text-center">
  <div class="row justify-content-end">
     <div class="col-10 bg-info">
        One of two columns
     </div>
  </div>
</div>

1 respuesta 1

0

Para crear una pestaña en Bootstrap 5, puedes utilizar las clases proporcionadas por el componente "Navs" de Bootstrap. Aquí tienes un ejemplo basado en tu código y la descripción de cómo debe verse la pestaña:

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <title>Pestaña Bootstrap</title>
</head>

<body>
  <div class="text-center mt-4">
    <ul class="nav nav-tabs justify-content-end">
      <li class="nav-item">
        <a class="nav-link active" href="#">Pestaña 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pestaña 2</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade show active mt-3" id="pestaña1" role="tabpanel">
        <div class="container bg-info p-3">
          Contenido de la Pestaña 1
        </div>
      </div>
      <div class="tab-pane fade mt-3" id="pestaña2" role="tabpanel">
        <div class="container bg-warning p-3">
          Contenido de la Pestaña 2
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Este código utiliza las clases de Bootstrap para crear una estructura de pestañas. La clase nav se utiliza para crear la barra de navegación de las pestañas y la clase tab-content para el contenido de las pestañas. Las clases nav-link, nav-item, tab-pane, y fade se utilizan para definir los elementos individuales de las pestañas.

El contenido de las pestañas está dentro de contenedores div con las clases container y otras clases de estilo (por ejemplo, bg-info para el fondo azul).

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.