Bootstrap 4 / List Group / 목록 꾸미기

List Group

list-group로 목록을 꾸밀 수 있습니다. ul 요소에 사용하는 것이 기본이나, 링크나 버튼에서 적용 가능합니다.

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.

기본

가장 기본적인 리스트 그룹입니다. ul 요소에는 .list-group를, li 요소에는 .list-group-item를 추가합니다.

강조하기

특정 li 요소를 강조하고 싶다면 .active를 추가합니다. 파란 배경에 흰 색 글자로 변합니다.

배경색 넣기

.list-group-item-primary 등을 추가하여 배경색을 넣을 수 있습니다.

Badge 넣기

Badge로 강조 문구나 숫자를 넣을 수 있습니다.

링크 또는 버튼에 적용하기

링크나 버튼을 마치 목록인 것처럼 나타낼 수 있습니다.

가로로 배열하기

.list-group-horizontal를 추가하여 가로 방향으로 배열할 수 있습니다.

낮은 해상도에서 세로로 배열하고 싶다면 .list-group-horizontal-sm, .list-group-horizontal-md, .list-group-horizontal-lg, .list-group-horizontal-xl을 추가합니다.