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).