Saltar al contenido

menú de navegación vertical bootstrap con ejemplo de código

Hola, descubrimos la solución a lo que estabas buscando, deslízate y la verás a continuación.

Ejemplo 1: bootstrap 5 pestañas

<ulclass="nav nav-tabs"id="myTab"role="tablist"><liclass="nav-item"role="presentation"><aclass="nav-link active"id="home-tab"data-bs-toggle="tab"href="#home"role="tab"aria-controls="home"aria-selected="true">Homea>li><liclass="nav-item"role="presentation"><aclass="nav-link"id="profile-tab"data-bs-toggle="tab"href="#profile"role="tab"aria-controls="profile"aria-selected="false">Profilea>li><liclass="nav-item"role="presentation"><aclass="nav-link"id="contact-tab"data-bs-toggle="tab"href="#contact"role="tab"aria-controls="contact"aria-selected="false">Contacta>li>ul><divclass="tab-content"id="myTabContent"><divclass="tab-pane fade show active"id="home"role="tabpanel"aria-labelledby="home-tab">...div><divclass="tab-pane fade"id="profile"role="tabpanel"aria-labelledby="profile-tab">...div><divclass="tab-pane fade"id="contact"role="tabpanel"aria-labelledby="contact-tab">...div>div>

Ejemplo 2: panel de pestañas bootstrap 4

<ulclass="nav nav-tabs"id="myTab"role="tablist"><liclass="nav-item"><aclass="nav-link active"id="home-tab"data-toggle="tab"href="#home"role="tab"aria-controls="home"aria-selected="true">Homea>li><liclass="nav-item"><aclass="nav-link"id="profile-tab"data-toggle="tab"href="#profile"role="tab"aria-controls="profile"aria-selected="false">Profilea>li><liclass="nav-item"><aclass="nav-link"id="contact-tab"data-toggle="tab"href="#contact"role="tab"aria-controls="contact"aria-selected="false">Contacta>li>ul><divclass="tab-content"id="myTabContent"><divclass="tab-pane fade show active"id="home"role="tabpanel"aria-labelledby="home-tab">...div><divclass="tab-pane fade"id="profile"role="tabpanel"aria-labelledby="profile-tab">...div><divclass="tab-pane fade"id="contact"role="tabpanel"aria-labelledby="contact-tab">...div>div>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *