Bootstrap tabs plugin Video Lecture - Learn Bootstrap From Basics to Building

this is part 42 of bootstrap tutorial in
this video we'll discuss the bootstrap
tabs plugin let's understand the tabs
plug-in with an example let's say how to
create these three tabs home contact and
locations locations is a drop-down let's
flip to visual studio the first thing
that we are going to do here is create
an unordered list with two classes nav
and nav tabs inside this unordered list
let's create a list item and inside this
list item let's create an anchor element
for now let's point its hof attribute to
hash and on this anchor element we are
going to use data - toggle attribute the
value for this is going to be tab
because that's what we are creating here
and if you look at our first tab the
text is home
so let's include home within the anchor
element along the same lines let's
create our second tab the text for the
second tab is going to be contact now
let's go ahead and create our third tab
and if you look at our third tab it's
actually a drop-down so on this list
item right here I'm going to use drop
down class and again we have an anchor
element here the href attribute is
pointing to hash the value for the data
toggle attribute here is going to be
drop-down and we are also going to use
drop down toggle clasp on this anchor
element and the text for this third tab
is going to be locations and if you look
at you know this third tab we also have
a little downward pointing arrow
indicating that this is a drop down so
to get that little downward pointing
arrow we are going to use bold element
with class caret that's a for example
we've got office locations in India and
USA and we want those two countries as
drop-down menu items so we need to build
our menu items now to do that we are
going to create an unordered list with
class drop-down men
so inside this unordered list let's
create a list item and inside this list
item let's include an anchor element and
this is going to be India tab let's
create another tab for our office
location in USA so we have created our
tabs now we need to create content for
these tabs so to create content for the
tabs we are going to create a
development and the class on this is
going to be tab content inside this
development I'm going to create another
development I'm going to give this div
an ID now this div here is going to
contain the content for of a Home tab so
I'm actually going to call this div home
tab and the class on this is going to be
tab pane and inside this we can have any
HTML so let's include an h3 element here
so let's say homepage let's also include
a paragraph and homepage content now
similarly let's include you know tab
content for the rest of the tabs that we
have so I'm actually going to make three
more copies of this and let's change the
text here I mean the ID here to contact
tab and the text to contact page contact
page content and this one is going to be
India tab and let's change the text both
within the h3 and paragraph element and
finally this is going to be our USA tab
us a page and us a page content alright
so we have the tabs and the content for
these tabs but they are not linked at
the moment to link these tabs with the
respect to tab contents we are going to
use these IDs so I'm going to copy the
ID and we have the href attribute we are
going to use the jQuery ID selector
which is hash and we are pointing to the
Home tab pane let's do the same thing
with the other tabs that we have so this
is going to be contact tab this will
point to India tab and this will point
to USA tab let's save all changes and
when we reload our page notice we get
our three tabs home contact and
locations but at the moment none of the
tabs are active let's say on the initial
page load we want this home tab to be
active and should display the home tab
content like this so in order to do that
on this list item right here I am going
to use active class and we also need to
use this active class on the respective
tab pane so here we have the Home tab
pane so along with the tab pane class I
am going to use the active class let's
save our changes now when we reload this
page look at that home tab is active and
we can see the tab pane content as well
we have the contact tab we have our
locations
when I select India you have the India
page content now let's look at some of
the classes that are useful for
customizing the behavior of the tabs
plugin fade this class animates the tabs
to fade in let's use this fade class on
all the four tab panes that we have here
let's save our changes reload this page
notice we don't see the Home tab content
that's because when we use the fade
class we also have to use in
class on the first tab pain to make the
initial content visible so on this first
tab pain which is our active pain along
with the fade class I am also going to
use the in class let's say what changes
reload this page now the content is
visible and look at this when I click on
the contact tab the content slowly fades
in now justified this class makes the
taps plug-in spend the entire width of
the parent container at the moment
notice the tabs does not occupy the
entire width of the container now if you
want these three tabs to occupy the
entire width of the container then along
with nav and nav tabs classes here use
nav justified class let's see what
changes reload this page now notice the
tabs plug-in span the entire width of
its parent container thank you for
listening and have a great day