mdb-ui-kit/docs/4.0/components/list-group/index.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 group &middot; 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 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://fezvrasta.github.io/assets/brand/bootstrap-social-logo.png">


<!-- Facebook -->

  <meta property="og:url" content="https://fezvrasta.github.io/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">

<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">

  </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/getting-started/introduction/" 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 partner creativetim">
        <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 partner creativetim">
        <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>
      <li class="nav-item partner mdbootstrap">
        <a class="nav-link" href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/?utm_source=7e4bff&utm_id=7e4bff" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Design for Boostrap PRO');"
          target="_blank" rel="noopener">Material Design for Bootstrap PRO</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://spectrum.chat/bootstrap-md" target="_blank" rel="noopener" aria-label="Spectrum">
        <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Spectrum</title>
  <path fill="currentColor" fill-rule="evenodd" d="M256,51.2C21.5,51.2,0,83.4,0,222.2c0,94.2,9.7,139.3,89.1,158.7l0,0v58.4c0.5,12.4,11,22.1,23.5,21.6c4-0.2,8-1.4,11.4-3.6l98.8-63.5H256c234.5,0,256-32.3,256-171.5S490.5,51.2,256,51.2z M144.9,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C177.9,251,163,265.5,144.9,265.2C144.9,265.2,144.9,265.2,144.9,265.2zM256,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C289,251,274.1,265.5,256,265.2C256,265.2,256,265.2,256,265.2z M367.1,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C400.1,251,385.2,265.5,367.1,265.2C367.1,265.2,367.1,265.2,367.1,265.2z" />
</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/theming/">
              Theming
            </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/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="">
            <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/bootstrap-components/alerts/">
        Bootstrap Components
      </a>

      <ul class="nav bd-sidenav">
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
              Alerts
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
              Badge
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
              Breadcrumb
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
              Buttons
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
              Button group
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
              Card
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
              Carousel
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
              Collapse
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
              Dropdowns
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
              Forms
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
              Input group
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
              Jumbotron
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
              List group
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
              Modal
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
              Navs
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
              Navbar
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
              Pagination
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
              Popovers
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
              Progress
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
              Scrollspy
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
              Tooltips
            </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/approach/">
        Extend
      </a>

      <ul class="nav bd-sidenav">
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/extend/approach/">
              Approach
            </a>

            
          </li>
        
          
          <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>
  
  
  <div class="bd-toc-item ">
      <a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
        About
      </a>

      <ul class="nav bd-sidenav">
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/about/overview/">
              Overview
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/about/brand/">
              Brand
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/about/license/">
              License
            </a>

            
          </li>
        
          
          <li class="">
            <a href="/bootstrap-material-design/docs/4.0/about/translations/">
              Translations
            </a>

            
          </li>
        
      </ul>
    </div>
  
</nav>

        </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>
<li class="toc-entry toc-h2"><a href="#flush">Flush</a></li>
<li class="toc-entry toc-h2"><a href="#contextual-classes">Contextual classes</a>
<ul>
<ul>
<li class="toc-entry toc-h4"><a href="#conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</a></li>
</ul>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#with-badges">With badges</a></li>
<li class="toc-entry toc-h2"><a href="#custom-content">Custom content</a>
<ul>
<ul>
<ul>
<li class="toc-entry toc-h5"><a href="#list-group-item-heading">List group item heading</a></li>
<li class="toc-entry toc-h5"><a href="#list-group-item-heading-1">List group item heading</a></li>
<li class="toc-entry toc-h5"><a href="#list-group-item-heading-2">List group item heading</a></li>
</ul>
</ul>
</ul>
</li>
<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>
          <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>

          <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>

<div class="bd-example" data-example-id="">
<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>

<div class="bd-example" data-example-id="">
<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>

<div class="bd-example" data-example-id="">
<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>

<div class="bd-example" data-example-id="">
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
</div>
<div class="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 active"</span><span class="nt">&gt;</span>
    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>

<div class="bd-example" data-example-id="">
<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>

<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" data-example-id="">
<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>

<h2 id="contextual-classes">Contextual classes</h2>

<p>Use contextual classes to style list items with a stateful background and color.</p>

<div class="bd-example" data-example-id="">
<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>

<div class="bd-example" data-example-id="">
<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">
<h4 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h4>

<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="/bootstrap-material-design/docs/4.0/utilities/flex/">utilities</a>.</p>

<div class="bd-example" data-example-id="">
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>
</div>
<div class="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
    <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>
  <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
    <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>
  <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
    <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>
  <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="/bootstrap-material-design/docs/4.0/utilities/flex/">flexbox utilities</a>.</p>

<div class="bd-example" data-example-id="">
<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>

<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>

<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>

<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>
  <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>
<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>

<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>
    <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="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>

<table class="table table-bordered table-striped">
  <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="/bootstrap-material-design/assets/js/vendor/split.min.js">
</script>

<script>
  Split.setup({
    creativetim: function () {document.body.classList.add('creativetim')},
    mdbootstrap: function () {document.body.classList.add('mdbootstrap')},
  });

  (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>

<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="https://cdn.rawgit.com/FezVrasta/snackbarjs/1.1.0/dist/snackbar.min.js" crossorigin="anonymous"></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: 'b5c13bef25101d81f781cc15f4485a52',
    indexName: 'fezvrasta_bootstrap_material_design',
    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) {
        console.log(hit.url);
        hit.url = hit.url.replace('https://fezvrasta.github.io/', '/');
        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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								<!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 group &middot; Bootstrap Material Design
 								</title>
 								<!-- Twitter -->
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 16:12:11 +03:00
+								<meta name="twitter:site" content="@FezVrasta">
 								<meta name="twitter:creator" content="@FezVrasta">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
 								  <meta name="twitter:card" content="summary">
 								  <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.">
-												publish: fix(dropdowns): Fixed active states

generated from commit c5e0a12556b5fc197e476a092e973d10a92eb47d

											
										
										
											2017-12-17 22:31:35 +03:00
+								  <meta name="twitter:image" content="https://fezvrasta.github.io/assets/brand/bootstrap-social-logo.png">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
 								<!-- Facebook -->
-												publish: fix(dropdowns): Fixed active states

generated from commit c5e0a12556b5fc197e476a092e973d10a92eb47d

											
										
										
											2017-12-17 22:31:35 +03:00
+								  <meta property="og:url" content="https://fezvrasta.github.io/docs/4.0/components/list-group/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								  <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">
-												publish: fix(dropdowns): Fixed active states

generated from commit c5e0a12556b5fc197e476a092e973d10a92eb47d

											
										
										
											2017-12-17 22:31:35 +03:00
+								<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">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								<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.">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 16:12:11 +03:00
+								<meta name="author" content="Federico Zivolo and Bootstrap contributors">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
 								<!-- Bootstrap core CSS -->
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								  <link href="/bootstrap-material-design/dist/css/bootstrap-material-design.css" rel="stylesheet">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
-												publish: docs: Aded missing fonts and icons

generated from commit 23f8f00f84937af2f4e00cc880bd907866c45b96

											
										
										
											2017-09-05 15:07:16 +03:00
+								<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">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
 								<!-- Documentation extras -->
 								<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								<link href="/bootstrap-material-design/assets/css/docs.min.css" rel="stylesheet">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
 								<!-- Favicons -->
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								<link rel="apple-touch-icon" href="/bootstrap-material-design/apple-touch-icon.png">
 								<link rel="icon" href="/bootstrap-material-design/favicon.ico">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
 								  </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">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								  <a class="navbar-brand mr-0 mr-md-2" href="/bootstrap-material-design/" aria-label="Bootstrap">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								    <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">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								        <a class="nav-link " href="/bootstrap-material-design/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								      </li>
 								      <li class="nav-item">
-												publish: docs: Point to introduction

generated from commit 8cecc06615607dbddde102c0292de425313bc296

											
										
										
											2017-12-10 19:35:44 +03:00
+								        <a class="nav-link active" href="/bootstrap-material-design/docs/4.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								      </li>
 								      <li class="nav-item">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								        <a class="nav-link " href="/bootstrap-material-design/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								      </li>
-												publish: docs: Experiment new partner (A/B testing)

generated from commit bcffe0a159478e56ce36e2376cde519cff3848ae

											
										
										
											2017-09-22 19:44:33 +03:00
+								      <li class="nav-item partner creativetim">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								        <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>
-												publish: docs: Experiment new partner (A/B testing)

generated from commit bcffe0a159478e56ce36e2376cde519cff3848ae

											
										
										
											2017-09-22 19:44:33 +03:00
+								      <li class="nav-item partner creativetim">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								        <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>
-												publish: docs: Experiment new partner (A/B testing)

generated from commit bcffe0a159478e56ce36e2376cde519cff3848ae

											
										
										
											2017-09-22 19:44:33 +03:00
+								      <li class="nav-item partner mdbootstrap">
 								        <a class="nav-link" href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/?utm_source=7e4bff&utm_id=7e4bff" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Design for Boostrap PRO');"
 								          target="_blank" rel="noopener">Material Design for Bootstrap PRO</a>
 								      </li>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								    </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">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								        <a class="dropdown-item active" href="/bootstrap-material-design/docs/4.0/">Latest (4.x)</a>
-												publish: docs: Added URL to v3 documentation site

generated from commit 985d1e2967abb506fff6cfafb55140cc9d2ac89d

											
										
										
											2017-09-05 14:47:21 +03:00
+								        <a class="dropdown-item" href="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html">v3.x</a>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								      </div>
 								    </li>
 								    <li class="nav-item">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 16:12:11 +03:00
+								      <a class="nav-link p-2" href="https://github.com/FezVrasta/bootstrap-material-design" target="_blank" rel="noopener" aria-label="GitHub">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								        <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">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 16:12:11 +03:00
+								      <a class="nav-link p-2" href="https://twitter.com/FezVrasta" target="_blank" rel="noopener" aria-label="Twitter">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								        <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">
-												publish: docs: Switch to Spectrum chat

generated from commit 0cfe80edc5d5a8b76f8c2d98071671ef4f6427f3

											
										
										
											2017-11-15 12:41:06 +03:00
+								      <a class="nav-link p-2" href="https://spectrum.chat/bootstrap-md" target="_blank" rel="noopener" aria-label="Spectrum">
 								        <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Spectrum</title>
 								  <path fill="currentColor" fill-rule="evenodd" d="M256,51.2C21.5,51.2,0,83.4,0,222.2c0,94.2,9.7,139.3,89.1,158.7l0,0v58.4c0.5,12.4,11,22.1,23.5,21.6c4-0.2,8-1.4,11.4-3.6l98.8-63.5H256c234.5,0,256-32.3,256-171.5S490.5,51.2,256,51.2z M144.9,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C177.9,251,163,265.5,144.9,265.2C144.9,265.2,144.9,265.2,144.9,265.2zM256,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C289,251,274.1,265.5,256,265.2C256,265.2,256,265.2,256,265.2z M367.1,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C400.1,251,385.2,265.5,367.1,265.2C367.1,265.2,367.1,265.2,367.1,265.2z" />
-												publish: docs: Replaced Slack with official Gitter channel

generated from commit 39851e1b9f7e8eddeb3ab96751842f42b0e56286

											
										
										
											2017-09-22 20:19:15 +03:00
+								</svg>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
 								      </a>
 								    </li>
 								  </ul>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 16:12:11 +03:00
+								  <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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03: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">
 								  <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 ">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								      <a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/getting-started/introduction/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								        Getting started
 								      </a>
 								      <ul class="nav bd-sidenav">
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/getting-started/introduction/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Introduction
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/getting-started/download/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Download
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/getting-started/contents/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Contents
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/getting-started/browsers-devices/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Browsers & devices
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/getting-started/javascript/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              JavaScript
 								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
 								              Theming
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/getting-started/build-tools/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Build tools
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/getting-started/webpack/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Webpack
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/getting-started/accessibility/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Accessibility
 								            </a>
 								          </li>
 								      </ul>
 								    </div>
 								  <div class="bd-toc-item ">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								      <a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/layout/overview/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								        Layout
 								      </a>
 								      <ul class="nav bd-sidenav">
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/layout/overview/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Overview
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/layout/grid/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Grid
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/layout/media-object/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Media object
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/layout/utilities-for-layout/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Utilities for layout
 								            </a>
 								          </li>
 								      </ul>
 								    </div>
 								  <div class="bd-toc-item ">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								      <a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/content/reboot/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								        Content
 								      </a>
 								      <ul class="nav bd-sidenav">
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/content/reboot/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Reboot
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/content/typography/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Typography
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/content/code/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Code
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/content/images/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Images
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/content/tables/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Tables
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/content/figures/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Figures
 								            </a>
 								          </li>
 								      </ul>
 								    </div>
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								  <div class="bd-toc-item ">
 								      <a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
 								        Material Design
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								      </a>
 								      <ul class="nav bd-sidenav">
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
 								              Buttons
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/material-design/collapse-inline/">
 								              Collapse inline
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/material-design/drawers/">
 								              Drawers
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/material-design/extensions/">
 								              Extensions
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/material-design/forms/">
 								              Forms
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/material-design/labels/">
 								              Labels
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/material-design/list-groups/">
 								              List groups
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/material-design/menus/">
 								              Menus
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/material-design/navs/">
 								              Navs
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/material-design/selections/">
 								              Selections
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/material-design/snackbars/">
 								              Snackbars
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								      </ul>
 								    </div>
 								  <div class="bd-toc-item ">
 								      <a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
 								        Bootstrap Components
 								      </a>
 								      <ul class="nav bd-sidenav">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
 								              Alerts
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								          <li class="">
 								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
 								              Badge
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
 								              Breadcrumb
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
 								              Buttons
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
 								              Button group
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
 								              Card
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
 								              Carousel
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
 								              Collapse
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
 								              Dropdowns
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
 								              Forms
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
 								              Input group
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
 								              Jumbotron
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
 								              List group
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
 								              Modal
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
 								              Navs
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
 								              Navbar
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
 								              Pagination
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
 								              Popovers
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
 								              Progress
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
 								              Scrollspy
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								          <li class="">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
 								              Tooltips
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								            </a>
 								          </li>
 								      </ul>
 								    </div>
 								  <div class="bd-toc-item ">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								      <a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								        Utilities
 								      </a>
 								      <ul class="nav bd-sidenav">
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/borders/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Borders
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/clearfix/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Clearfix
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/close-icon/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Close icon
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/colors/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Colors
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/display/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Display
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/embed/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Embed
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/flex/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Flex
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/float/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Float
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/image-replacement/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Image replacement
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/position/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Position
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/screenreaders/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Screenreaders
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/sizing/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Sizing
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/spacing/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Spacing
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/text/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Text
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/vertical-align/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Vertical align
 								            </a>
 								          </li>
 								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/utilities/visibility/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Visibility
 								            </a>
 								          </li>
 								      </ul>
 								    </div>
 								  <div class="bd-toc-item ">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								      <a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								        Extend
 								      </a>
 								      <ul class="nav bd-sidenav">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								          <li class="">
 								            <a href="/bootstrap-material-design/docs/4.0/extend/approach/">
 								              Approach
 								            </a>
 								          </li>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								          <li class="">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								            <a href="/bootstrap-material-design/docs/4.0/extend/icons/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								              Icons
 								            </a>
 								          </li>
 								      </ul>
 								    </div>
 								  <div class="bd-toc-item ">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								      <a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/migration/">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								        Migration
 								      </a>
 								      <ul class="nav bd-sidenav">
 								      </ul>
 								    </div>
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
 								  <div class="bd-toc-item ">
 								      <a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
 								        About
 								      </a>
 								      <ul class="nav bd-sidenav">
 								          <li class="">
 								            <a href="/bootstrap-material-design/docs/4.0/about/overview/">
 								              Overview
 								            </a>
 								          </li>
 								          <li class="">
 								            <a href="/bootstrap-material-design/docs/4.0/about/brand/">
 								              Brand
 								            </a>
 								          </li>
 								          <li class="">
 								            <a href="/bootstrap-material-design/docs/4.0/about/license/">
 								              License
 								            </a>
 								          </li>
 								          <li class="">
 								            <a href="/bootstrap-material-design/docs/4.0/about/translations/">
 								              Translations
 								            </a>
 								          </li>
 								      </ul>
 								    </div>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								</nav>
 								        </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>
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								<li class="toc-entry toc-h2"><a href="#flush">Flush</a></li>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								<li class="toc-entry toc-h2"><a href="#contextual-classes">Contextual classes</a>
 								<ul>
 								<ul>
 								<li class="toc-entry toc-h4"><a href="#conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</a></li>
 								</ul>
 								</ul>
 								</li>
 								<li class="toc-entry toc-h2"><a href="#with-badges">With badges</a></li>
 								<li class="toc-entry toc-h2"><a href="#custom-content">Custom content</a>
 								<ul>
 								<ul>
 								<ul>
 								<li class="toc-entry toc-h5"><a href="#list-group-item-heading">List group item heading</a></li>
 								<li class="toc-entry toc-h5"><a href="#list-group-item-heading-1">List group item heading</a></li>
 								<li class="toc-entry toc-h5"><a href="#list-group-item-heading-2">List group item heading</a></li>
 								</ul>
 								</ul>
 								</ul>
 								</li>
 								<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>
 								          <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
 								          <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>
 								<div class="bd-example" data-example-id="">
 								<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>
 								<div class="bd-example" data-example-id="">
 								<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>
 								<div class="bd-example" data-example-id="">
 								<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>
 								<div class="bd-example" data-example-id="">
 								<div class="list-group">
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								  <a href="#" class="list-group-item list-group-item-action active">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03: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>
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03: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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03: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>
 								<div class="bd-example" data-example-id="">
 								<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>
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03: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" data-example-id="">
 								<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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								<h2 id="contextual-classes">Contextual classes</h2>
 								<p>Use contextual classes to style list items with a stateful background and color.</p>
 								<div class="bd-example" data-example-id="">
 								<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>
 								<div class="bd-example" data-example-id="">
 								<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">
 								<h4 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h4>
 								<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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								<p>Add badges to any list group item to show unread counts, activity, and more with the help of some <a href="/bootstrap-material-design/docs/4.0/utilities/flex/">utilities</a>.</p>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
 								<div class="bd-example" data-example-id="">
 								<ul class="list-group">
 								  <li class="list-group-item d-flex justify-content-between align-items-center">
 								    Cras justo odio
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								    <span class="badge badge-primary badge-pill">14</span>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								  </li>
 								  <li class="list-group-item d-flex justify-content-between align-items-center">
 								    Dapibus ac facilisis in
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								    <span class="badge badge-primary badge-pill">2</span>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								  </li>
 								  <li class="list-group-item d-flex justify-content-between align-items-center">
 								    Morbi leo risus
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								    <span class="badge badge-primary badge-pill">1</span>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03: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
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03: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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03: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
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03: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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03: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
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03: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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03: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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								<p>Add nearly any HTML within, even for linked list groups like the one below, with the help of <a href="/bootstrap-material-design/docs/4.0/utilities/flex/">flexbox utilities</a>.</p>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
 								<div class="bd-example" data-example-id="">
 								<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>
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03: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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03: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>
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03: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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03: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>
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03: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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03: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>
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03: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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03: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>
-												publish: v4.1.0

generated from commit 6821b53b3ae317d9bc37c9b6aa26d0c510536665

											
										
										
											2018-01-23 15:38:38 +03:00
+								<table class="table table-bordered table-striped">
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03: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>
-												publish: docs: better partner tracking

generated from commit 869ab342fe95711a1cc5deee485b1a38640ef53c

											
										
										
											2017-09-25 17:31:14 +03:00
+								    <script src="/bootstrap-material-design/assets/js/vendor/split.min.js">
 								</script>
 								<script>
 								  Split.setup({
-												publish: docs: fixes

generated from commit d8dd07f16f9c6f5cff3d46452e4039149a0e797c

											
										
										
											2017-09-25 17:47:18 +03:00
+								    creativetim: function () {document.body.classList.add('creativetim')},
 								    mdbootstrap: function () {document.body.classList.add('mdbootstrap')},
-												publish: docs: better partner tracking

generated from commit 869ab342fe95711a1cc5deee485b1a38640ef53c

											
										
										
											2017-09-25 17:31:14 +03:00
+								  });
 								  (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>
 								<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								<script>window.jQuery || document.write('<script src="/bootstrap-material-design/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								<script src="/bootstrap-material-design/assets/js/vendor/popper.min.js"></script>
-												publish: docs: Fixed SnackbarJS docs (fix #1231)

generated from commit 527c7eec39fa04b4cbf1c464ac8f035fc1e4aabc

											
										
										
											2017-12-10 19:57:51 +03:00
+								<script src="https://cdn.rawgit.com/FezVrasta/snackbarjs/1.1.0/dist/snackbar.min.js" crossorigin="anonymous"></script>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								  <script src="/bootstrap-material-design/dist/js/bootstrap-material-design.js"></script>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								  <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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
 								<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:57:09 +03:00
+								<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>
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
 								<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
 								<script type="text/javascript">
 								  var docsearch = docsearch({
-												publish: docs: Fixed search

generated from commit 786f86ea1108ccc85f6e9dc79b10f626c17ddf33

											
										
										
											2017-12-13 12:02:19 +03:00
+								    apiKey: 'b5c13bef25101d81f781cc15f4485a52',
 								    indexName: 'fezvrasta_bootstrap_material_design',
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								    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) {
-												publish: docs: Fixed search

generated from commit 786f86ea1108ccc85f6e9dc79b10f626c17ddf33

											
										
										
											2017-12-13 12:02:19 +03:00
+								        console.log(hit.url);
 								        hit.url = hit.url.replace('https://fezvrasta.github.io/', '/');
-												publish: fix: remove nojekyll...

generated from commit 24d054d4df338772e36eba7eb87a12636be3c2eb

											
										
										
											2017-08-31 15:49:19 +03:00
+								        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>