Bootstrap 4 / Pagination – 이전 또는 다음 페이지로 연결하는 링크 꾸미기

글이 많을 때 다음 글 또는 이전 글, 다음 글 목록 또는 이전 글 목록으로 이동하는 링크를 만듭니다. 이를 페이지네이션(Pagination)이라고 하는데, Bootstrap에서는 페이지네이션을 쉽게 꾸밀 수 있습니다.

기본

ul의 클래스를 pagination, li의 클래스를 page-item, a의 클래스를 page-link로 정하면 가로로 배열된 페이지네이션이 만들어집니다.

Active, Disabled

현재 위치를 나타낼 때는 li의 클래스에 active를, 이동할 수 없는 페이지를 나타낼 때는 li의 클래스에 disabled를 추가합니다. active가 추가되면 파란 배경에 흰 색 글자가 되고, disabled가 추가되면 회색 글자가 되고, 마우스를 올렸을 때 마우스 포인터 모양이 손가락 모양으로 변하지 않습니다.

크기

ul의 클래스에 pagination-sm를 추가하면 작아지고, pagination-lg를 추가하면 커집니다.

정렬

ul의 클래스에 justify-content-center를 추가하면 가운데 정렬, justify-content-end를 추가하면 오른쪽 정렬이 됩니다.