Bootstrap Vertical Tabs - Бутстрап 5 и 4 табы / Дизайн / Плагины Bootstrap

Версия: v1.0

Каталог: Плагины Bootstrap

Категория: Дизайн

Bootstrap: 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, WHMCS, PHP

Язык: Английский

Вес файла: 98.4 Kb

Уникальный ID: 5667

Посмотрели: 966 раз

Скачать бесплатно

Посетить Демо страница

Помощь: установка & настройка

Скачали бесплатно: 36 раз

Прокомментировали: 0 раз

Рейтинг: 3.4 / 5 - 5 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/tromgy/bootstrap-5-vertical-tabs

Информация: Пользователям

Информация: Правообладателям

Теги: вкладки, tabs, bootstrap 5, табы, Tab, таб, Plugin, bootstrap 4

Поделился: BootstrapТема

Добавлено: 2023-01-15 в 21:07

Метка: 1673806035

⇄ ⇅

<!--

Responsive vertical tabs for Bootstrap 5
<DOCTYPE html>
<html lang="en-US">
 <head>
 
 <meta charset="utf-8" />
 <meta
 name="viewport"
 content="width=device-width, initial-scale=1, shrink-to-fit=no"
 />

<title>Bootstrap 5 & 4 Vertical Tabs & BootstrapTema</title>

<link
 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
 rel="stylesheet"
 integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
 crossorigin="anonymous"
 />

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2023/bvt/b5vtabs.min.css" />
 <link rel="stylesheet" href="https://bootstraptema.ru/plugins/2023/bvt/b4vtabs.min.css" />
 </head>

<body>
 <div class="p-3 text-center">
 <h1>Bootstrap 5 & 4 Vertical Tabs & BootstrapTema</h1>
 </div>

<div class="container vtabs">
 
 <div class="row">
 <div class="col-md-12">
 <hr />
 <h3>Left Tabs</h3>
 <hr />
 </div>
 </div>

<div class="row">
 
 <div class="col-md-3">
 <ul class="nav nav-tabs left-tabs" role="tablist">
 <li class="nav-item" role="presentation">
 <div
 id="lorem-left-tab"
 class="nav-link tab-clickable active"
 role="tab"
 data-bs-toggle="tab"
 data-bs-target="#lorem-left"
 aria-controls="lorem-left"
 aria-selected="true"
 >
 Lorem
 </div>
 </li>
 <li class="nav-item" role="presentation">
 <div
 id="sapien-left-tab"
 class="nav-link tab-clickable"
 role="tab"
 data-bs-toggle="tab"
 data-bs-target="#sapien-left"
 aria-controls="sapien-left"
 aria-selected="false"
 >
 Sapien
 </div>
 </li>
 <li class="nav-item" role="presentation">
 
 <div
 id="llanfairpwllgwyngyll-left-tab"
 class="nav-link tab-clickable"
 role="tab"
 title="Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch"
 data-bs-toggle="tab"
 data-bs-target="#llanfairpwllgwyngyll-left"
 aria-controls="llanfairpwllgwyngyll-left"
 aria-selected="false"
 >
 Other
 </div>
 </li>
 </ul>
 </div>

<div class="col-md-9">
 <div class="container">
 <div id="accordion-left-tabs" class="tab-content accordion">
 
 
 <div
 id="lorem-left"
 class="tab-pane fade show active accordion-item"
 role="tabpanel"
 >
 <div class="accordion-header" role="tab">
 <button
 class="accordion-button collapsed"
 type="button"
 role="button"
 data-bs-toggle="collapse"
 data-bs-target="#lorem-left-article"
 aria-expanded="true"
 aria-controls="lorem-left-article"
 >
 Lorem
 </button>
 </div>
 <article
 id="lorem-left-article"
 class="accordion-body accordion-collapse collapse"
 data-bs-parent="#accordion-left-tabs"
 aria-labelledby="lorem-left-tab"
 >
 <h1>Lorem</h1>
 <section>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
 do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed
 cras ornare. Diam vulputate ut pharetra sit amet. Orci ac
 auctor augue mauris augue neque. Turpis massa sed elementum
 tempus egestas.
 </section>
 </article>
 </div>

<div
 id="sapien-left"
 class="tab-pane fade accordion-item"
 role="tabpanel"
 >
 <div class="accordion-header" role="tab">
 <button
 class="accordion-button collapsed"
 type="button"
 role="button"
 data-bs-toggle="collapse"
 data-bs-target="#sapien-left-article"
 aria-expanded="false"
 aria-controls="sapien-left-article"
 >
 Sapien
 </button>
 </div>

<article
 id="sapien-left-article"
 class="accordion-body accordion-collapse collapse"
 data-bs-parent="#accordion-left-tabs"
 aria-labelledby="sapien-left-tab"
 >
 <h1>Sapien</h1>
 <section>
 Sapien et ligula ullamcorper malesuada proin. Enim nulla
 aliquet porttitor lacus luctus accumsan. Phasellus egestas
 tellus rutrum tellus pellentesque eu. Morbi leo urna
 molestie at. Ac odio tempor orci dapibus ultrices in iaculis
 nunc. Consequat nisl vel pretium lectus quam id leo in
 vitae. Proin sagittis nisl rhoncus mattis rhoncus urna
 neque. Vulputate dignissim suspendisse in est ante. Luctus
 venenatis lectus magna fringilla urna porttitor rhoncus
 dolor. Quis auctor elit sed vulputate mi sit amet mauris
 commodo.
 </section>
 </article>
 </div>

<div
 id="llanfairpwllgwyngyll-left"
 class="tab-pane fade accordion-item"
 role="tabpanel"
 >
 <div class="accordion-header" role="tab">
 <button
 class="accordion-button collapsed"
 type="button"
 role="button"
 data-bs-toggle="collapse"
 data-bs-target="#llanfairpwllgwyngyll-left-article"
 aria-expanded="false"
 aria-controls="llanfairpwllgwyngyll-left-article"
 >
 
 <div class="ellipsis">
 Other
 </div>
 </button>
 </div>
 <article
 id="llanfairpwllgwyngyll-left-article"
 class="accordion-body accordion-collapse collapse"
 data-bs-parent="#accordion-left-tabs"
 aria-labelledby="llanfairpwllgwyngyll-left-tab"
 >
 <h1>
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 </h1>
 <section>
 <p>
 <small>From Wikipedia, the free encyclopedia</small>
 </p>
 </section>
 <section>
 <p>
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 (pronounced
 [ˌɬanvairpʊɬˌɡwɨ̞ŋɡɨ̞ɬɡɔˌɡɛrəˌχwərnˌdrɔbʊɬˌɬantəˌsɪljɔˌɡɔɡɔˈɡoːχ]
 in Welsh), official short form name Llanfairpwllgwyngyll
 (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]), also spelled Llanfair
 Pwllgwyngyll, is a large village and local government
 community on the island of Anglesey in Wales. It is
 situated on the Menai Strait next to the Britannia Bridge
 and across the strait from Bangor. While the official
 short form name is used in official contexts, both the
 full name and shortened (Llanfairpwll or Llanfair PG)
 forms of the place name are used in various contexts.
 </p>
 <p>
 <a
 href="#"
 target="_blank"
 title="Open Wikipedia article in a new tab."
 >Full article &gt;</a
 >
 </p>
 </section>
 </article>
 </div>
 </div>
 </div>
 </div>
 </div>

<div class="row">
 <div class="col-md-12">
 <hr />
 <h3>Right Tabs</h3>
 <hr />
 </div>
 </div>

<div class="row">
 
 <div class="col-md-9">
 <div class="container">
 <div id="accordion-right-tabs" class="tab-content accordion">
 
 
 <div
 id="lorem-right"
 class="tab-pane fade show active accordion-item"
 role="tabpanel"
 >
 <div class="accordion-header" role="tab">
 <button
 class="accordion-button collapsed"
 type="button"
 role="button"
 data-bs-toggle="collapse"
 data-bs-target="#lorem-right-article"
 aria-expanded="true"
 aria-controls="lorem-right-article"
 >
 Lorem
 </button>
 </div>
 <article
 id="lorem-right-article"
 class="accordion-body accordion-collapse collapse"
 data-bs-parent="#accordion-right-tabs"
 aria-labelledby="lorem-right-tab"
 >
 <h1>Lorem</h1>
 <section>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
 do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed
 cras ornare. Diam vulputate ut pharetra sit amet. Orci ac
 auctor augue mauris augue neque. Turpis massa sed elementum
 tempus egestas.
 </section>
 </article>
 </div>

<div
 id="sapien-right"
 class="tab-pane fade accordion-item"
 role="tabpanel"
 >
 <div class="accordion-header" role="tab">
 <button
 class="accordion-button collapsed"
 type="button"
 role="button"
 data-bs-toggle="collapse"
 data-bs-target="#sapien-right-article"
 aria-expanded="false"
 aria-controls="sapien-right-article"
 >
 Sapien
 </button>
 </div>

<article
 id="sapien-right-article"
 class="accordion-body accordion-collapse collapse"
 data-bs-parent="#accordion-right-tabs"
 aria-labelledby="sapien-right-tab"
 >
 <h1>Sapien</h1>
 <section>
 Sapien et ligula ullamcorper malesuada proin. Enim nulla
 aliquet porttitor lacus luctus accumsan. Phasellus egestas
 tellus rutrum tellus pellentesque eu. Morbi leo urna
 molestie at. Ac odio tempor orci dapibus ultrices in iaculis
 nunc. Consequat nisl vel pretium lectus quam id leo in
 vitae. Proin sagittis nisl rhoncus mattis rhoncus urna
 neque. Vulputate dignissim suspendisse in est ante. Luctus
 venenatis lectus magna fringilla urna porttitor rhoncus
 dolor. Quis auctor elit sed vulputate mi sit amet mauris
 commodo.
 </section>
 </article>
 </div>

<div
 id="llanfairpwllgwyngyll-right"
 class="tab-pane fade accordion-item"
 role="tabpanel"
 >
 <div class="accordion-header" role="tab">
 <button
 class="accordion-button collapsed"
 type="button"
 role="button"
 data-bs-toggle="collapse"
 data-bs-target="#llanfairpwllgwyngyll-right-article"
 aria-expanded="false"
 aria-controls="llanfairpwllgwyngyll-right-article"
 >
 
 <div class="ellipsis">
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 </div>
 </button>
 </div>
 <article
 id="llanfairpwllgwyngyll-right-article"
 class="accordion-body accordion-collapse collapse"
 data-bs-parent="#accordion-right-tabs"
 aria-labelledby="llanfairpwllgwyngyll-right-tab"
 >
 <h1>
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 </h1>
 <section>
 <p>
 <small>From Wikipedia, the free encyclopedia</small>
 </p>
 </section>
 <section>
 <p>
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 (pronounced
 [ˌɬanvairpʊɬˌɡwɨ̞ŋɡɨ̞ɬɡɔˌɡɛrəˌχwərnˌdrɔbʊɬˌɬantəˌsɪljɔˌɡɔɡɔˈɡoːχ]
 in Welsh), official short form name Llanfairpwllgwyngyll
 (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]), also spelled Llanfair
 Pwllgwyngyll, is a large village and local government
 community on the island of Anglesey in Wales. It is
 situated on the Menai Strait next to the Britannia Bridge
 and across the strait from Bangor. While the official
 short form name is used in official contexts, both the
 full name and shortened (Llanfairpwll or Llanfair PG)
 forms of the place name are used in various contexts.
 </p>
 <p>
 <a
 href="#"
 target="_blank"
 title="Open Wikipedia article in a new tab."
 >Full article &gt;</a
 >
 </p>
 </section>
 </article>
 </div>
 </div>
 </div>
 </div>

<div class="col-md-3">
 <ul class="nav nav-tabs right-tabs" role="tablist">
 <li class="nav-item" role="presentation">
 <div
 id="lorem-right-tab"
 class="nav-link tab-clickable active"
 role="tab"
 data-bs-toggle="tab"
 data-bs-target="#lorem-right"
 aria-controls="lorem-right"
 aria-selected="true"
 >
 Lorem
 </div>
 </li>
 <li class="nav-item" role="presentation">
 <div
 id="sapien-right-tab"
 class="nav-link tab-clickable"
 role="tab"
 data-bs-toggle="tab"
 data-bs-target="#sapien-right"
 aria-controls="sapien-right"
 aria-selected="false"
 >
 Sapien
 </div>
 </li>
 <li class="nav-item" role="presentation">
 
 <div
 id="llanfairpwllgwyngyll-right-tab"
 class="nav-link tab-clickable"
 role="tab"
 title="Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch"
 data-bs-toggle="tab"
 data-bs-target="#llanfairpwllgwyngyll-right"
 aria-controls="llanfairpwllgwyngyll-right"
 aria-selected="false"
 >
 Llanfairpwllgwyngyllgogerychwyrn
 </div>
 </li>
 </ul>
 </div>
 </div>

<div class="row">
 <div class="col-md-12">
 <hr />
 <h3>Left Sideways Tabs</h3>
 <hr />
 </div>
 </div>

<div class="row">
 
 <div class="col-md-1">
 <ul class="nav nav-tabs left-tabs sideways-tabs" role="tablist">
 <li class="nav-item" role="presentation">
 <div
 id="lorem-sideways-left-tab"
 class="nav-link tab-clickable active"
 role="tab"
 data-bs-toggle="tab"
 data-bs-target="#lorem-sideways-left"
 aria-controls="lorem-sideways-left"
 aria-selected="true"
 >
 Lorem
 </div>
 </li>
 <li class="nav-item" role="presentation">
 <div
 id="sapien-sideways-left-tab"
 class="nav-link tab-clickable"
 role="tab"
 data-bs-toggle="tab"
 data-bs-target="#sapien-sideways-left"
 aria-controls="sapien-sideways-left"
 aria-selected="false"
 >
 Sapien
 </div>
 </li>
 <li class="nav-item" role="presentation">
 
 <div
 id="llanfairpwllgwyngyll-sideways-left-tab"
 class="nav-link tab-clickable"
 role="tab"
 title="Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch"
 data-bs-toggle="tab"
 data-bs-target="#llanfairpwllgwyngyll-sideways-left"
 aria-controls="llanfairpwllgwyngyll-sideways-left"
 aria-selected="false"
 >
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 </div>
 </li>
 </ul>
 </div>

<div class="col-md-11">
 <div class="container">
 <div
 id="accordion-sideways-left-tabs"
 class="tab-content accordion"
 >
 
 
 <div
 id="lorem-sideways-left"
 class="tab-pane fade show active accordion-item"
 role="tabpanel"
 >
 <div class="accordion-header" role="tab">
 <button
 class="accordion-button collapsed"
 type="button"
 role="button"
 data-bs-toggle="collapse"
 data-bs-target="#lorem-sideways-left-article"
 aria-expanded="true"
 aria-controls="lorem-sideways-left-article"
 >
 Lorem
 </button>
 </div>
 <article
 id="lorem-sideways-left-article"
 class="accordion-body accordion-collapse collapse"
 data-bs-parent="#accordion-sideways-left-tabs"
 aria-labelledby="lorem-sideways-left-tab"
 >
 <h1>Lorem</h1>
 <section>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
 do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed
 cras ornare. Diam vulputate ut pharetra sit amet. Orci ac
 auctor augue mauris augue neque. Turpis massa sed elementum
 tempus egestas.
 </section>
 </article>
 </div>

<div
 id="sapien-sideways-left"
 class="tab-pane fade accordion-item"
 role="tabpanel"
 >
 <div class="accordion-header" role="tab">
 <button
 class="accordion-button collapsed"
 type="button"
 role="button"
 data-bs-toggle="collapse"
 data-bs-target="#sapien-sideways-left-article"
 aria-expanded="false"
 aria-controls="sapien-sideways-left-article"
 >
 Sapien
 </button>
 </div>

<article
 id="sapien-sideways-left-article"
 class="accordion-body accordion-collapse collapse"
 data-bs-parent="#accordion-sideways-left-tabs"
 aria-labelledby="sapien-sideways-left-tab"
 >
 <h1>Sapien</h1>
 <section>
 Sapien et ligula ullamcorper malesuada proin. Enim nulla
 aliquet porttitor lacus luctus accumsan. Phasellus egestas
 tellus rutrum tellus pellentesque eu. Morbi leo urna
 molestie at. Ac odio tempor orci dapibus ultrices in iaculis
 nunc. Consequat nisl vel pretium lectus quam id leo in
 vitae. Proin sagittis nisl rhoncus mattis rhoncus urna
 neque. Vulputate dignissim suspendisse in est ante. Luctus
 venenatis lectus magna fringilla urna porttitor rhoncus
 dolor. Quis auctor elit sed vulputate mi sit amet mauris
 commodo.
 </section>
 </article>
 </div>

<div
 id="llanfairpwllgwyngyll-sideways-left"
 class="tab-pane fade accordion-item"
 role="tabpanel"
 >
 <div class="accordion-header" role="tab">
 <button
 class="accordion-button collapsed"
 type="button"
 role="button"
 data-bs-toggle="collapse"
 data-bs-target="#llanfairpwllgwyngyll-sideways-left-article"
 aria-expanded="false"
 aria-controls="llanfairpwllgwyngyll-sideways-left-article"
 >
 
 <div class="ellipsis">
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 </div>
 </button>
 </div>
 <article
 id="llanfairpwllgwyngyll-sideways-left-article"
 class="accordion-body accordion-collapse collapse"
 data-bs-parent="#accordion-sideways-left-tabs"
 aria-labelledby="llanfairpwllgwyngyll-sideways-left-tab"
 >
 <h1>
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 </h1>
 <section>
 <p>
 <small>From Wikipedia, the free encyclopedia</small>
 </p>
 </section>
 <section>
 <p>
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 (pronounced
 [ˌɬanvairpʊɬˌɡwɨ̞ŋɡɨ̞ɬɡɔˌɡɛrəˌχwərnˌdrɔbʊɬˌɬantəˌsɪljɔˌɡɔɡɔˈɡoːχ]
 in Welsh), official short form name Llanfairpwllgwyngyll
 (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]), also spelled Llanfair
 Pwllgwyngyll, is a large village and local government
 community on the island of Anglesey in Wales. It is
 situated on the Menai Strait next to the Britannia Bridge
 and across the strait from Bangor. While the official
 short form name is used in official contexts, both the
 full name and shortened (Llanfairpwll or Llanfair PG)
 forms of the place name are used in various contexts.
 </p>
 <p>
 <a
 href="#"
 target="_blank"
 title="Open Wikipedia article in a new tab."
 >Full article &gt;</a
 >
 </p>
 </section>
 </article>
 </div>
 </div>
 </div>
 </div>
 </div>

<div class="row">
 <div class="col-md-12">
 <hr />
 <h3>Right Sideways Tabs</h3>
 <hr />
 </div>
 </div>

<div class="row">
 
 <div class="col-md-11">
 <div class="container">
 <div
 id="accordion-sideways-right-tabs"
 class="tab-content accordion"
 >
 
 
 <div
 id="lorem-sideways-right"
 class="tab-pane fade show active accordion-item"
 role="tabpanel"
 >
 <div class="accordion-header" role="tab">
 <button
 class="accordion-button collapsed"
 type="button"
 role="button"
 data-bs-toggle="collapse"
 data-bs-target="#lorem-sideways-right-article"
 aria-expanded="true"
 aria-controls="lorem-sideways-right-article"
 >
 Lorem
 </button>
 </div>
 <article
 id="lorem-sideways-right-article"
 class="accordion-body accordion-collapse collapse"
 data-bs-parent="#accordion-sideways-right-tabs"
 aria-labelledby="lorem-sideways-right-tab"
 >
 <h1>Lorem</h1>
 <section>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
 do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed
 cras ornare. Diam vulputate ut pharetra sit amet. Orci ac
 auctor augue mauris augue neque. Turpis massa sed elementum
 tempus egestas.
 </section>
 </article>
 </div>

<div
 id="sapien-sideways-right"
 class="tab-pane fade accordion-item"
 role="tabpanel"
 >
 <div class="accordion-header" role="tab">
 <button
 class="accordion-button collapsed"
 type="button"
 role="button"
 data-bs-toggle="collapse"
 data-bs-target="#sapien-sideways-right-article"
 aria-expanded="false"
 aria-controls="sapien-sideways-right-article"
 >
 Sapien
 </button>
 </div>

<article
 id="sapien-sideways-right-article"
 class="accordion-body accordion-collapse collapse"
 data-bs-parent="#accordion-sideways-right-tabs"
 aria-labelledby="sapien-sideways-right-tab"
 >
 <h1>Sapien</h1>
 <section>
 Sapien et ligula ullamcorper malesuada proin. Enim nulla
 aliquet porttitor lacus luctus accumsan. Phasellus egestas
 tellus rutrum tellus pellentesque eu. Morbi leo urna
 molestie at. Ac odio tempor orci dapibus ultrices in iaculis
 nunc. Consequat nisl vel pretium lectus quam id leo in
 vitae. Proin sagittis nisl rhoncus mattis rhoncus urna
 neque. Vulputate dignissim suspendisse in est ante. Luctus
 venenatis lectus magna fringilla urna porttitor rhoncus
 dolor. Quis auctor elit sed vulputate mi sit amet mauris
 commodo.
 </section>
 </article>
 </div>

<div
 id="llanfairpwllgwyngyll-sideways-right"
 class="tab-pane fade accordion-item"
 role="tabpanel"
 >
 <div class="accordion-header" role="tab">
 <button
 class="accordion-button collapsed"
 type="button"
 role="button"
 data-bs-toggle="collapse"
 data-bs-target="#llanfairpwllgwyngyll-sideways-right-article"
 aria-expanded="false"
 aria-controls="llanfairpwllgwyngyll-sideways-right-article"
 >
 
 <div class="ellipsis">
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 </div>
 </button>
 </div>
 <article
 id="llanfairpwllgwyngyll-sideways-right-article"
 class="accordion-body accordion-collapse collapse"
 data-bs-parent="#accordion-sideways-right-tabs"
 aria-labelledby="llanfairpwllgwyngyll-sideways-right-tab"
 >
 <h1>
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 </h1>
 <section>
 <p>
 <small>From Wikipedia, the free encyclopedia</small>
 </p>
 </section>
 <section>
 <p>
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 (pronounced
 [ˌɬanvairpʊɬˌɡwɨ̞ŋɡɨ̞ɬɡɔˌɡɛrəˌχwərnˌdrɔbʊɬˌɬantəˌsɪljɔˌɡɔɡɔˈɡoːχ]
 in Welsh), official short form name Llanfairpwllgwyngyll
 (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]), also spelled Llanfair
 Pwllgwyngyll, is a large village and local government
 community on the island of Anglesey in Wales. It is
 situated on the Menai Strait next to the Britannia Bridge
 and across the strait from Bangor. While the official
 short form name is used in official contexts, both the
 full name and shortened (Llanfairpwll or Llanfair PG)
 forms of the place name are used in various contexts.
 </p>
 <p>
 <a
 href="#"
 target="_blank"
 title="Open Wikipedia article in a new tab."
 >Full article &gt;</a
 >
 </p>
 </section>
 </article>
 </div>
 </div>
 </div>
 </div>

<div class="col-md-1">
 <ul class="nav nav-tabs right-tabs sideways-tabs" role="tablist">
 <li class="nav-item" role="presentation">
 <div
 id="lorem-sideways-right-tab"
 class="nav-link tab-clickable active"
 role="tab"
 data-bs-toggle="tab"
 data-bs-target="#lorem-sideways-right"
 aria-controls="lorem-sideways-right"
 aria-selected="true"
 >
 Lorem
 </div>
 </li>
 <li class="nav-item" role="presentation">
 <div
 id="sapien-sideways-right-tab"
 class="nav-link tab-clickable"
 role="tab"
 data-bs-toggle="tab"
 data-bs-target="#sapien-sideways-right"
 aria-controls="sapien-sideways-right"
 aria-selected="false"
 >
 Sapien
 </div>
 </li>
 <li class="nav-item" role="presentation">
 
 <div
 id="llanfairpwllgwyngyll-sideways-right-tab"
 class="nav-link tab-clickable"
 role="tab"
 title="Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch"
 data-bs-toggle="tab"
 data-bs-target="#llanfairpwllgwyngyll-sideways-right"
 aria-controls="llanfairpwllgwyngyll-sideways-right"
 aria-selected="false"
 >
 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 </div>
 </li>
 </ul>
 </div>
 </div>

<div class="row">
 <footer class="container text-center">
 <hr />
 <small
 >That's all folks!<br />&copy; 2020-2021
 <a href="https://github.com/tromgy">Tromgy</a><br
 /></small>
 </footer>
 </div>
 </div>

<script
 src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
 integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
 crossorigin="anonymous"
 ></script>
 </body>
</html>

BootstrapTema

Bootstrap Vertical Tabs - Бутстрап 5 и 4 табы

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0