Bootstrap pager and pagination Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part 30 of bootstrap tutorial in
this video we'll discuss bootstrap pager
and pagination components first let's
see how to create a simple bootstrap
pager with previous and next buttons as
you can see here let's flip Visual
Studio now to create a pager we create
an unordered list and set its class to
pager and inside this unordered list we
are going to create two list items one
for the previous button and the other
one is for the next button and inside
each list item we are going to nest an
anchor element and for now let's set its
href attribute to hash the text on the
previous link is going to be previous
and the text on the next link is going
to be next let's save our changes and
when we reload the page notice we get a
pager with previous and next lengths
what's missing here is the left and
right arrows to get those arrows we are
going to use ampersand L a are our
semicolon L stands for left a our R
stands for arrow so this is going to
give us left arrow as you might have
guessed by now to get the right arrow we
use ampersand our a our our semicolon
are standing for right a our are
standing for arrow so we get the right
arrow let's save our changes and when we
reload this page notice we get the left
and right arrows as expected and here is
the HTML which we have just seen
now let's discuss some of the useful
pager classes by default the pager links
are positioned at the center of their
container in this example the container
is the page itself so notice the
previous and next links are positioned
at the center of the page instead if you
want the previous link on the left hand
side of the page and the next link on
the right hand side of the page then use
previous and next classes let's look at
them in action so on this previous list
item let's use the preview
glass and on the next list item let's
use next class let's save our changes
reload the page notice the links are
aligned as expected to disable either
the previous or next length use the
disabled class let's look at this in
action so on this previous list item
along with the previous class let's also
use the disabled class when we reload
this page notice the style of this
previous link changes also when we hover
the mouse over this disabled previous
link look at the cursor style it changes
to a stop sign indicating that this
previous link is disabled and cannot be
clicked but one thing to keep in mind is
that the link functionality still exists
so if we click on this notice at the
moment the href attribute value is hash
so when we click on the previous link
here the URL changes so that means the
link functionality still exists now to
remove the link functionality replace
this anchor element with a span element
let's do that now so I'm going to change
this to a span and let's get rid of this
href attribute let's save our changes
reload our page let's remove this hash
from the URL and look at this when I
click on this previous link now we don't
get that hash in the URL
meaning the link functionality is
removed as expected let's now discuss
how to create a pagination bar with
numbers as you can see here let's flip
to visual studio to create a pagination
bar with numbers we create an unordered
list with its class set to pagination
within the unordered list let's create a
list item within the list item let's
nest an anchor element and set its href
attribute to hash let's make six more
copies of this list item on the first
link within the pagination bar
we want the symbol right here so to get
that symbol we are going to use
ampersand L a Q u o semicolon and on the
last link we want
this symbol right here so to get that
symbol we are going to use ampersand R a
qu oh and on the rest of the links right
here we want numbers so on this link we
want number 1 on this 2 on this 3 so on
and so forth
let's see what changes reload the page
notice we get the pagination bar with
numbers as expected here is the HTML now
let's discuss some of the useful
pagination classes active this class is
used to indicate the current page that
you are on let's say for example at the
moment we are on page number 3 and we
want to style that length differently so
on this list item let's use the active
class let's say what changes and when we
reload our page notice the link 3 is
styled differently also when I hover the
mouse over it the cursor style does not
change to a hand symbol indicating that
we cannot click this whereas when I have
the mouse over any of the other links it
changes to a hand symbol now let's
discuss the disabled class this class is
used to disable a page number in the
pagination bar let's say for example we
want to disable this link right here so
on that respective list item we are
going to use disable the class let's
save our changes reload the page and
look at this when I have the mouse over
the cursor style changes indicating that
this link is disabled now let's discuss
pagination energy and SM classes LG
stands for large SM stands for small so
these two classes are used for creating
large and small pagination bars
respectively let's look at them in
action now to demonstrate those two
classes I'm actually going to make two
more copies of this unordered list on
the first unordered list I am going to
use pagination LG class along with the
pagination class and on the last
unordered list let's use
pagination SM class and on the second
unordered list we are not using any of
these two classes so it's going to use
the default size so let's say our
changes and when we reload this page
notice we get three pagination bars with
three different sizes thank you for
listening and have a great day