Willian_Anggi_Devayu
/
E31221315_AnalisisSentimen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
E31221315_AnalisisSentimen/public/documentation/components/list-group.html

772 lines
52 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="apple-touch-icon" sizes="76x76" href="https://demos.creative-tim.com/argon-design-system-pro/assets/img/apple-icon.png">
<link rel="icon" href="https://demos.creative-tim.com/argon-design-system-pro/assets/img/apple-icon.png" type="image/png">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Creative Tim">
<title>
List Group | Soft UI Dashboard Bootstrap @ Creative Tim
</title>
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/list-group/soft-ui-dashboard">
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, html css dashboard laravel, soft ui dashboard laravel, laravel soft ui dashboard, soft ui admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, soft ui dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, soft ui dashboard, soft ui laravel bootstrap 5 dashboard" />
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
<meta itemprop="name" content="Soft UI Dashboard Laravel by Creative Tim & UPDIVISION" />
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/602/original/soft-ui-dashboard-laravel.jpg" />
<meta name="twitter:card" content="product" />
<meta name="twitter:site" content="@creativetim" />
<meta name="twitter:title" content="Soft UI Dashboard Laravel by Creative Tim & UPDIVISION" />
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
<meta name="twitter:creator" content="@creativetim" />
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/602/original/soft-ui-dashboard-laravel.jpg" />
<meta property="fb:app_id" content="655968634437471" />
<meta property="og:title" content="Soft UI Dashboard Laravel by Creative Tim & UPDIVISION" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.creative-tim.com/live/soft-ui-dashboard-laravel" />
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/602/original/soft-ui-dashboard-laravel.jpg" />
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
<meta property="og:site_name" content="Creative Tim" />
<link rel="stylesheet" href="https://demos.creative-tim.com/argon-design-system-pro/assets/css/nucleo-icons.css" type="text/css">
<link href="" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://demos.creative-tim.com/test/soft-ui-dashboard-pro/assets/css/soft-ui-dashboard.min.css?v=1.0.0" type="text/css">
<link rel="stylesheet" href="../../assets/demo.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<link href="https://demos.creative-tim.com/argon-design-system-pro/assets/css/nucleo-icons.css" rel="stylesheet">
<script async="" src="https://s.pinimg.com/ct/lib/main.6ae4a9fc.js"></script>
<script type="text/javascript" async="" src="https://s.pinimg.com/ct/core.js"></script>
<script type="text/javascript" async="" src="https://static.hotjar.com/c/hotjar-99526.js?sv=7"></script>
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>
<script type="text/javascript" async="" src="https://www.google-analytics.com/gtm/js?id=GTM-K9BGS8K&amp;cid=1113738810.1638876382&amp;aip=true"></script>
<script src="https://connect.facebook.net/signals/config/111649226022273?v=2.9.48&amp;r=stable" async=""></script>
<script async="" src="//connect.facebook.net/en_US/fbevents.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-NKDMSK6"></script>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
<!-- Anti-flicker snippet (recommended) -->
<style>
.async-hide {
opacity: 0 !important
}
</style>
<script>
(function(a, s, y, n, c, h, i, d, e) {
s.className += ' ' + y;
h.start = 1 * new Date;
h.end = i = function() {
s.className = s.className.replace(RegExp(' ?' + y), '')
};
(a[n] = a[n] || []).hide = h;
setTimeout(function() {
i();
h.end = null
}, c);
h.timeout = c;
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
'GTM-K9BGS8K': true
});
</script>
<!-- Analytics-Optimize Snippet -->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-46172202-22', 'auto', {
allowLinker: true
});
ga('set', 'anonymizeIp', true);
ga('require', 'GTM-K9BGS8K');
ga('require', 'displayfeatures');
ga('require', 'linker');
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
</script>
<!-- end Analytics-Optimize Snippet -->
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
</script>
<!-- End Google Tag Manager -->
<!-- This is for docs typography and layout -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<link href="../../assets/docs-soft.css" rel="stylesheet">
<script async="" src="https://script.hotjar.com/modules.54959b9c945092ba123f.js" charset="utf-8"></script>
<style type="text/css">
iframe#_hjRemoteVarsFrame {display: none !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important;}</style>
<meta http-equiv="origin-trial" content="A13s4hjGQNypqXJtC3txOObvdElWKqJttxI7WhcRiEX0+Y28BmRR2ZTW8rSV659YQd1xb9tpLof5Eehz3SMUXgwAAACHeyJvcmlnaW4iOiJodHRwczovL3d3dy5waW50ZXJlc3QuY29tOjQ0MyIsImZlYXR1cmUiOiJDb252ZXJzaW9uTWVhc3VyZW1lbnQiLCJleHBpcnkiOjE2MzQwODMxOTksImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
</head>
<body class="docs">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6"
height="0"
width="0"
style="display: none; visibility: hidden"
></iframe
></noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="ct-docs-navbar">
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
Creative Tim
</a>
<div class="ct-docs-navbar-border"></div>
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
Docs
</a>
<ul class="ct-docs-navbar-nav-left">
<li class="ct-docs-nav-item-dropdown">
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
</a>
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
<a class="ct-docs-navbar-dropdown-item" href="https://soft-ui-dashboard-laravel.creative-tim.com/" target="_blank">
Soft UI Dashboard
</a>
</div>
</li>
<li class="ct-docs-nav-item-dropdown">
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
</a>
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/soft-ui-dashboard-laravel/issues" target="_blank">
Soft UI Dashboard
</a>
</div>
</li>
</ul>
<ul class="ct-docs-navbar-nav-right">
<li class="ct-docs-navbar-nav-item">
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/soft-ui-dashboard-pro-laravel" target="_blank">Buy Now</a>
</li>
<li class="ct-docs-navbar-nav-item">
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/soft-ui-dashboard-laravel" target="_blank">Download Free</a>
</li>
</ul>
<button class="ct-docs-navbar-toggler" type="button">
<span class="ct-docs-navbar-toggler-icon"></span>
</button>
</header>
<div class="ct-docs-main-container">
<div class="ct-docs-main-content-row">
<div class="ct-docs-sidebar-col">
<nav class="ct-docs-sidebar-collapse-links">
<div class="ct-docs-sidebar-product">
<div class="ct-docs-sidebar-product-image">
<img src="../../assets/img/bootstrap-5.svg">
</div>
<p class="ct-docs-sidebar-product-text">
Soft UI Dashboard
</p>
</div>
<div class="ct-docs-toc-item-active">
<a class="ct-docs-toc-link" href="javascript:void(0)">
<div class="d-inline-block">
<div class="
icon icon-xs
border-radius-md
bg-gradient-warning
text-center
mr-2
d-flex
align-items-center
justify-content-center
me-1
">
<i class="ni ni-active-40 text-white"></i>
</div>
</div>
Getting started
</a>
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
<li class="">
<a href="../../documentation/getting-started/overview.html">
Overview
</a>
</li>
<li class="">
<a href="../../documentation/getting-started/license.html">
License
</a>
</li>
<li class="">
<a href="../../documentation/getting-started/installation.html">
Installation
</a>
</li>
<li class="">
<a href="../../documentation/getting-started/build-tools.html">
Build Tools
</a>
</li>
<li class="">
<a href="../../documentation/getting-started/bootstrap.html">
What is Bootstrap
</a>
</li>
</ul>
</div>
<div class="ct-docs-toc-item-active">
<a class="ct-docs-toc-link" href="javascript:void(0)">
<div class="d-inline-block">
<div class="
icon icon-xs
border-radius-md
bg-gradient-warning
text-center
mr-2
d-flex
align-items-center
justify-content-center
me-1
">
<i class="ni ni-folder-17 text-white"></i>
</div>
</div>
Laravel
</a>
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
<li class="">
<a href="../../documentation/laravel/login.html">
Login
</a>
</li>
<li class="">
<a href="../../documentation/laravel/sign-up.html">
Sign Up
</a>
</li>
<li class="">
<a href="../../documentation/laravel/forgot-password.html">
Forgot Password
</a>
</li>
<li class="">
<a href="../../documentation/laravel/reset-password.html">
Reset Password
</a>
</li>
<li class="">
<a href="../../documentation/laravel/user-profile.html">
User Profile
</a>
</li>
</ul>
</div>
<div class="ct-docs-toc-item-active">
<a class="ct-docs-toc-link" href="javascript:void(0)">
<div class="d-inline-block">
<div class="
icon icon-xs
border-radius-md
bg-gradient-warning
text-center
mr-2
d-flex
align-items-center
justify-content-center
me-1
">
<i class="ni ni-folder-17 text-white"></i>
</div>
</div>
Foundation
</a>
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
<li class="">
<a href="../../documentation/foundation/colors.html">
Colors
</a>
</li>
<li class="">
<a href="../../documentation/foundation/grid.html">
Grid
</a>
</li>
<li class="">
<a href="../../documentation/foundation/typography.html">
Typography
</a>
</li>
<li class="">
<a href="../../documentation/foundation/icons.html">
Icons
</a>
</li>
<li class="">
<a href="../../documentation/foundation/utilities.html">
Utilities
</a>
</li>
</ul>
</div>
<div class="ct-docs-toc-item-active">
<a class="ct-docs-toc-link" href="javascript:void(0)">
<div class="d-inline-block">
<div class="
icon icon-xs
border-radius-md
bg-gradient-warning
text-center
mr-2
d-flex
align-items-center
justify-content-center
me-1
">
<i class="ni ni-app text-white"></i>
</div>
</div>
Components
</a>
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
<li class="">
<a href="../../documentation/components/alerts.html">
Alerts
</a>
</li>
<li class="">
<a href="../../documentation/components/badge.html">
Badge
</a>
</li>
<li class="">
<a href="../../documentation/components/buttons.html">
Buttons
</a>
</li>
<li class="">
<a href="../../documentation/components/social-buttons.html">
Social Buttons
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/components/cards.html">
Cards
</a>
</li>
<li class="">
<a href="../../documentation/components/carousel.html">
Carousel
</a>
</li>
<li class="">
<a href="../../documentation/components/collapse.html">
Collapse
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/components/dropdowns.html">
Dropdowns
</a>
</li>
<li class="">
<a href="../../documentation/components/forms.html">
Forms
</a>
</li>
<li class="">
<a href="../../documentation/components/input-group.html">
Input Group
</a>
</li>
<li class="ct-docs-nav-sidenav-active">
<a href="../../documentation/components/list-group.html">
List Group
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/components/modal.html">
Modal
</a>
</li>
<li class="">
<a href="../../documentation/components/navs.html">
Navs
</a>
</li>
<li class="">
<a href="../../documentation/components/navbar.html">
Navbar
</a>
</li>
<li class="">
<a href="../../documentation/components/pagination.html">
Pagination
</a>
</li>
<li class="">
<a href="../../documentation/components/popovers.html">
Popovers
</a>
</li>
<li class="">
<a href="../../documentation/components/progress.html">
Progress
</a>
</li>
<li class="">
<a href="../../documentation/components/spinners.html">
Spinners
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/components/tables.html">
Tables
</a>
</li>
<li class="">
<a href="../../documentation/components/tooltips.html">
Tooltips
</a>
</li>
</ul>
</div>
<div class="ct-docs-toc-item-active">
<a class="ct-docs-toc-link" href="javascript:void(0)">
<div class="d-inline-block">
<div class="
icon icon-xs
border-radius-md
bg-gradient-warning
text-center
mr-2
d-flex
align-items-center
justify-content-center
me-1
">
<i class="ni ni-settings text-white"></i>
</div>
</div>
Plugins
</a>
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
<li class="">
<a href="../../documentation/plugins/countUpJs.html">
CountUp JS
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/plugins/charts.html">
Charts
</a>
</li>
<li class="">
<a href="../../documentation/plugins/datepicker.html">
Datepicker
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/plugins/fullcalendar.html">
Fullcalendar
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/plugins/sliders.html">
Sliders
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/plugins/choices.html">
Choices
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/plugins/dropzone.html">
Dropzone
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/plugins/datatables.html">
Datatables
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/plugins/kanban.html">
Kanban
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/plugins/photo-swipe.html">
Photo Swipe
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/plugins/quill.html">
Quill
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/plugins/sweet-alerts.html">
Sweet Alerts
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/plugins/threeJs.html">
Three JS
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
<li class="">
<a href="../../documentation/plugins/wizard.html">
Wizard
<span class="ct-docs-sidenav-pro-badge">Pro</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="ct-docs-toc-col">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
<li class="toc-entry toc-h2"><a href="#active-items">Active items</a></li>
<li class="toc-entry toc-h2"><a href="#links">Links</a></li>
<li class="toc-entry toc-h2"><a href="#with-badges">With badges</a></li>
</ul>
</div>
<main class="ct-docs-content-col" role="main">
<div class="ct-docs-page-title">
<h1 class="ct-docs-page-h1-title" id="content">
Bootstrap List Group
</h1>
<span class="ct-docs-page-title-pro-line"> - </span>
<div class="ct-docs-page-title-pro-bage">Pro Component</div>
<div class="avatar-group mt-3">
</div>
</div>
<p class="ct-docs-page-title-lead">Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.</p>
<hr class="ct-docs-hr">
<h2 id="examples">Examples</h2>
<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>
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<div class="position-relative">
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span></code></pre>
</figure>
</div>
<h2 id="active-items">Active items</h2>
<p>Add <code class=" highlighter-rouge language-plaintext">.active</code> to a <code class=" highlighter-rouge language-plaintext">.list-group-item</code> to indicate the current active selection.</p>
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<div class="position-relative">
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item active<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span></code></pre>
</figure>
</div>
<h2 id="links">Links</h2>
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
</div>
<div class="position-relative">
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item list-group-item-action active<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
Cras justo odio
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item list-group-item-action<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item list-group-item-action<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item list-group-item-action<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item list-group-item-action disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></code></pre>
</figure>
</div>
<h2 id="with-badges">With badges</h2>
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
<div class="position-relative">
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item d-flex justify-content-between align-items-center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
Cras justo odio
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge badge-primary badge-pill<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>14<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item d-flex justify-content-between align-items-center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
Dapibus ac facilisis in
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge badge-primary badge-pill<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-group-item d-flex justify-content-between align-items-center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
Morbi leo risus
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge badge-primary badge-pill<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span></code></pre>
</figure>
</div>
</main>
</div>
<div class="ct-docs-main-footer-row">
<div class="ct-docs-main-footer-blank-col">
</div>
<div class="ct-docs-main-footer-col">
<footer class="ct-docs-footer">
<div class="ct-docs-footer-inner-row">
<div class="ct-docs-footer-col">
<div class="ct-docs-footer-copyright">
©
<script>
document.write(
new Date().getFullYear()
);
</script>2021
<a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a>
&amp;
<a href="https://updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
</div>
</div>
<div class="ct-docs-footer-col">
<ul class="ct-docs-footer-nav-footer">
<li>
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
</li>
<li>
<a href="https://updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
</li>
<li>
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
</li>
<li>
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
</li>
</ul>
</div>
</div>
</footer>
</div>
</div>
</div>
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="../../assets/js/plugins/moment.min.js" type="text/javascript"></script>
<script src="../../assets/js/soft-ui-dashboard.min.js" type="text/javascript"></script>
<script src="https://demos.creative-tim.com/argon-design-system-pro/assets/demo/docs.min.js" type="text/javascript"></script>
<script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
</script>
<script>
// Facebook Pixel Code Don't Delete
! function(f, b, e, v, n, t, s) {
if (f.fbq) return;
n = f.fbq = function() {
n.callMethod ?
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
};
if (!f._fbq) f._fbq = n;
n.push = n;
n.loaded = !0;
n.version = '2.0';
n.queue = [];
t = b.createElement(e);
t.async = !0;
t.src = v;
s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s)
}(window,
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
try {
fbq('init', '111649226022273');
fbq('track', "PageView");
} catch (err) {
console.log('Facebook Track Error:', err);
}
</script>
<script src="../../assets/js/docs.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink