Bootstrap - pagination 디자인 변경

프로젝트를 진행하다 보면 페이지 네이션을 넣는 경우가 있습니다, 하지만 bootstrap의 페이지 네이션 디자인이 프로젝트와 맞지 않을 때 변경하고 싶은 경우가 있습니다, 그럴 경우 페이지 네이션 템플릿을 찾아서 변경하거나 bootstrap.css에서 페이지 네이션의 디자인을 변경하면 됩니다, 하지만 기존의 프로젝트에서 페이지 네이션 템플릿을 적용하는 것은 힘들기에 bootstrap.css에서 최대한 비슷하게 페이지 네이션의 디자인을 변경하면 됩니다.

 

https://codepen.io/wouterbles/pen/gpaMRd

WebDesignerDepot pagination

(제가 적용하려던 페이지네이션 디자인입니다.)

 

디자인을 변경하기 위해서는 bootstrap.css 에서. page-link,. page-link:hover,. page-item.active. page-link를 변경하면 됩니다. 

(기존의 페이지 네이션 디자인입니다.)

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
}
.page-link:hover {
  z-index: 2;
  color: #0056b3;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

기본 페이지네이션 결과물 입니다.

 

(제가 바꾼 페이지 네이션 디자인입니다.)

.page-link {
    position: relative;
    display: inline-block;
    color: #2c3e50;
    border-radius: 24px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 8px 16px 10px;
    margin-left:10px;
    margin-right:10px;
}
.page-link:hover {
  z-index: 2;
  border-radius: 24px;
  color: white;
  text-decoration: none;
  background-color: #2c3e50;
  border-color: #dee2e6;
}
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #2c3e50;
}
.page-item:first-child .page-link {
  
}

.page-item:last-child .page-link {
  
}

바꾼 페이지네이션 결과물 입니다.