기본 목록 그룹

가장 기본적인 목록 그룹은 목록 항목이 있는 정렬되지 않은 목록입니다.

기본 목록 그룹은 <ul>요소에 .list-group클래스를 추가하고 <li>요소에 .list-group-item요소를 추가하면 됩니다.

<ul class="list-group">
    <li class="list-group-item">실전홈페이지제작</li>
    <li class="list-group-item">CSS Grid</li>
    <li class="list-group-item">PHP5와 그누보드5</li>
</ul>

활성 항목(Active)

현재 선택항목을 강좌하기 위해서는 .active 클래스를 <li>에 추가하면 됩니다.

<ul class="list-group">
    <li class="list-group-item active">실전홈페이지제작</li>
    <li class="list-group-item">CSS Grid</li>
    <li class="list-group-item">PHP5와 그누보드5</li>
</ul>

비활성 항목(Disabled)

항목을 비활성상태로 표시하기 위해서 .disabled클래스를 <li>요소에 추가하면 됩니다.

<ul class="list-group">
    <li class="list-group-item disabled">실전홈페이지제작</li>
    <li class="list-group-item">CSS Grid</li>
    <li class="list-group-item">PHP5와 그누보드5</li>
</ul>

링크 항목을 포함하는 목록 그룹

링크항목이 있는 목록 그룹을 만들려면 <ul>, <li>요소 대신에 <div>, <a>를 사용합니다. 또한, hover 기능을 주려면 .list-group-item-action클래스를 추가합니다.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">실전홈페이지제작</a>
  <a href="#" class="list-group-item list-group-item-action">CSS Grid</a>
  <a href="#" class="list-group-item list-group-item-action">PHP5와 그누보드5</a>
</div>

문맥 클래스 (Contextual)

문맥 클래스를 추가하여 목록 항목에 색을 입힐 수 있습니다.

문맥 클래스 : .list-group-item-success, .list-group-item-secondary, .list-group-item-info, .list-group-item-warning, .list-group-item-danger , .list-group-item-dark 및 .list-group-item-light 

<ul class="list-group">
    <li class="list-group-item list-group-item-success">Success 항목</li>
    <li class="list-group-item list-group-item-secondary">Secondary 항목</li>
    <li class="list-group-item list-group-item-info">Info 항목</li>
    <li class="list-group-item list-group-item-warning">Warning 항목</li>
    <li class="list-group-item list-group-item-danger">Danger 항목</li>
    <li class="list-group-item list-group-item-primary">Primary 항목</li>
    <li class="list-group-item list-group-item-dark">Dark 항목</li>
    <li class="list-group-item list-group-item-light">Light 항목</li>
</ul>

문맥 클래스를 갖는 링크 항목

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Action 항목</a>
    <a href="#" class="list-group-item list-group-item-success">Success 항목</a>
    <a href="#" class="list-group-item list-group-item-secondary">Secondary 항목</a>
    <a href="#" class="list-group-item list-group-item-info">Info 항목</a>
    <a href="#" class="list-group-item list-group-item-warning">Warning 항목</a>
    <a href="#" class="list-group-item list-group-item-danger">Danger 항목</a>
    <a href="#" class="list-group-item list-group-item-primary">Primary 항목</a>
    <a href="#" class="list-group-item list-group-item-dark">Dark 항목</a>
    <a href="#" class="list-group-item list-group-item-light">Light 항목</a>
</div>