rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-14 02:24:00 +01:00
Code Issues Actions Packages Releases Activity
47b3c9cdef
Bootstrap/docs/4.0/components/list-group/index.html

904 lines
72 KiB
HTML
Raw Normal View History

v4 beta2
2017-10-19 21:22:00 +02:00
<!doctype html>
beta docs
2017-08-11 06:04:59 +02:00
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<meta name="description" content="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.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
4.0.0 stable
2018-01-18 19:32:35 +01:00
<meta name="generator" content="Jekyll v3.7.0">
beta docs
2017-08-11 06:04:59 +02:00
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<title>List group · Bootstrap</title>
v4 beta2
2017-10-19 21:22:00 +02:00
<!-- Bootstrap core CSS -->
4.0.0 stable
2018-01-18 19:32:35 +01:00
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
v4 beta2
2017-10-19 21:22:00 +02:00
<!-- Documentation extras -->
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
v4 beta2
2017-10-19 21:22:00 +02:00
<link href="/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
beta docs
2017-08-11 06:04:59 +02:00
<!-- Twitter -->
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<meta name="twitter:card" content="summary">
beta docs
2017-08-11 06:04:59 +02:00
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<meta name="twitter:title" content="List group">
<meta name="twitter:description" content="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.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
beta docs
2017-08-11 06:04:59 +02:00
<!-- Facebook -->
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/list-group/">
<meta property="og:title" content="List group">
<meta property="og:description" content="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.">
<meta property="og:type" content="website">
beta docs
2017-08-11 06:04:59 +02:00
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
update
2017-08-11 06:10:55 +02:00
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
beta docs
2017-08-11 06:04:59 +02:00
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<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-146052-10', 'getbootstrap.com');
ga('send', 'pageview');
</script>
</head>
v4 beta2
2017-10-19 21:22:00 +02:00
<body>
beta docs
2017-08-11 06:04:59 +02:00
<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">
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<a class="navbar-brand mr-0 mr-md-2" href="/" 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>
beta docs
2017-08-11 06:04:59 +02:00
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
</li>
<li class="nav-item">
v4 beta2
2017-10-19 21:22:00 +02:00
<a class="nav-link active" href="/docs/4.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
beta docs
2017-08-11 06:04:59 +02:00
</li>
<li class="nav-item">
<a class="nav-link " href="/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://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://jobs.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Jobs');" target="_blank" rel="noopener">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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">
update to v4.1 docs and modify v4.0 docs to include links back
2018-04-09 18:02:59 +02:00
<a class="dropdown-item" href="/docs/4.1/">Latest (v4.1.x)</a>
<a class="dropdown-item active" href="/docs/4.0/">v4.0.0</a>
<div class="dropdown-divider"></div>
v4 beta2
2017-10-19 21:22:00 +02:00
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
fix 3.3 link
2017-10-19 22:03:56 +02:00
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
beta docs
2017-08-11 06:04:59 +02:00
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
</div>
</li>
<li class="nav-item">
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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>
beta docs
2017-08-11 06:04:59 +02:00
</li>
<li class="nav-item">
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" 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>
beta docs
2017-08-11 06:04:59 +02:00
</li>
<li class="nav-item">
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<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>
beta docs
2017-08-11 06:04:59 +02:00
</li>
</ul>
4.0.0 stable
2018-01-18 19:32:35 +01:00
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
beta docs
2017-08-11 06:04:59 +02:00
</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">
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<button class="btn 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 navigation"><svg 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>
beta docs
2017-08-11 06:04:59 +02:00
</form>
v4 beta2
2017-10-19 21:22:00 +02:00
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
beta docs
2017-08-11 06:04:59 +02:00
<a class="bd-toc-link" href="/docs/4.0/getting-started/introduction/">
Getting started
</a>
v4 beta2
2017-10-19 21:22:00 +02:00
<ul class="nav bd-sidenav"><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/getting-started/introduction/">
Introduction
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/getting-started/download/">
Download
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/getting-started/contents/">
Contents
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
v4 beta2
2017-10-19 21:22:00 +02:00
<a href="/docs/4.0/getting-started/theming/">
Theming
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/getting-started/webpack/">
Webpack
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li></ul>
v4 beta2
2017-10-19 21:22:00 +02:00
</div><div class="bd-toc-item">
beta docs
2017-08-11 06:04:59 +02:00
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
</a>
v4 beta2
2017-10-19 21:22:00 +02:00
<ul class="nav bd-sidenav"><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/layout/overview/">
Overview
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/layout/grid/">
Grid
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/layout/media-object/">
Media object
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li></ul>
v4 beta2
2017-10-19 21:22:00 +02:00
</div><div class="bd-toc-item">
beta docs
2017-08-11 06:04:59 +02:00
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
</a>
v4 beta2
2017-10-19 21:22:00 +02:00
<ul class="nav bd-sidenav"><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/content/reboot/">
Reboot
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/content/typography/">
Typography
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/content/code/">
Code
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/content/images/">
Images
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/content/tables/">
Tables
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/content/figures/">
Figures
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li></ul>
v4 beta2
2017-10-19 21:22:00 +02:00
</div><div class="bd-toc-item active">
beta docs
2017-08-11 06:04:59 +02:00
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
</a>
v4 beta2
2017-10-19 21:22:00 +02:00
<ul class="nav bd-sidenav"><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/alerts/">
Alerts
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/badge/">
Badge
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/buttons/">
Buttons
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/button-group/">
Button group
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/card/">
Card
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/carousel/">
Carousel
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/collapse/">
Collapse
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/forms/">
Forms
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/input-group/">
Input group
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li class="active bd-sidenav-active">
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/list-group/">
List group
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/modal/">
Modal
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/navs/">
Navs
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/navbar/">
Navbar
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/pagination/">
Pagination
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/popovers/">
Popovers
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/progress/">
Progress
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/components/tooltips/">
Tooltips
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li></ul>
v4 beta2
2017-10-19 21:22:00 +02:00
</div><div class="bd-toc-item">
beta docs
2017-08-11 06:04:59 +02:00
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
</a>
v4 beta2
2017-10-19 21:22:00 +02:00
<ul class="nav bd-sidenav"><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/borders/">
Borders
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/close-icon/">
Close icon
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/colors/">
Colors
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/display/">
Display
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/embed/">
Embed
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/flex/">
Flex
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/float/">
Float
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/position/">
Position
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/sizing/">
Sizing
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/spacing/">
Spacing
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/text/">
Text
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/utilities/visibility/">
Visibility
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li></ul>
v4 beta2
2017-10-19 21:22:00 +02:00
</div><div class="bd-toc-item">
4.0.0 stable
2018-01-18 19:32:35 +01:00
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
beta docs
2017-08-11 06:04:59 +02:00
Extend
</a>
v4 beta2
2017-10-19 21:22:00 +02:00
<ul class="nav bd-sidenav"><li>
4.0.0 stable
2018-01-18 19:32:35 +01:00
<a href="/docs/4.0/extend/approach/">
Approach
</a></li><li>
beta docs
2017-08-11 06:04:59 +02:00
<a href="/docs/4.0/extend/icons/">
Icons
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li></ul>
v4 beta2
2017-10-19 21:22:00 +02:00
</div><div class="bd-toc-item">
beta docs
2017-08-11 06:04:59 +02:00
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
</a>
v4 beta2
2017-10-19 21:22:00 +02:00
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
v4 beta2
2017-10-19 21:22:00 +02:00
About
</a>
<ul class="nav bd-sidenav"><li>
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
v4 beta2
2017-10-19 21:22:00 +02:00
<a href="/docs/4.0/about/brand/">
Brand
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
v4 beta2
2017-10-19 21:22:00 +02:00
<a href="/docs/4.0/about/license/">
License
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li><li>
v4 beta2
2017-10-19 21:22:00 +02:00
<a href="/docs/4.0/about/translations/">
Translations
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
</a></li></ul>
v4 beta2
2017-10-19 21:22:00 +02:00
</div></nav>
beta docs
2017-08-11 06:04:59 +02:00
</div>
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#active-items">Active items</a></li>
<li class="toc-entry toc-h2"><a href="#disabled-items">Disabled items</a></li>
<li class="toc-entry toc-h2"><a href="#links-and-buttons">Links and buttons</a></li>
4.0.0 stable
2018-01-18 19:32:35 +01:00
<li class="toc-entry toc-h2"><a href="#flush">Flush</a></li>
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<li class="toc-entry toc-h2"><a href="#contextual-classes">Contextual classes</a></li>
beta docs
2017-08-11 06:04:59 +02:00
<li class="toc-entry toc-h2"><a href="#with-badges">With badges</a></li>
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<li class="toc-entry toc-h2"><a href="#custom-content">Custom content</a></li>
beta docs
2017-08-11 06:04:59 +02:00
<li class="toc-entry toc-h2"><a href="#javascript-behavior">JavaScript behavior</a>
<ul>
<li class="toc-entry toc-h3"><a href="#using-data-attributes">Using data attributes</a></li>
<li class="toc-entry toc-h3"><a href="#via-javascript">Via JavaScript</a></li>
<li class="toc-entry toc-h3"><a href="#fade-effect">Fade effect</a></li>
<li class="toc-entry toc-h3"><a href="#methods">Methods</a>
<ul>
<li class="toc-entry toc-h4"><a href="#tab">$().tab</a></li>
<li class="toc-entry toc-h4"><a href="#tabshow">.tab(‘show’)</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
</ul>
</li>
</ul>
</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 group</h1>
<p class="bd-lead">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>
v4 beta2
2017-10-19 21:22:00 +02:00
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
beta docs
2017-08-11 06:04:59 +02:00
<h2 id="basic-example">Basic example</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>
v4 beta2
2017-10-19 21:22:00 +02:00
<div class="bd-example">
beta docs
2017-08-11 06:04:59 +02:00
<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="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Cras justo odio<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Dapibus ac facilisis in<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Morbi leo risus<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Porta ac consectetur ac<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<h2 id="active-items">Active items</h2>
<p>Add <code class="highlighter-rouge">.active</code> to a <code class="highlighter-rouge">.list-group-item</code> to indicate the current active selection.</p>
v4 beta2
2017-10-19 21:22:00 +02:00
<div class="bd-example">
beta docs
2017-08-11 06:04:59 +02:00
<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="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item active"</span><span class="nt">&gt;</span>Cras justo odio<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Dapibus ac facilisis in<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Morbi leo risus<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Porta ac consectetur ac<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<h2 id="disabled-items">Disabled items</h2>
<p>Add <code class="highlighter-rouge">.disabled</code> to a <code class="highlighter-rouge">.list-group-item</code> to make it <em>appear</em> disabled. Note that some elements with <code class="highlighter-rouge">.disabled</code> will also require custom JavaScript to fully disable their click events (e.g., links).</p>
v4 beta2
2017-10-19 21:22:00 +02:00
<div class="bd-example">
beta docs
2017-08-11 06:04:59 +02:00
<ul class="list-group">
<li class="list-group-item disabled">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="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item disabled"</span><span class="nt">&gt;</span>Cras justo odio<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Dapibus ac facilisis in<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Morbi leo risus<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Porta ac consectetur ac<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<h2 id="links-and-buttons">Links and buttons</h2>
<p>Use <code class="highlighter-rouge">&lt;a&gt;</code>s or <code class="highlighter-rouge">&lt;button&gt;</code>s to create <em>actionable</em> list group items with hover, disabled, and active states by adding <code class="highlighter-rouge">.list-group-item-action</code>. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <code class="highlighter-rouge">&lt;li&gt;</code>s or <code class="highlighter-rouge">&lt;div&gt;</code>s) don’t provide a click or tap affordance.</p>
<p>Be sure to <strong>not use the standard <code class="highlighter-rouge">.btn</code> classes here</strong>.</p>
v4 beta2
2017-10-19 21:22:00 +02:00
<div class="bd-example">
beta docs
2017-08-11 06:04:59 +02:00
<div class="list-group">
v4 beta2
2017-10-19 21:22:00 +02:00
<a href="#" class="list-group-item list-group-item-action active">
beta docs
2017-08-11 06:04:59 +02:00
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="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
v4 beta2
2017-10-19 21:22:00 +02:00
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span><span class="nt">&gt;</span>
beta docs
2017-08-11 06:04:59 +02:00
Cras justo odio
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">&gt;</span>Dapibus ac facilisis in<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">&gt;</span>Morbi leo risus<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">&gt;</span>Porta ac consectetur ac<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action disabled"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<p>With <code class="highlighter-rouge">&lt;button&gt;</code>s, you can also make use of the <code class="highlighter-rouge">disabled</code> attribute instead of the <code class="highlighter-rouge">.disabled</code> class. Sadly, <code class="highlighter-rouge">&lt;a&gt;</code>s don’t support the disabled attribute.</p>
v4 beta2
2017-10-19 21:22:00 +02:00
<div class="bd-example">
beta docs
2017-08-11 06:04:59 +02:00
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
Cras justo odio
</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action" disabled="">Vestibulum at eros</button>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span><span class="nt">&gt;</span>
Cras justo odio
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">&gt;</span>Dapibus ac facilisis in<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">&gt;</span>Morbi leo risus<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">&gt;</span>Porta ac consectetur ac<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">disabled</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
4.0.0 stable
2018-01-18 19:32:35 +01:00
<h2 id="flush">Flush</h2>
<p>Add <code class="highlighter-rouge">.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>
<div class="bd-example">
<ul class="list-group list-group-flush">
<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="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Cras justo odio<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Dapibus ac facilisis in<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Morbi leo risus<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Porta ac consectetur ac<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
beta docs
2017-08-11 06:04:59 +02:00
<h2 id="contextual-classes">Contextual classes</h2>
<p>Use contextual classes to style list items with a stateful background and color.</p>
v4 beta2
2017-10-19 21:22:00 +02:00
<div class="bd-example">
beta docs
2017-08-11 06:04:59 +02:00
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
<li class="list-group-item list-group-item-success">This is a success list group item</li>
<li class="list-group-item list-group-item-danger">This is a danger list group item</li>
<li class="list-group-item list-group-item-warning">This is a warning list group item</li>
<li class="list-group-item list-group-item-info">This is a info list group item</li>
<li class="list-group-item list-group-item-light">This is a light list group item</li>
<li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Dapibus ac facilisis in<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">&gt;</span>This is a primary list group item<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">&gt;</span>This is a secondary list group item<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">&gt;</span>This is a success list group item<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-danger"</span><span class="nt">&gt;</span>This is a danger list group item<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-warning"</span><span class="nt">&gt;</span>This is a warning list group item<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-info"</span><span class="nt">&gt;</span>This is a info list group item<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-light"</span><span class="nt">&gt;</span>This is a light list group item<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-dark"</span><span class="nt">&gt;</span>This is a dark list group item<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<p>Contextual classes also work with <code class="highlighter-rouge">.list-group-item-action</code>. Note the addition of the hover styles here not present in the previous example. Also supported is the <code class="highlighter-rouge">.active</code> state; apply it to indicate an active selection on a contextual list group item.</p>
v4 beta2
2017-10-19 21:22:00 +02:00
<div class="bd-example">
beta docs
2017-08-11 06:04:59 +02:00
<div class="list-group">
<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 list-group-item-primary">This is a primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">&gt;</span>Dapibus ac facilisis in<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">&gt;</span>This is a primary list group item<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">&gt;</span>This is a secondary list group item<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">&gt;</span>This is a success list group item<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-danger"</span><span class="nt">&gt;</span>This is a danger list group item<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-warning"</span><span class="nt">&gt;</span>This is a warning list group item<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-info"</span><span class="nt">&gt;</span>This is a info list group item<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-light"</span><span class="nt">&gt;</span>This is a light list group item<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-dark"</span><span class="nt">&gt;</span>This is a dark list group item<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<div class="bd-callout bd-callout-warning">
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
beta docs
2017-08-11 06:04:59 +02:00
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
</div>
<h2 id="with-badges">With badges</h2>
<p>Add badges to any list group item to show unread counts, activity, and more with the help of some <a href="/docs/4.0/utilities/flex/">utilities</a>.</p>
v4 beta2
2017-10-19 21:22:00 +02:00
<div class="bd-example">
beta docs
2017-08-11 06:04:59 +02:00
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
v4 beta2
2017-10-19 21:22:00 +02:00
<span class="badge badge-primary badge-pill">14</span>
beta docs
2017-08-11 06:04:59 +02:00
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
v4 beta2
2017-10-19 21:22:00 +02:00
<span class="badge badge-primary badge-pill">2</span>
beta docs
2017-08-11 06:04:59 +02:00
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
v4 beta2
2017-10-19 21:22:00 +02:00
<span class="badge badge-primary badge-pill">1</span>
beta docs
2017-08-11 06:04:59 +02:00
</li>
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item d-flex justify-content-between align-items-center"</span><span class="nt">&gt;</span>
Cras justo odio
v4 beta2
2017-10-19 21:22:00 +02:00
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-primary badge-pill"</span><span class="nt">&gt;</span>14<span class="nt">&lt;/span&gt;</span>
beta docs
2017-08-11 06:04:59 +02:00
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item d-flex justify-content-between align-items-center"</span><span class="nt">&gt;</span>
Dapibus ac facilisis in
v4 beta2
2017-10-19 21:22:00 +02:00
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-primary badge-pill"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/span&gt;</span>
beta docs
2017-08-11 06:04:59 +02:00
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item d-flex justify-content-between align-items-center"</span><span class="nt">&gt;</span>
Morbi leo risus
v4 beta2
2017-10-19 21:22:00 +02:00
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-primary badge-pill"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
beta docs
2017-08-11 06:04:59 +02:00
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<h2 id="custom-content">Custom content</h2>
<p>Add nearly any HTML within, even for linked list groups like the one below, with the help of <a href="/docs/4.0/utilities/flex/">flexbox utilities</a>.</p>
v4 beta2
2017-10-19 21:22:00 +02:00
<div class="bd-example">
beta docs
2017-08-11 06:04:59 +02:00
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action flex-column align-items-start active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex w-100 justify-content-between"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>List group item heading<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;small&gt;</span>3 days ago<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;small&gt;</span>Donec id elit non mi porta.<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action flex-column align-items-start"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex w-100 justify-content-between"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>List group item heading<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Donec id elit non mi porta.<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action flex-column align-items-start"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex w-100 justify-content-between"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>List group item heading<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Donec id elit non mi porta.<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h2 id="javascript-behavior">JavaScript behavior</h2>
<p>Use the tab JavaScript plugin—include it individually or through the compiled <code class="highlighter-rouge">bootstrap.js</code> file—to extend our list group to create tabbable panes of local content.</p>
<div class="bd-example" role="tabpanel">
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
<p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
<p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
<p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.</p>
</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
<p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.</p>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span> <span class="na">id=</span><span class="s">"list-tab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">id=</span><span class="s">"list-home-list"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#list-home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"home"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id=</span><span class="s">"list-profile-list"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#list-profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"profile"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id=</span><span class="s">"list-messages-list"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#list-messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"messages"</span><span class="nt">&gt;</span>Messages<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id=</span><span class="s">"list-settings-list"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#list-settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"settings"</span><span class="nt">&gt;</span>Settings<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-8"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span> <span class="na">id=</span><span class="s">"nav-tabContent"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"list-home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"list-home-list"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"list-profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"list-profile-list"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"list-messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"list-messages-list"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"list-settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"list-settings-list"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h3 id="using-data-attributes">Using data attributes</h3>
v4 beta2
2017-10-19 21:22:00 +02:00
<p>You can activate a list group navigation without writing any JavaScript by simply specifying <code class="highlighter-rouge">data-toggle="list"</code> or on an element. Use these data attributes on <code class="highlighter-rouge">.list-group-item</code>.</p>
beta docs
2017-08-11 06:04:59 +02:00
<div role="tabpanel">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- List group --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span> <span class="na">id=</span><span class="s">"myList"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Messages<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Settings<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Tab panes --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
</div>
<h3 id="via-javascript">Via JavaScript</h3>
<p>Enable tabbable list item via JavaScript (each list item needs to be activated individually):</p>
v4 beta2
2017-10-19 21:22:00 +02:00
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
beta docs
2017-08-11 06:04:59 +02:00
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
<span class="p">})</span></code></pre></figure>
<p>You can activate individual list item in several ways:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a[href="#profile"]'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select tab by name</span>
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:first-child'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select first tab</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:last-child'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select last tab</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:nth-child(3)'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select third tab</span></code></pre></figure>
beta docs
2017-08-11 06:04:59 +02:00
<h3 id="fade-effect">Fade effect</h3>
<p>To make tabs panel fade in, add <code class="highlighter-rouge">.fade</code> to each <code class="highlighter-rouge">.tab-pane</code>. The first tab pane must also have <code class="highlighter-rouge">.show</code> to make the initial content visible.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h3 id="methods">Methods</h3>
<h4 id="tab">$().tab</h4>
<p>Activates a list item element and content container. Tab should have either a <code class="highlighter-rouge">data-target</code> or an <code class="highlighter-rouge">href</code> targeting a container node in the DOM.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span> <span class="na">id=</span><span class="s">"myList"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Messages<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Settings<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;script&gt;</span>
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:last-child'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
beta docs
2017-08-11 06:04:59 +02:00
<span class="p">})</span>
<span class="nt">&lt;/script&gt;</span></code></pre></figure>
<h4 id="tabshow">.tab(‘show’)</h4>
<p>Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. <strong>Returns to the caller before the tab pane has actually been shown</strong> (for example, before the <code class="highlighter-rouge">shown.bs.tab</code> event occurs).</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#someListItem'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></figure>
<h3 id="events">Events</h3>
<p>When showing a new tab, the events fire in the following order:</p>
<ol>
<li><code class="highlighter-rouge">hide.bs.tab</code> (on the current active tab)</li>
<li><code class="highlighter-rouge">show.bs.tab</code> (on the to-be-shown tab)</li>
<li><code class="highlighter-rouge">hidden.bs.tab</code> (on the previous active tab, the same one as for the <code class="highlighter-rouge">hide.bs.tab</code> event)</li>
<li><code class="highlighter-rouge">shown.bs.tab</code> (on the newly-active just-shown tab, the same one as for the <code class="highlighter-rouge">show.bs.tab</code> event)</li>
</ol>
<p>If no tab was already active, the <code class="highlighter-rouge">hide.bs.tab</code> and <code class="highlighter-rouge">hidden.bs.tab</code> events will not be fired.</p>
v4 beta 3 docs
2017-12-28 18:55:44 +01:00
<table class="table table-bordered table-striped">
beta docs
2017-08-11 06:04:59 +02:00
<thead>
<tr>
<th style="width: 150px;">Event type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show.bs.tab</td>
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
<tr>
<td>shown.bs.tab</td>
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
<tr>
<td>hide.bs.tab</td>
<td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
</tr>
<tr>
<td>hidden.bs.tab</td>
<td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
</tr>
</tbody>
</table>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'a[data-toggle="list"]'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.tab'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">target</span> <span class="c1">// newly activated tab</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
</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="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
4.0.0 stable
2018-01-18 19:32:35 +01:00
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
beta docs
2017-08-11 06:04:59 +02:00
</body>
</html>
Reference in New Issue Copy Permalink