Bootstrap image gallery Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part seven of bootstrap tutorial
in this video we'll discuss some of the
bootstrap classes that we can use to
style images along the way we'll also
discuss how to build a simple bootstrap
photo gallery first let's look at some
of the image classes that we already
discussed we discussed these classes in
detail with examples in part 5 of this
video series
notice how the style of the image
changes depending on the image class
that's being applied now let's look at a
few other classes that we can use along
with images these classes are extremely
useful to position an image let's
understand the use of these classes with
an example let's flip to visual studio
notice on this page right here we've got
a container within the container we've
got a single row within this row we've
got a single column notice this column
is panning across all the 12 available
logical units in the bootstrap grid
system within this column we've got an
image element which is pointing to
computer dot PNG this image is present
within our images folder along with the
image we also have got some static text
right here so if we view this page in
the browser this is how the page looks
like at the moment notice we've got our
image on the left hand side there's a
single line of text on the right hand
side of the image the rest of the text
is present below the image now let's say
we want to display this image in the
center of the page to achieve this we
can make use of this class center block
now let's see what's going to happen if
we apply this class on this image
element let's save our changes reload
this page notice the image is positioned
in the center of the page all of the
text is present below the image but at
the moment this image is not responsive
notice when the screen size changes the
image size does not change to make this
image response if we use a different
class and that is IMG responsive which
we already discussed let's save our
changes reload the page and when the
screen size changes the image size also
changes
now let's say we want to display the
image on the left hand side of the page
and we want all this text to wrap around
the image
to display the image on the left hand
side we use a different class and that
is pull left so let's use pull left
instead of Center block let's save our
changes reload this page now notice we
have the image on the left hand side and
we have this text floating on the right
hand side of the image if you want this
image to be displayed as a thumbnail we
use a different class and that is image
thumbnail which we already dispersed
let's save the changes reload the page
notice now we get a little border around
the image now if you want this image to
be on the right hand side then instead
of using pull left use pull right let's
save the changes reload the page notice
now we have the image on the right hand
side now let's look at how to build a
simple photo gallery using bootstrap we
want to a photo gallery to be like this
so at the top of the page we want the
title to be bootstrap image gallery and
on a medium device we want just three
thumbnails per row and in a large device
we want four thumbnails and on a small
device we want two thumbnails on an
extra small device like a mobile phone
we want just one thumbnail and we want
this thumbnail to be clickable so when
we click on the thumbnail we want to see
the original image and within the
thumbnail we also want the name of the
image displayed as a caption so let's
see how easy it is to build this image
gallery using bootstrap for the purpose
of this demo I'm going to use the images
that come with Windows operating system
I'm using Windows 7 and on windows 7
this is the part where we have these
sample pictures C colon users public
pictures sample pictures I've already
copied all these images into the images
folder so I'm going to get rid of this
image element and all this static text
I'm going to leave that single column
that we have which is panning across all
the 12 logical units in a bootstrap grid
system but I'm going to change the name
of the class to column LG 12 so on every
screen size we get a single column that
is 12 units wide and the first thing
that we want to do is display the title
on the page
bootstrap image gallery to display that
I'm going to use an h3 element and let's
type the text bootstrap image gallery
and then we want to build our thumbnails
now so I'm going to create a development
and apply the class attribute so on a
large device we want four thumbnails so
I'm going to use call LG three so three
x four is 12 so that means we will get
four thumbnails on a large screen size
on a medium device we want three
thumbnails so I'm going to use call MD 4
so 4 x 3 is 12 so we get three
thumbnails on an extra small device I
mean on a small device we want to
thumbnails so I'm going to use sm64
small so two x six is 12 so we get only
two thumbnails on an extra small device
like mobile phone by default it's going
to display only one thumbnail anyway so
I'm not going to include that class so
that's our development and we want the
thumbnail to be clickable so I'm going
to use an anchor element and I'm going
to set its href attribute to the image
so images let's use the first image so
this HTF attribute is pointing to that
image and I'm going to apply thumbnail
class on the image element so this
thumbnail class is going to make this
anchor element and all its content
display like a thumbnail so whatever we
are going to have inside this anchor
element that will be displayed as a
thumbnail
and we apply this thumbnail class and
within the thumbnail what we want we
want the caption for the image and
that's going to be the name of the image
so to display that caption I'm going to
use the paragraph element and the
caption is going to be the name of the
image and then we want the image itself
displayed as a thumbnail so I'm going to
use the image element here and I'm going
to set its source attribute to the first
image so that's all there to it let's
save our changes reload this page so at
the moment we only have one image so
notice that image is displayed as a
thumbnail when I hover the mouse over it
changes to a hand symbol indicating that
we can click on that one and when we
click on that one we see the original
image and we also have the title and we
have the caption for the image and now
we need to do the same thing for the
rest of the images that we have here in
the interest of time I have already
typed the required HTML so I'm going to
copy that from our notepad and paste it
right here it's pretty much the same
HTML what differs is the name of the
image I'll have all this HTML available
on my blog in case you need it so let's
save this and when we reload this page
notice on a large screen size we get
four thumbnails and as we change the
size of the screen notice on a medium
device on a large device for on a medium
device 3 on a small device 2 and on next
to a small device like a mobile phone we
have only one and when we click on any
of the thumbnails we get to see the
original image so it's that easy to
build an image gallery using bootstrap
thank you for listening and have a great
day