ng-bootstrap

List group

A flexible vertical stack of related content. Wrap any number of <bs-list-group-item> elements inside a <bs-list-group> to get Bootstrap's list-group styling.

Basic usage

Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros

Active, disabled and contextual items

active marks the current item (aria-current), disabled mutes one (aria-disabled), and color paints a contextual variant.

The current itemA disabled itemA success itemA warning item
  
    
      
        <bs-list-group>
        
    
      
          <bs-list-group-item>Cras justo odio</bs-list-group-item>
        
    
      
          <bs-list-group-item>Dapibus ac facilisis in</bs-list-group-item>
        
    
      
          <bs-list-group-item>Morbi leo risus</bs-list-group-item>
        
    
      
        </bs-list-group>
        
    

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import {
        
    
      
          BsListGroupComponent,
        
    
      
          BsListGroupItemComponent,
        
    
      
        } from '@mintplayer/ng-bootstrap/list-group';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-list-group-demo',
        
    
      
          templateUrl: './my-list-group-demo.component.html',
        
    
      
          imports: [BsListGroupComponent, BsListGroupItemComponent],
        
    
      
        })
        
    
      
        export class MyListGroupDemoComponent {}