Get boba!
boba Version 1.7.2

Pagination

Pagination comes in all of boba's colors.
<div class="pagination green">
    <a href="#"> « </a>
    <a href="#"> 1 </a>
    <a href="#" class="active"> 2 </a>
    <a href="#"> 3 </a>
    <a href="#"> » </a>
</div>

Sizes

Pagination can be resized.

Small


Default


Medium


Large

<div class="pagination small">
    <a href="#"> « </a>
    <a href="#"> 1 </a>
    <a href="#" class="active"> 2 </a>
    <a href="#"> 3 </a>
    <a href="#"> » </a>
</div>

<div class="pagination">
    ...
</div>

<div class="pagination medium">
    ...
</div>

<div class="pagination large">
    ...
</div>

Styles

Change the look of your pagination with ease.

Rounded

Give your pagination will have a rounded look using the .rounded class.
<div class="pagination rounded green">
    <a href="#"> « </a>
    <a href="#"> 1 </a>
    <a href="#" class="active"> 2 </a>
    <a href="#"> 3 </a>
    <a href="#"> » </a>
</div>

Inverted

Invert the default styling of pagination using the .inverted class. Try hovering over the pagination!
<div class="pagination inverted green">
    <a href="#"> « </a>
    <a href="#"> 1 </a>
    <a href="#" class="active"> 2 </a>
    <a href="#"> 3 </a>
    <a href="#"> » </a>
</div>

Bordered

Add a border around each pagination option using the .bordered class.
<div class="pagination rounded green">
    <a href="#"> « </a>
    <a href="#"> 1 </a>
    <a href="#" class="active"> 2 </a>
    <a href="#"> 3 </a>
    <a href="#"> » </a>
</div>

Combinations

Mix and match the .rounded, .inverted, and .bordered classes to create the perfect pagination.
Rounded, Bordered, Default Pagination


Inverted, Bordered, Red Pagination


Inverted, Rounded, Bordered, Green Pagination 

<!-- Rounded, Bordered, Default Pagination -->
<div class="pagination rounded bordered">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#" class="active">2</a>
    <a href="#">3</a>
    <a href="#">»</a>
</div>


<!-- Inverted, Bordered, Red Pagination -->
<div class="pagination inverted bordered red">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#" class="active">2</a>
    <a href="#">3</a>
    <a href="#">»</a>
</div>

<!-- Inverted, Rounded, Bordered, Green Pagination -->

<div class="pagination inverted bordered rounded green">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#" class="active">2</a>
    <a href="#">3</a>
    <a href="#">»</a>
</div>

Spacing

Use the .more-spacing class to spread out your pagination.

Default


More Spacing

<div class="pagination more-spacing">
    <a href="#"> « </a>
    <a href="#"> 1 </a>
    <a href="#" class="active"> 2 </a>
    <a href="#"> 3 </a>
    <a href="#"> » </a>
</div>

Alignment

Use the .text-left, .text-center, and .text-right helper classes to easily align your pagination.

Left


Center


Right

<-- Left Align -->
<div class="text-left">
    <div class="pagination">
        <a href="#"> « </a>
        <a href="#"> 1 </a>
        <a href="#" class="active"> 2 </a>
        <a href="#"> 3 </a>
        <a href="#"> » </a>
    </div>
</div>

<-- Center Align -->
<div class="text-center">
    <div class="pagination">
        ...
    </div>
</div>

<-- Right Align -->
<div class="text-right">
    <div class="pagination">
        ...
    </div>
</div>