Bootstrap split button dropdown Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part 19 of bootstrap tutorial in
this video we'll discuss how to create a
split button drop down first let's
understand what is a split button drop
down here is an example notice we have
got two buttons here we have a button on
the left with the primary action and
another button on the right which
displays the drop down menu with the
rest of the actions let's see how to
create the split button drop down let's
flip to visual studio the first thing
that I'm going to do here is create a
button group because what we have here
is essentially a button group with two
buttons one button on the left with the
primary action and another button on the
right which displays the drop-down menu
with the rest of the actions so let's
create a button group to do that I'm
going to create a development with class
set to BTN group and within this button
group we are going to have these two
buttons
so the first Button says sequel server
so let's create a button and I'm going
to use some bootstrap button classes
let's use BTN and BTN primary classes
the text on this button is going to be
sequel server let's create our second
button now and if you look at the second
button within this button group it's not
displaying any text it's only displaying
this downward pointing arrow so I'm
going to remove this text which says
sequel server and we want the second
button to behave as a drop-down for that
I'm going to use another bootstrap class
and that is drop down toggle this class
specifies that this button is the
trigger element the element which shows
or hides the drop-down menu now in
addition to these three classes if we
want this button to behave as a
drop-down menu we also need another data
- attribute and that is data - toggle
and I'm going to set it to drop-down
this attribute is required on the
trigger element to show or hide the
drop-down menu and then we want this
button also to display this little
downward pointing arrow to get that
little downward pointing arrow I'm going
to create a span element with class
- carrot finally we need to build our
drop-down menu items to build the
drop-down menu items I'm going to create
an unordered list and set its class
through drop-down menu and the list
items within the drop-down menu we want
these three items c-sharp asp.net and
ato dotnet so let's create a list item
and I'm going to create an anchor
element set its href attribute to hash
and the value is going to be c-sharp
let's create two more copies of these
list items and this is going to be
asp.net and this is going to be a do
dotnet so let's save our changes and
when we reload this page we should get a
split button drop-down so when I click
on the Left button you know which
represents our primary action it's going
to take us to the sequel server page and
if I click on any of these menu items
it's going to take us to that respective
page here is the HTML for that next
let's discuss how to create split button
dropdowns with different sizes here we
have a large small and extra small split
button dropdowns let's see how to create
this I'm going to make two more copies
of the split button drop-down that we
have just created we want this last
split button drop-down to be an extra
small one so I'm going to use BTN group
XS x standing for extra small so this is
going to give us an extra small split
button drop down we want this to be a
small one so I'm going to use button
group SM standing for small so this is
going to give us a small split button
drop-down finally we want the first one
to be a large split button drop-down so
I'm going to use BTN group del T del T
standing for large so let's save our
changes and when we reload this page
we should get three split button
dropdowns with three different sizes
here is the HTML for that
finally let's discuss how to expand the
menu items of a split button drop down
upwards instead of downwards so when we
click on this button on the right we
want the drop down menu items to expand
upwards instead of downwards let's see
how to achieve this all we have to do is
use a different class and that is drop
up let's do that on all the split
buttons that we have
let's save our changes and when we
reload this page notice the little arrow
is pointing upwards now and when we
click on that the items are expanding
upwards instead of downwards we don't
have enough room on the top so just to
create some room on the top I'm going to
make copies of this break element let's
say or changes reload the page now look
at this for all the split button
dropdowns we have the menu items
expanding upwards instead of downwards
here is the HTML for that thank you for
listening and have a great day