1592 lines
66 KiB
HTML
1592 lines
66 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Required Meta Tags Always Come First -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<!-- Title -->
|
||
<title>List Group - Documentation | Front - Multipurpose Responsive Template</title>
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="../favicon.ico">
|
||
|
||
<!-- Font -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||
|
||
<!-- CSS Implementing Plugins -->
|
||
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<link rel="stylesheet" href="../assets/css/theme.min.css">
|
||
<link rel="stylesheet" href="../assets/css/docs.min.css">
|
||
</head>
|
||
|
||
<body class="navbar-sidebar-aside-lg">
|
||
<!-- ========== HEADER ========== -->
|
||
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
||
<div class="container-fluid">
|
||
<nav class="navbar-nav-wrap">
|
||
<div class="row flex-grow-1">
|
||
<!-- Default Logo -->
|
||
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
||
<a class="navbar-brand" href="../documentation/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<div class="col-md px-lg-0">
|
||
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
||
<div class="d-none d-md-block">
|
||
<!-- Search Form -->
|
||
<form id="docsSearch" class="position-relative"
|
||
data-hs-list-options='{
|
||
"searchMenu": true,
|
||
"keyboard": true,
|
||
"item": "searchTemplate",
|
||
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
||
"empty": "#searchNoResults"
|
||
}'>
|
||
<!-- Input Group -->
|
||
<div class="input-group input-group-merge navbar-input-group">
|
||
<div class="input-group-prepend input-group-text">
|
||
<i class="bi-search"></i>
|
||
</div>
|
||
|
||
<input type="search" class="search form-control form-control-sm" placeholder="Search in docs" aria-label="Search in docs">
|
||
|
||
<a class="input-group-append input-group-text" href="javascript:;">
|
||
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
||
</a>
|
||
</div>
|
||
<!-- End Input Group -->
|
||
|
||
<!-- List -->
|
||
<div class="list dropdown-menu navbar-dropdown-menu-borderless w-100 overflow-auto" style="max-height: 16rem;"></div>
|
||
<!-- End List -->
|
||
|
||
<!-- Empty -->
|
||
<div id="searchNoResults" style="display: none;">
|
||
<div class="text-center p-4">
|
||
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
|
||
<p class="mb-0">No Results</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Empty -->
|
||
</form>
|
||
<!-- End Search Form -->
|
||
|
||
<!-- List Item Template -->
|
||
<div class="d-none">
|
||
<div id="searchTemplate" class="dropdown-item">
|
||
<a class="d-block link" href="#">
|
||
<span class="category d-block fw-normal text-muted mb-1"></span>
|
||
<span class="component text-dark"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End List Item Template -->
|
||
</div>
|
||
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav p-0">
|
||
<li class="nav-item">
|
||
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
||
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="btn btn-primary btn-sm" href="../index.html">
|
||
<i class="bi-eye me-1"></i> Preview Demo
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Navbar -->
|
||
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
||
data-hs-nav-scroller-options='{
|
||
"type": "vertical",
|
||
"target": ".navbar-nav .active",
|
||
"offset": 80
|
||
}'>
|
||
<!-- Navbar Toggle -->
|
||
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
||
<span class="d-flex justify-content-between align-items-center">
|
||
<span class="h3 mb-0">Nav menu</span>
|
||
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
<!-- End Navbar Toggle -->
|
||
|
||
<!-- Navbar Collapse -->
|
||
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
||
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
||
<!-- Default Logo -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<a class="navbar-brand" href="../documentation/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment nav-fill nav-justified">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../documentation/index.html">Docs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../snippets/index.html">Snippets</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
|
||
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
||
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Documentation</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/index.html">Introduction</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Getting started</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/getting-started.html">Getting Started</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/gulp.html">Gulp</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/customization.html">Customization</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/credits.html">Credits</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/changelog.html">Changelog</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Design & Graphics</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/bs-icons.html">Bootstrap Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/duotone-icons.html">Duotone Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/illustrations.html">Illustrations</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Components</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/accordion.html">Accordion</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/alerts.html">Alerts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/avatars.html">Avatars</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/badge.html">Badge</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/buttons.html">Buttons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/cards.html">Cards</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/collapse.html">Collapse</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/column-divider.html">Column Divider</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/devices.html">Devices</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/divider.html">Divider</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/dropdowns.html">Dropdowns</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/icons.html">Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../documentation/list-group.html">List Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/lists.html">Lists</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/legend-indicator.html">Legend Indicator</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/modal.html">Modal</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/offcanvas.html">Offcanvas</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/page-header.html">Page Header</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/pagination.html">Pagination</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/popovers.html">Popovers</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/progress.html">Progress</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/profile.html">Profile</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/shapes.html">Shapes</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/spinners.html">Spinners</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/steps.html">Steps</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tab.html">Tab</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tables.html">Tables</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/text-highlight.html">Text Highlight</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toasts.html">Toasts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tooltips.html">Tooltips</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/typography.html">Typography</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Navbars</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navbar.html">Navbar</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navs.html">Navs</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/mega-menu.html">Mega Menu</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/scrollspy.html">Scrollspy</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Basic forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/basic-forms.html">Basic Forms</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/checks-and-switches.html">Checks & Switches</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/input-group.html">Input Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Advanced Forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/select.html">Advanced Select</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/file-attachments.html">File Attachments</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/dropzone.html">Drag’ n’ Drop File Uploads</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/quill.html">WYSIWYG Editor</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/quantity-counter.html">Quantity Counter</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/input-mask.html">Input Mask</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/step-forms.html">Step Forms (Wizards)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/range-slider.html">Range Slider (noUiSlider)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/add-field.html">Add Field</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-password.html">Toggle Password</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/count-characters.html">Count Characters</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-switch.html">Toggle Switch</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-state.html">Toggle State</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/switch.html">Switch</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Media</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/fslightbox.html">Fullscreen Lightbox</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/video-bg.html">Video Background</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/video-player.html">Video Player</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/swiper.html">Swiper</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Others</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/maps-leaflet.html">Maps (Leaflet)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/chartjs.html">Chart.js</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/circles.html">Circles.js (Pie Chart)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sticky-block.html">Sticky Block</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/countdown.html">Countdown</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sorting.html">Sorting (Shuffle.js)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/go-to.html">Go To</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/show-animation.html">Show Animation</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/typedjs.html">Typed.js</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Utilities</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/backgrounds.html">Backgrounds</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/borders.html">Borders</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/colors.html">Colors</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/links.html">Links</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/position.html">Position</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/rotations.html">Rotations</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/shadows.html">Shadows</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sizing.html">Sizing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/spacing.html">Spacing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/z-index.html">Z-index</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar Collapse -->
|
||
</nav>
|
||
<!-- End Navbar -->
|
||
|
||
<!-- Content -->
|
||
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
||
<!-- Page Header -->
|
||
<div class="docs-page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-sm">
|
||
<h1 class="docs-page-header-title">List Group</h1>
|
||
<p class="docs-page-header-text">List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.</p>
|
||
<a class="link" href="https://getbootstrap.com/docs/5.0/components/list-group/" target="_blank">Bootstrap List Group documentation <i class="bi-box-arrow-up-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Page Header -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="basic-example" class="hs-docs-heading">
|
||
Basic example <a class="anchorjs-link" href="#basic-example" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab1" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab1" href="#nav-result1" data-bs-toggle="pill" data-bs-target="#nav-result1" role="tab" aria-controls="nav-result1" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent1">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result1" role="tabpanel" aria-labelledby="nav-resultTab1">
|
||
<!-- List Group -->
|
||
<ul class="list-group" style="max-width: 450px;">
|
||
<li class="list-group-item active">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- List Group -->
|
||
<ul class="list-group">
|
||
<li class="list-group-item active">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="sizes" class="hs-docs-heading">
|
||
Sizes <a class="anchorjs-link" href="#sizes" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.list-group-sm</code> class.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab10" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab10" data-toggle="pill" href="#nav-result10" role="tab" aria-controls="nav-result10" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab10" data-toggle="pill" href="#nav-html10" role="tab" aria-controls="nav-html10" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent10">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result10" role="tabpanel" aria-labelledby="nav-resultTab10">
|
||
<!-- List Group -->
|
||
<ul class="list-group list-group-sm" style="max-width: 450px;">
|
||
<li class="list-group-item">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html10" role="tabpanel" aria-labelledby="nav-htmlTab10">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- List Group -->
|
||
<ul class="list-group list-group-sm">
|
||
<li class="list-group-item">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<p>Use <code>.list-group-lg</code> class.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab11" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab11" data-toggle="pill" href="#nav-result11" role="tab" aria-controls="nav-result11" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab11" data-toggle="pill" href="#nav-html11" role="tab" aria-controls="nav-html11" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent11">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result11" role="tabpanel" aria-labelledby="nav-resultTab11">
|
||
<!-- List Group -->
|
||
<ul class="list-group list-group-lg" style="max-width: 450px;">
|
||
<li class="list-group-item">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html11" role="tabpanel" aria-labelledby="nav-htmlTab11">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- List Group -->
|
||
<ul class="list-group list-group-lg">
|
||
<li class="list-group-item">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="links-and-buttons" class="hs-docs-heading">
|
||
Links and buttons <a class="anchorjs-link" href="#links-and-buttons" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code><a></code>s or <code><button></code>s to create <em>actionable</em> list group items with hover, disabled, and active states by adding <code>.list-group-item-action</code>. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <code><li></code>s or <code><div></code>s) don’t provide a click or tap affordance.</p>
|
||
|
||
<p>Be sure to <span class="fw-semi-bold">not use the standard <code>.btn</code> classes here</span>.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab2" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab2" href="#nav-result2" data-bs-toggle="pill" data-bs-target="#nav-result2" role="tab" aria-controls="nav-result2" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab2" href="#nav-html2" data-bs-toggle="pill" data-bs-target="#nav-html2" role="tab" aria-controls="nav-html2" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent2">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result2" role="tabpanel" aria-labelledby="nav-resultTab2">
|
||
<!-- List Group -->
|
||
<div class="list-group" style="max-width: 450px;">
|
||
<a class="list-group-item list-group-item-action active" href="#">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</a>
|
||
<a class="list-group-item list-group-item-action" href="#">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</a>
|
||
<a class="list-group-item list-group-item-action" href="#">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</a>
|
||
<a class="list-group-item list-group-item-action" href="#">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</a>
|
||
<a class="list-group-item list-group-item-action" href="#">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</a>
|
||
</div>
|
||
<!-- End List Group -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- List Group -->
|
||
<div class="list-group">
|
||
<a class="list-group-item list-group-item-action active" href="#">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</a>
|
||
<a class="list-group-item list-group-item-action" href="#">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</a>
|
||
<a class="list-group-item list-group-item-action" href="#">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</a>
|
||
<a class="list-group-item list-group-item-action" href="#">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</a>
|
||
<a class="list-group-item list-group-item-action" href="#">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</a>
|
||
</div>
|
||
<!-- End List Group -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="flush" class="hs-docs-heading">
|
||
Flush <a class="anchorjs-link" href="#flush" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Add <code>.list-group-flush</code> to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab3" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab3" href="#nav-result3" data-bs-toggle="pill" data-bs-target="#nav-result3" role="tab" aria-controls="nav-result3" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab3" href="#nav-html3" data-bs-toggle="pill" data-bs-target="#nav-html3" role="tab" aria-controls="nav-html3" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent3">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
||
<!-- List Group -->
|
||
<ul class="list-group list-group-flush" style="max-width: 450px;">
|
||
<li class="list-group-item">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- List Group -->
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="striped" class="hs-docs-heading">
|
||
Striped <a class="anchorjs-link" href="#striped" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.list-group-striped</code> to add zebra-striping to list items.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab12" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab12" href="#nav-result12" data-bs-toggle="pill" data-bs-target="#nav-result12" role="tab" aria-controls="nav-result12" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab12" href="#nav-html12" data-bs-toggle="pill" data-bs-target="#nav-html12" role="tab" aria-controls="nav-html12" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent12">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result12" role="tabpanel" aria-labelledby="nav-resultTab12">
|
||
<!-- List Group -->
|
||
<ul class="list-group list-group-striped" style="max-width: 450px;">
|
||
<li class="list-group-item">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html12" role="tabpanel" aria-labelledby="nav-htmlTab12">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- List Group -->
|
||
<ul class="list-group list-group-striped">
|
||
<li class="list-group-item">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="numbered" class="hs-docs-heading">
|
||
Numbered <a class="anchorjs-link" href="#numbered" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Add the <code>.list-group-numbered</code> modifier class (and optionally use an <code><ol></code> element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <code><ol></code>s default browser styling) for better placement inside list group items and to allow for better customization.</p>
|
||
|
||
<p>Numbers are generated by <code>counter-reset</code> on the <code><ol></code>, and then styled and placed with a <code>::before</code> psuedo-element on the <code><li></code> with <code>counter-increment</code> and <code>content</code>.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab4" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab4" href="#nav-result4" data-bs-toggle="pill" data-bs-target="#nav-result4" role="tab" aria-controls="nav-result4" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab4" href="#nav-html4" data-bs-toggle="pill" data-bs-target="#nav-html4" role="tab" aria-controls="nav-html4" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent4">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result4" role="tabpanel" aria-labelledby="nav-resultTab4">
|
||
<!-- List Group -->
|
||
<ol class="list-group list-group-numbered">
|
||
<li class="list-group-item">Cras justo odio</li>
|
||
<li class="list-group-item">Cras justo odio</li>
|
||
<li class="list-group-item">Cras justo odio</li>
|
||
</ol>
|
||
<!-- End List Group -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- List Group -->
|
||
<ol class="list-group list-group-numbered">
|
||
<li class="list-group-item">Cras justo odio</li>
|
||
<li class="list-group-item">Cras justo odio</li>
|
||
<li class="list-group-item">Cras justo odio</li>
|
||
</ol>
|
||
<!-- End List Group -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<p>These work great with custom content as well.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab5" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab5" href="#nav-result5" data-bs-toggle="pill" data-bs-target="#nav-result5" role="tab" aria-controls="nav-result5" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab5" href="#nav-html5" data-bs-toggle="pill" data-bs-target="#nav-html5" role="tab" aria-controls="nav-html5" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent5">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result5" role="tabpanel" aria-labelledby="nav-resultTab5">
|
||
<!-- List Group -->
|
||
<ol class="list-group list-group-numbered">
|
||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||
<div class="ms-2 me-auto">
|
||
<div class="fw-semi-bold">Subheading</div>
|
||
Cras justo odio
|
||
</div>
|
||
<span class="badge bg-primary rounded-pill">14</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||
<div class="ms-2 me-auto">
|
||
<div class="fw-semi-bold">Subheading</div>
|
||
Cras justo odio
|
||
</div>
|
||
<span class="badge bg-primary rounded-pill">14</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||
<div class="ms-2 me-auto">
|
||
<div class="fw-semi-bold">Subheading</div>
|
||
Cras justo odio
|
||
</div>
|
||
<span class="badge bg-primary rounded-pill">14</span>
|
||
</li>
|
||
</ol>
|
||
<!-- End List Group -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html5" role="tabpanel" aria-labelledby="nav-htmlTab5">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<ol class="list-group list-group-numbered">
|
||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||
<div class="ms-2 me-auto">
|
||
<div class="fw-semi-bold">Subheading</div>
|
||
Cras justo odio
|
||
</div>
|
||
<span class="badge bg-primary rounded-pill">14</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||
<div class="ms-2 me-auto">
|
||
<div class="fw-semi-bold">Subheading</div>
|
||
Cras justo odio
|
||
</div>
|
||
<span class="badge bg-primary rounded-pill">14</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||
<div class="ms-2 me-auto">
|
||
<div class="fw-semi-bold">Subheading</div>
|
||
Cras justo odio
|
||
</div>
|
||
<span class="badge bg-primary rounded-pill">14</span>
|
||
</li>
|
||
</ol>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="horizontal" class="hs-docs-heading">
|
||
Horizontal <a class="anchorjs-link" href="#horizontal" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Add <code>.list-group-horizontal</code> to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant <code>.list-group-horizontal-{sm|md|lg|xl|xxl}</code> to make a list group horizontal starting at that breakpoint’s <code>min-width</code>. Currently <strong>horizontal list groups cannot be combined with flush list groups.</strong></p>
|
||
|
||
<p><strong>ProTip:</strong> Want equal-width list group items when horizontal? Add <code>.flex-fill</code> to each list group item.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab6" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab6" href="#nav-result6" data-bs-toggle="pill" data-bs-target="#nav-result6" role="tab" aria-controls="nav-result6" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab6" href="#nav-html6" data-bs-toggle="pill" data-bs-target="#nav-html6" role="tab" aria-controls="nav-html6" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent6">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result6" role="tabpanel" aria-labelledby="nav-resultTab6">
|
||
<!-- List Group -->
|
||
<ul class="list-group list-group-horizontal" style="max-width: 450px;">
|
||
<li class="list-group-item d-sm-flex align-items-sm-center">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</li>
|
||
<li class="list-group-item d-sm-flex align-items-sm-center">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</li>
|
||
<li class="list-group-item d-sm-flex align-items-sm-center">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html6" role="tabpanel" aria-labelledby="nav-htmlTab6">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- List Group -->
|
||
<ul class="list-group list-group-horizontal">
|
||
<li class="list-group-item d-sm-flex align-items-sm-center">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
</li>
|
||
<li class="list-group-item d-sm-flex align-items-sm-center">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
</li>
|
||
<li class="list-group-item d-sm-flex align-items-sm-center">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-layers list-group-icon"></i> Projects
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="bi-people list-group-icon"></i> Members
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="with-badges" class="hs-docs-heading">
|
||
With badges <a class="anchorjs-link" href="#with-badges" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Add badges to any list group item to show unread counts, activity, and more with the help of some <a class="link" href="http://getbootstrap.com/docs/4.5/utilities/flex/">utilities</a>.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab7" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab7" href="#nav-result7" data-bs-toggle="pill" data-bs-target="#nav-result7" role="tab" aria-controls="nav-result7" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab7" href="#nav-html7" data-bs-toggle="pill" data-bs-target="#nav-html7" role="tab" aria-controls="nav-html7" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent7">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result7" role="tabpanel" aria-labelledby="nav-resultTab7">
|
||
<!-- List Group -->
|
||
<ul class="list-group" style="max-width: 450px;">
|
||
<li class="list-group-item d-flex align-items-center">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
<span class="badge bg-primary rounded-pill ms-auto">14</span>
|
||
</li>
|
||
<li class="list-group-item d-flex align-items-center">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
<span class="badge bg-primary rounded-pill ms-auto">2</span>
|
||
</li>
|
||
<li class="list-group-item d-flex align-items-center">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
<span class="badge bg-primary rounded-pill ms-auto">1</span>
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html7" role="tabpanel" aria-labelledby="nav-htmlTab7">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- List Group -->
|
||
<ul class="list-group">
|
||
<li class="list-group-item d-flex align-items-center">
|
||
<i class="bi-house list-group-icon"></i> Dashboard
|
||
<span class="badge bg-primary rounded-pill ms-auto">14</span>
|
||
</li>
|
||
<li class="list-group-item d-flex align-items-center">
|
||
<i class="bi-person list-group-icon"></i> Profile
|
||
<span class="badge bg-primary rounded-pill ms-auto">2</span>
|
||
</li>
|
||
<li class="list-group-item d-flex align-items-center">
|
||
<i class="bi-list-task list-group-icon"></i> Tasks
|
||
<span class="badge bg-primary rounded-pill ms-auto">1</span>
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="checkboxes-and-radios" class="hs-docs-heading">
|
||
Checkboxes and radios <a class="anchorjs-link" href="#checkboxes-and-radios" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <code><label></code>s, but please remember to include an <code>aria-label</code> attribute and value for accessibility.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab8" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab8" href="#nav-result8" data-bs-toggle="pill" data-bs-target="#nav-result8" role="tab" aria-controls="nav-result8" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab8" href="#nav-html8" data-bs-toggle="pill" data-bs-target="#nav-html8" role="tab" aria-controls="nav-html8" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent8">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result8" role="tabpanel" aria-labelledby="nav-resultTab8">
|
||
<!-- List Group -->
|
||
<ul class="list-group">
|
||
<li class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||
First checkbox
|
||
</li>
|
||
<li class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||
Second checkbox
|
||
</li>
|
||
<li class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||
Third checkbox
|
||
</li>
|
||
<li class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||
Fourth checkbox
|
||
</li>
|
||
<li class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||
Fifth checkbox
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html8" role="tabpanel" aria-labelledby="nav-htmlTab8">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- List Group -->
|
||
<ul class="list-group">
|
||
<li class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||
First checkbox
|
||
</li>
|
||
<li class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||
Second checkbox
|
||
</li>
|
||
<li class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||
Third checkbox
|
||
</li>
|
||
<li class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||
Fourth checkbox
|
||
</li>
|
||
<li class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||
Fifth checkbox
|
||
</li>
|
||
</ul>
|
||
<!-- End List Group -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<p>And if you want <code><label></code>s as the <code>.list-group-item</code> for large hit areas, you can do that, too.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab9" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab9" href="#nav-result9" data-bs-toggle="pill" data-bs-target="#nav-result9" role="tab" aria-controls="nav-result9" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab9" href="#nav-html9" data-bs-toggle="pill" data-bs-target="#nav-html9" role="tab" aria-controls="nav-html9" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent9">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result9" role="tabpanel" aria-labelledby="nav-resultTab9">
|
||
<!-- List Group -->
|
||
<div class="list-group">
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
First checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Second checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Third checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Fourth checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Fifth checkbox
|
||
</label>
|
||
</div>
|
||
<!-- End List Group -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html9" role="tabpanel" aria-labelledby="nav-htmlTab9">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<div class="list-group">
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
First checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Second checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Third checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Fourth checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Fifth checkbox
|
||
</label>
|
||
</div>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Content -->
|
||
</main>
|
||
<!-- ========== END MAIN CONTENT ========== -->
|
||
|
||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||
<!-- Go To -->
|
||
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
||
data-hs-go-to-options='{
|
||
"offsetTop": 700,
|
||
"position": {
|
||
"init": {
|
||
"right": "2rem"
|
||
},
|
||
"show": {
|
||
"bottom": "2rem"
|
||
},
|
||
"hide": {
|
||
"bottom": "-2rem"
|
||
}
|
||
}
|
||
}'>
|
||
<i class="bi-chevron-up"></i>
|
||
</a>
|
||
<!-- ========== END SECONDARY CONTENTS ========== -->
|
||
|
||
<!-- JS Global Compulsory -->
|
||
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
||
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
||
<script src="../assets/vendor/list.js/dist/list.min.js"></script>
|
||
<script src="../assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
||
<script src="../assets/vendor/prism/prism.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="../assets/js/theme.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF HEADER
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
|
||
// INITIALIZATION OF NAV SCROLLER
|
||
// =======================================================
|
||
new HsNavScroller('.js-nav-scroller', {
|
||
delay: 400,
|
||
offset: 140
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF LISTJS COMPONENT
|
||
// =======================================================
|
||
const docsSearch = HSCore.components.HSList.init('#docsSearch')
|
||
|
||
|
||
// GET JSON FILE RESULTS
|
||
// =======================================================
|
||
fetch('../assets/json/docs-search.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
docsSearch.getItem(0).add(data)
|
||
})
|
||
|
||
// INITIALIZATION OF GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|