Bulma Pagination Sizes
Bulma is a free and open-source CSS framework used to make beautiful and responsive websites. The Bulma pagination component comes in four different sizes: small, default, medium, and large. Pagination size can be set using 3 CSS classes on the pagination component provided by Bulma.
Pagination Size Classes:
- is-small: This class is used to set the pagination size to small.
- is-medium: This class is used to set the medium size to medium.
- is-large: This class is used to set the pagination size to large.
Syntax:
<nav class="pagination is-large" role="navigation"> Content </nav>
Example: The below example shows how to use pagination size classes in Bulma.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css' > < title >Bulma Pagination Sizes</ title > < style > h1, p { text-align: center; } </ style > </ head > < body > < div class = "container" > < h1 class = "is-size-2 has-text-success" > w3wiki </ h1 > < p >< b >Bulma Pagination Sizes</ b ></ p > < nav class = "pagination is-small" role = "navigation" > < a class = "pagination-previous is-disabled" title = "You are on the first page." > Previous </ a > < a class = "pagination-next" >Next</ a > < ul class = "pagination-list" > < li > < a class = "pagination-link is-current" title = "Page 1" >1</ a > </ li > < li > < a class = "pagination-link" title = "Page 2" >2</ a > </ li > < li > < a class = "pagination-link" title = "Page 3" >3</ a > </ li > </ ul > </ nav > < nav class = "pagination" role = "navigation" > < a class = "pagination-previous is-disabled" title = "Tou are on the first page." > Previous </ a > < a class = "pagination-next" >Next</ a > < ul class = "pagination-list" > < li > < a class = "pagination-link is-current" title = "Page 1" >1</ a > </ li > < li > < a class = "pagination-link" title = "Page 2" >2</ a > </ li > < li > < a class = "pagination-link" title = "Page 3" >3</ a > </ li > </ ul > </ nav > < nav class = "pagination is-medium" role = "navigation" > < a class = "pagination-previous is-disabled" title = "Tou are on the first page." > Previous </ a > < a class = "pagination-next" >Next</ a > < ul class = "pagination-list" > < li > < a class = "pagination-link is-current" title = "Page 1" >1</ a > </ li > < li > < a class = "pagination-link" title = "Page 2" >2</ a > </ li > < li > < a class = "pagination-link" title = "Page 3" >3</ a > </ li > </ ul > </ nav > < nav class = "pagination is-large" role = "navigation" > < a class = "pagination-previous is-disabled" title = "Tou are on the first page." > Previous </ a > < a class = "pagination-next" >Next</ a > < ul class = "pagination-list" > < li > < a class = "pagination-link is-current" title = "Page 1" >1</ a > </ li > < li > < a class = "pagination-link" title = "Page 2" >2</ a > </ li > < li > < a class = "pagination-link" title = "Page 3" >3</ a > </ li > </ ul > </ nav > </ div > </ body > </ html > |
Output:
Reference: https://bulma.io/documentation/components/pagination/#sizes