Styling Bootstrap 3 Dynamic Paging Generator 2
Learn how to style the paging created with Bootstrap 3 Dynamic Paging Generator 2
Question:
How do i change Fonts, Colors, Margins or Paddings of the paging?
Answer:
You can easily customize the appearance of the paging. Here is how easy it is to do this, after you've created the paging on you page:
- If you want to customize a specific paging instance, you can use an #id to style it separately, just add the #id to the <ul> tag of the paging, so it becomes <ul class="pagination" id="yourId" ...
Otherwise just style the classes listed below to apply the customization site-wide. - Create a custom CSS file, and include it after the Bootstrap 3 CSS file. If you have already created a custom css file - just use it instead, there is no need to create a separate one.
- The following CSS classes control the appearance. The values entered are just example values, so just change them with your own:
- To change the default text color, background color, margins, padding and and border settings of the paging items, edit the following class:
.pagination > li > a {
padding: 6px 12px;
color: #337ab7;
background-color: #ffffff;
border: 1px solid #dddddd;
margin: 0 3px;
}
- To change the default text color, background color and and border settings of the active paging item, edit the following class:
.pagination > .active > a {
color: #337ab7;
background-color: #ffffff;
border: 1px solid #dddddd;
}
- To remove the default border radius from the first and the last paging item, set these to values to 0:
.pagination > li:first-child > a {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.pagination > li:last-child > a {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
- To change the default text color, background color and border color of the paging items, on hover and focus, change the following settings:
.pagination > li > a:hover,
.pagination > li > a:focus {
color: #23527c;
background-color: #eeeeee;
border-color: #dddddd;
}
- To change the default text color, background color and border color of
the active paging item, on hover and focus, change the following settings:
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
color: #ffffff;
background-color: #337ab7;
border-color: #337ab7;
}
- To change the default text color, background color and border color of the disabled paging items change the following settings:
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: #777777;
background-color: #ffffff;
border-color: #dddddd;
}
Comments
Be the first to write a comment
You must me logged in to write a comment.