Bootstrap multi column carousel Video Lecture - Learn Bootstrap From Basics

this is part 52 of bootstrap tutorial in
this video well disc is creating a
multi-column carousel this is how we
want our multi-column carousel to be we
are going to have three slides in the
carousel and each slide should have
three columns as you can see here let's
see how to achieve this let's flip to
the studio this is the same example that
we worked with in our previous video at
the moment what we've got here is a
single column carousel let's see how to
convert the single column carousel to a
three column carousel as you can see
here so let's flip to visual studio the
first change that I'm going to do here
is change the class right here to call X
s 12 so this column is going to span the
entire 12 units in the bootstrap grid
system this line right here is not going
to change in any way and this line here
where we are creating our carousel
indicators now if you look at our
carousel right here this carousel is
going to have only three slides so we
only need three circle indicators so
let's get rid of the extra list item
that we've got here and then the
significant change is going to be right
here within this div where we have this
carousel in a class now inside this item
so item class represent each slide
within our carousel so inside this I'm
actually going to create a row so let's
create a development with class row and
let's move this closing div right here
and then then inside this row let's
create a column which is going to be
four units wide in a bit you will
understand why we are creating a column
that is four units wide because remember
we want three columns per slide and the
slide itself is represented by this
development which has this class item so
within the item within the slide at the
moment we have got only one column so
let's create two other such columns so
what I'm going to do is we have got
another image here so I'm going to
change the class here to call X s4 so
this image is also going to be
four units wide and I'm going to move
this column inside this first slide
itself so we've got a row inside this
row we have got one column at the moment
and we have got our second column so in
our slide at the moment we have got two
columns I'm going to create third column
so let's change the class on this day
right here to call XS four and then move
this also inside the same row so now
we've got one slide and that slide has
got a single draw with three columns
okay so with that we have at the moment
one slide in our Castle we need to
create two other such slides we'll do
that in just a bit let's save our
changes reload this webpage notice now
we've got a carousel with a slide that
has got three columns in it now at the
moment when I click on these left and
right arrows or on these circle
indicators nothing is going to happen
it's not going to move from one slide to
another that's because we only have one
slide at the moment now all we need to
do is create two other slides just like
this and in the interest of time I have
already typed the required HTML so we've
got the two other slides look at this
we've got this development with class
item so this is a slide and inside that
we have a row and within the row we've
got three columns each being four units
wide and within each column we have an
image and a caption for the carousel
okay the only difference between these
two divs and this div right here is that
on this div we have used the active
class because we want this slide to be
active when the carousel initially loads
and we need three slides with three
columns within each slide so that means
we need nine images total and we've got
images within our images folder so let's
copy these two slides from our notepad
and I'm going to paste them inside this
development which has got the
carousel in a class let's save our
changes reload of a web page now it
should automatically cycle through
between all the three slides notice
every slide has got three columns with
net so the left and right arrows work
and the circle indicators also work
exactly the same as before so it's that
easy creating a multi-column carousel
using bootstrap thank you for listening
and have a great day