mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-16 06:37:02 +03:00
1694 lines
56 KiB
HTML
1694 lines
56 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<title>
|
|
|
|
List groups · Bootstrap Material Design
|
|
|
|
</title>
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:site" content="@FezVrasta">
|
|
<meta name="twitter:creator" content="@FezVrasta">
|
|
|
|
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="List groups">
|
|
<meta name="twitter:description" content="">
|
|
<meta name="twitter:image" content="https://fezvrasta.github.io/assets/brand/bootstrap-social-logo.png">
|
|
|
|
|
|
<!-- Facebook -->
|
|
|
|
<meta property="og:url" content="https://fezvrasta.github.io/docs/4.0/material-design/list-groups/">
|
|
<meta property="og:title" content="List groups">
|
|
<meta property="og:description" content="">
|
|
<meta property="og:type" content="website">
|
|
|
|
<meta property="og:image" content="http://fezvrasta.github.io/assets/brand/bootstrap-social.png">
|
|
<meta property="og:image:secure_url" content="https://fezvrasta.github.io/assets/brand/bootstrap-social.png">
|
|
<meta property="og:image:type" content="image/png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
|
|
<!-- Meta -->
|
|
<meta name="description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
|
|
<meta name="author" content="Federico Zivolo and Bootstrap contributors">
|
|
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
|
|
<link href="/bootstrap-material-design/dist/css/bootstrap-material-design.css" rel="stylesheet">
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" >
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
|
|
<!-- Documentation extras -->
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
|
|
|
<link href="/bootstrap-material-design/assets/css/docs.min.css" rel="stylesheet">
|
|
|
|
<!-- Favicons -->
|
|
<link rel="apple-touch-icon" href="/bootstrap-material-design/apple-touch-icon.png">
|
|
<link rel="icon" href="/bootstrap-material-design/favicon.ico">
|
|
|
|
<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-80431047-1', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
|
|
</head>
|
|
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
|
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
|
<div class="container">
|
|
<span class="skiplink-text">Skip to main content</span>
|
|
</div>
|
|
</a>
|
|
|
|
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
|
<a class="navbar-brand mr-0 mr-md-2" href="/bootstrap-material-design/" aria-label="Bootstrap">
|
|
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
|
|
|
|
</a>
|
|
|
|
<div class="navbar-nav-scroll">
|
|
<ul class="navbar-nav bd-navbar-nav flex-row">
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="/bootstrap-material-design/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/bootstrap-material-design/docs/4.0/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="/bootstrap-material-design/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="noopener">Material Dashboard</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="noopener">Material Kit</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
v4.0
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
|
<a class="dropdown-item active" href="/bootstrap-material-design/docs/4.0/">Latest (4.x)</a>
|
|
<a class="dropdown-item" href="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html">v3.x</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://github.com/FezVrasta/bootstrap-material-design" target="_blank" rel="noopener" aria-label="GitHub">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
|
|
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://twitter.com/FezVrasta" target="_blank" rel="noopener" aria-label="Twitter">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
|
|
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
|
|
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/FezVrasta/bootstrap-material-design/releases">Download</a>
|
|
</header>
|
|
|
|
|
|
<div class="container-fluid">
|
|
<div class="row flex-xl-nowrap">
|
|
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
|
<form class="bd-search d-flex align-items-center">
|
|
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
|
|
<button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs avigation">
|
|
<svg class="" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
|
|
|
|
</button>
|
|
</form>
|
|
|
|
<nav class="collapse bd-links" id="bd-docs-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item ">
|
|
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/getting-started/introduction/">
|
|
Getting started
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/getting-started/introduction/">
|
|
Introduction
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/getting-started/download/">
|
|
Download
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/getting-started/contents/">
|
|
Contents
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/getting-started/browsers-devices/">
|
|
Browsers & devices
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/getting-started/javascript/">
|
|
JavaScript
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
|
|
Options
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/getting-started/build-tools/">
|
|
Build tools
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/getting-started/webpack/">
|
|
Webpack
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/getting-started/accessibility/">
|
|
Accessibility
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item ">
|
|
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/layout/overview/">
|
|
Layout
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/layout/overview/">
|
|
Overview
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/layout/grid/">
|
|
Grid
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/layout/media-object/">
|
|
Media object
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/layout/utilities-for-layout/">
|
|
Utilities for layout
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item ">
|
|
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/content/reboot/">
|
|
Content
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/content/reboot/">
|
|
Reboot
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/content/typography/">
|
|
Typography
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/content/code/">
|
|
Code
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/content/images/">
|
|
Images
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/content/tables/">
|
|
Tables
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/content/figures/">
|
|
Figures
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item ">
|
|
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
|
|
Components
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
|
|
Alerts
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
|
|
Badge
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
|
|
Breadcrumb
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
|
|
Buttons
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
|
|
Button group
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/card/">
|
|
Card
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
|
|
Carousel
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
|
|
Collapse
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
|
|
Dropdowns
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
|
|
Forms
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
|
|
Input group
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
|
|
Jumbotron
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
|
|
List group
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
|
|
Modal
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
|
|
Navs
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
|
|
Navbar
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
|
|
Pagination
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
|
|
Popovers
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
|
|
Progress
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
|
|
Scrollspy
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
|
|
Tooltips
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
|
|
Material Design
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
|
|
Buttons
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/material-design/collapse-inline/">
|
|
Collapse inline
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/material-design/drawers/">
|
|
Drawers
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/material-design/extensions/">
|
|
Extensions
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/material-design/forms/">
|
|
Forms
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/material-design/labels/">
|
|
Labels
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="active bd-sidenav-active">
|
|
<a href="/bootstrap-material-design/docs/4.0/material-design/list-groups/">
|
|
List groups
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/material-design/menus/">
|
|
Menus
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/material-design/navs/">
|
|
Navs
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/material-design/selections/">
|
|
Selections
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/material-design/snackbars/">
|
|
Snackbars
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item ">
|
|
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
|
|
Utilities
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/borders/">
|
|
Borders
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/clearfix/">
|
|
Clearfix
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/close-icon/">
|
|
Close icon
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/colors/">
|
|
Colors
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/display/">
|
|
Display
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/embed/">
|
|
Embed
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/flex/">
|
|
Flex
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/float/">
|
|
Float
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/image-replacement/">
|
|
Image replacement
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/position/">
|
|
Position
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/screenreaders/">
|
|
Screenreaders
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/sizing/">
|
|
Sizing
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/spacing/">
|
|
Spacing
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/text/">
|
|
Text
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/vertical-align/">
|
|
Vertical align
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/utilities/visibility/">
|
|
Visibility
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item ">
|
|
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
|
|
Extend
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
|
|
Icons
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item ">
|
|
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/migration/">
|
|
Migration
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
|
<h1 class="bd-title" id="content">List groups</h1>
|
|
<p class="bd-lead"></p>
|
|
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
|
|
|
|
<p>Material design list groups are specialized versions of their bootstrap counterparts, opting for the flexbox layout to achieve
|
|
the varieties specified. (<a href="https://www.google.com/design/spec/components/lists.html#lists-specs">Specification</a>)</p>
|
|
|
|
<h2 id="contents">Contents</h2>
|
|
|
|
<ul id="markdown-toc">
|
|
<li><a href="#contents" id="markdown-toc-contents">Contents</a></li>
|
|
<li><a href="#single-line" id="markdown-toc-single-line">Single line</a> <ul>
|
|
<li><a href="#text" id="markdown-toc-text">Text</a></li>
|
|
<li><a href="#dense" id="markdown-toc-dense">Dense</a></li>
|
|
<li><a href="#icons-and-labels" id="markdown-toc-icons-and-labels">Icons and labels</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#double-line" id="markdown-toc-double-line">Double line</a> <ul>
|
|
<li><a href="#text-1" id="markdown-toc-text-1">Text</a></li>
|
|
<li><a href="#dense-1" id="markdown-toc-dense-1">Dense</a></li>
|
|
<li><a href="#icons-and-labels-1" id="markdown-toc-icons-and-labels-1">Icons and labels</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#three-line" id="markdown-toc-three-line">Three line</a> <ul>
|
|
<li><a href="#text-2" id="markdown-toc-text-2">Text</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#classes" id="markdown-toc-classes">Classes</a></li>
|
|
<li><a href="#variables" id="markdown-toc-variables">Variables</a></li>
|
|
</ul>
|
|
|
|
<h2 id="single-line">Single line</h2>
|
|
|
|
<h3 id="text">Text</h3>
|
|
|
|
<div class="bd-example" data-example-id="">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">Text only</li>
|
|
<a href="#" class="list-group-item">Link item</a>
|
|
<button type="button" class="list-group-item">Button item</button>
|
|
<a href="#" class="list-group-item active">Active link item</a>
|
|
<a href="#" class="list-group-item disabled">Disabled item</a>
|
|
</ul>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Text only<span class="nt"></li></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Link item<span class="nt"></a></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Button item<span class="nt"></button></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item active"</span><span class="nt">></span>Active link item<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item disabled"</span><span class="nt">></span>Disabled item<span class="nt"></a></span>
|
|
<span class="nt"></ul></span></code></pre></div>
|
|
|
|
<h3 id="dense">Dense</h3>
|
|
|
|
<div class="bd-example" data-example-id="">
|
|
<ul class="list-group bmd-list-group-sm">
|
|
<li class="list-group-item">Text</li>
|
|
<a href="#" class="list-group-item">Link item</a>
|
|
<button type="button" class="list-group-item">Button item</button>
|
|
<a href="#" class="list-group-item active">Active link item</a>
|
|
<a href="#" class="list-group-item disabled">Disabled item</a>
|
|
</ul>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group bmd-list-group-sm"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Text<span class="nt"></li></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Link item<span class="nt"></a></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Button item<span class="nt"></button></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item active"</span><span class="nt">></span>Active link item<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item disabled"</span><span class="nt">></span>Disabled item<span class="nt"></a></span>
|
|
<span class="nt"></ul></span></code></pre></div>
|
|
|
|
<h3 id="icons-and-labels">Icons and labels</h3>
|
|
|
|
<div class="bd-example" data-example-id="">
|
|
<ul class="list-group">
|
|
<a class="list-group-item">
|
|
<i class="material-icons">inbox</i>
|
|
Icon left
|
|
</a>
|
|
<a class="list-group-item">
|
|
<span class="label label-default label-pill">14</span>
|
|
Label pill left
|
|
</a>
|
|
|
|
<a class="list-group-item">
|
|
<i class="material-icons">inbox</i>
|
|
Icons left and right
|
|
<i class="material-icons">face</i>
|
|
</a>
|
|
<a class="list-group-item">
|
|
<span class="label label-default label-pill">14</span>
|
|
Label pill left and right
|
|
<span class="label label-default label-pill">14</span>
|
|
</a>
|
|
|
|
<a class="list-group-item">
|
|
Icon right
|
|
<i class="material-icons pull-xs-right">face</i>
|
|
</a>
|
|
<a class="list-group-item">
|
|
Label pill right
|
|
<span class="label label-default label-pill pull-xs-right">14</span>
|
|
</a>
|
|
|
|
<a class="list-group-item">
|
|
<span class="label label-default label-pill">14</span>
|
|
Label pill and icon
|
|
<i class="material-icons">inbox</i>
|
|
</a>
|
|
<a class="list-group-item">
|
|
<i class="material-icons">inbox</i>
|
|
Icon and label pill
|
|
<span class="label label-default label-pill">14</span>
|
|
</a>
|
|
</ul>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>inbox<span class="nt"></i></span>
|
|
Icon left
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"label label-default label-pill"</span><span class="nt">></span>14<span class="nt"></span></span>
|
|
Label pill left
|
|
<span class="nt"></a></span>
|
|
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>inbox<span class="nt"></i></span>
|
|
Icons left and right
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>face<span class="nt"></i></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"label label-default label-pill"</span><span class="nt">></span>14<span class="nt"></span></span>
|
|
Label pill left and right
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"label label-default label-pill"</span><span class="nt">></span>14<span class="nt"></span></span>
|
|
<span class="nt"></a></span>
|
|
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
Icon right
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons pull-xs-right"</span><span class="nt">></span>face<span class="nt"></i></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
Label pill right
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"label label-default label-pill pull-xs-right"</span><span class="nt">></span>14<span class="nt"></span></span>
|
|
<span class="nt"></a></span>
|
|
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"label label-default label-pill"</span><span class="nt">></span>14<span class="nt"></span></span>
|
|
Label pill and icon
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>inbox<span class="nt"></i></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>inbox<span class="nt"></i></span>
|
|
Icon and label pill
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"label label-default label-pill"</span><span class="nt">></span>14<span class="nt"></span></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></ul></span></code></pre></div>
|
|
|
|
<h2 id="double-line">Double line</h2>
|
|
|
|
<h3 id="text-1">Text</h3>
|
|
|
|
<div class="bd-example" data-example-id="">
|
|
<ul class="list-group">
|
|
<a class="list-group-item">
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">List group item heading</p>
|
|
<p class="list-group-item-text">Some text</p>
|
|
</div>
|
|
</a>
|
|
<a class="list-group-item">
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">List group item heading</p>
|
|
<p class="list-group-item-text">Some text</p>
|
|
</div>
|
|
</a>
|
|
<a class="list-group-item">
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">List group item heading</p>
|
|
<p class="list-group-item-text">Some text</p>
|
|
</div>
|
|
</a>
|
|
</ul>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>List group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>Some text<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>List group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>Some text<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>List group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>Some text<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></ul></span></code></pre></div>
|
|
|
|
<h3 id="dense-1">Dense</h3>
|
|
|
|
<div class="bd-example" data-example-id="">
|
|
<ul class="list-group bmd-list-group-sm">
|
|
<a class="list-group-item">
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">List group item heading</p>
|
|
<p class="list-group-item-text">Some text</p>
|
|
</div>
|
|
</a>
|
|
<a class="list-group-item">
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">List group item heading</p>
|
|
<p class="list-group-item-text">Some text</p>
|
|
</div>
|
|
</a>
|
|
<a class="list-group-item">
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">List group item heading</p>
|
|
<p class="list-group-item-text">Some text</p>
|
|
</div>
|
|
</a>
|
|
</ul>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group bmd-list-group-sm"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>List group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>Some text<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>List group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>Some text<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>List group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>Some text<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></ul></span></code></pre></div>
|
|
|
|
<h3 id="icons-and-labels-1">Icons and labels</h3>
|
|
|
|
<div class="bd-example" data-example-id="">
|
|
<ul class="list-group">
|
|
<a class="list-group-item">
|
|
<i class="material-icons">inbox</i>
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">List group item heading</p>
|
|
<p class="list-group-item-text">Icon left</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="list-group-item">
|
|
<span class="label label-default label-pill">14</span>
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">List group item heading</p>
|
|
<p class="list-group-item-text">Icon left</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="list-group-item">
|
|
<i class="material-icons">inbox</i>
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">List group item heading</p>
|
|
<p class="list-group-item-text">Icons left and right</p>
|
|
</div>
|
|
<i class="material-icons">face</i>
|
|
</a>
|
|
|
|
<a class="list-group-item">
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">List group item heading</p>
|
|
<p class="list-group-item-text">Icon right</p>
|
|
</div>
|
|
<i class="material-icons pull-xs-right">face</i>
|
|
</a>
|
|
|
|
<a class="list-group-item">
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">List group item heading</p>
|
|
<p class="list-group-item-text">Label pill to the right</p>
|
|
</div>
|
|
<span class="label label-default label-pill pull-xs-right">14</span>
|
|
</a>
|
|
</ul>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>inbox<span class="nt"></i></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>List group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>Icon left<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></a></span>
|
|
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"label label-default label-pill"</span><span class="nt">></span>14<span class="nt"></span></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>List group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>Icon left<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></a></span>
|
|
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>inbox<span class="nt"></i></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>List group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>Icons left and right<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>face<span class="nt"></i></span>
|
|
<span class="nt"></a></span>
|
|
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>List group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>Icon right<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons pull-xs-right"</span><span class="nt">></span>face<span class="nt"></i></span>
|
|
<span class="nt"></a></span>
|
|
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>List group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>Label pill to the right<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"label label-default label-pill pull-xs-right"</span><span class="nt">></span>14<span class="nt"></span></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></ul></span></code></pre></div>
|
|
|
|
<h2 id="three-line">Three line</h2>
|
|
|
|
<h3 id="text-2">Text</h3>
|
|
|
|
<div class="bd-example" data-example-id="">
|
|
<ul class="list-group">
|
|
<a class="list-group-item">
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">Linked list group item heading</p>
|
|
<p class="list-group-item-text">This disallows more than two lines. Hopefully an ellipsis ends this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p>
|
|
</div>
|
|
</a>
|
|
<li class="list-group-item">
|
|
<div class="bmd-list-group-col">
|
|
<p class="list-group-item-heading">Text list group item heading</p>
|
|
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>Linked list group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>This disallows more than two lines. Hopefully an ellipsis ends this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bmd-list-group-col"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span><span class="nt">></span>Text list group item heading<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"list-group-item-text"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span></code></pre></div>
|
|
|
|
<h2 id="classes">Classes</h2>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Classes</th>
|
|
<th>BS Equivalent</th>
|
|
<th>Differences</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>.list-group-item</code>
|
|
</td>
|
|
<td class="text-nowrap">
|
|
<code>.list-group-item</code>
|
|
</td>
|
|
<td>
|
|
<p>Flexbox layout, including conveniences for icon and label layout.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>.bmd-list-group-col</code>
|
|
</td>
|
|
<td class="text-nowrap">
|
|
<p>None</p>
|
|
|
|
</td>
|
|
<td>
|
|
<p>Flexbox column - additional class to use within an <code class="highlighter-rouge">.list-group-item</code> for layout, such as a multi-line content section.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>.bmd-list-group-sm</code>
|
|
</td>
|
|
<td class="text-nowrap">
|
|
<p>None</p>
|
|
|
|
</td>
|
|
<td>
|
|
<p>Use on <code class="highlighter-rouge">.bmd-list-group</code> for the dense list display</p>
|
|
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2 id="variables">Variables</h2>
|
|
|
|
<p>See <code class="highlighter-rouge">variables/_list-group.scss</code> for a complete list of variables. Key variables are below:</p>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Variable</th>
|
|
<th>Value</th>
|
|
<th>Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>$list-group-bg</code>
|
|
</td>
|
|
<td>
|
|
<code>inherit</code>
|
|
</td>
|
|
<td>
|
|
<p>Original value was <code class="highlighter-rouge">#fff</code>, but it seemed that too often list-groups needed the background to be inherited from the underlying container.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
|
<script>window.jQuery || document.write('<script src="/bootstrap-material-design/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
|
|
|
|
<script src="/bootstrap-material-design/assets/js/vendor/popper.min.js"></script>
|
|
|
|
|
|
<script src="/bootstrap-material-design/dist/js/bootstrap-material-design.js"></script>
|
|
|
|
|
|
|
|
<script src="/bootstrap-material-design/assets/js/vendor/anchor.min.js"></script>
|
|
<script src="/bootstrap-material-design/assets/js/vendor/clipboard.min.js"></script>
|
|
<script src="/bootstrap-material-design/assets/js/vendor/holder.min.js"></script>
|
|
<script src="/bootstrap-material-design/assets/js/src/application.js"></script>
|
|
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="/bootstrap-material-design/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
<script src="/bootstrap-material-design/assets/js/ie-emulation-modes-warning.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
|
|
<script type="text/javascript">
|
|
var docsearch = docsearch({
|
|
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
|
indexName: 'bootstrap-v4',
|
|
inputSelector: '#search-input',
|
|
handleSelected: function (input, event, suggestion) {
|
|
var url = suggestion.url;
|
|
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
|
// If it's a title we remove the anchor so it does not jump.
|
|
window.location.href = url;
|
|
},
|
|
transformData: function (hits) {
|
|
return hits.map(function (hit) {
|
|
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
|
return hit;
|
|
});
|
|
},
|
|
debug: false // Set debug to true if you want to inspect the dropdown
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
Holder.addTheme('gray', {
|
|
bg: '#777',
|
|
fg: 'rgba(255,255,255,.75)',
|
|
font: 'Helvetica',
|
|
fontweight: 'normal'
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|