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 =
< 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" >
GeeksforGeeks
</ 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